Trailguide integration solutions

Integrate content from Trailguide onto your website by adding a <trailguide-plugin> element on your page.

The plugin is super fast, light weight, and very flexible.

Clicking on an activity will open a window showing all available information about the tour. The map can be extended to full screen by clicking the extend icon in the top-right corner.

Click the boxes below to see different representations of the plugin and how it works (scroll horizontally to releave all).

<trailguide-plugin
   license="your_license_key" 
   content="/gol">
</trailguide-plugin>

Showing content from the landing page of Gol using the default layout

<trailguide-plugin
   license="your_license_key" 
   content="/gol"
   lang="no"
   mode="cards,map"
   theme="light">
</trailguide-plugin>

Cards-only mode using a light theme with content from the landing page of Gol. Language set to Norwegian.

<trailguide-plugin
   license="your_license_key" 
   content="8064,6985,6816,8173,8679,7692"
   mode="carousel"
   delay="12">
</trailguide-plugin>

Showing a set of activities as a carousel with a QR code. Can be made fullscreen.

<trailguide-plugin
   license="your_license_key" 
   content="7783,8064"
   lang="no"
   mode="full">
</trailguide-plugin>

Loading specific activities by their IDs and showing the full content directly on the page

Documentation

Step 1) Add <trailguide-plugin/>

Add the trailguide plugin code snippet to your HTML code where you want to integrate the content from Trailguide

<trailguide-plugin
  license="your_license_key"
  content="content_query"
  option="value">
</trailguide-plugin>

Step 2) Add the plugin script

Add the following script tag below your <trailguide-plugin/>.
You only need one of these, no matter how many <trailguide-plugin/> entries you have.

<script>
  ((d, s) => {
    let t = d.createElement('script');
    t.type = 'text/javascript';
    t.src = s;
    !d.querySelector(`[src="${s}"]`) && d.querySelector('head').appendChild(t);
  })(document, 'https://trailguide.net/js/plugin.js');
</script>

Or add the following between the <head> and </head> section of your HTML code

<script async src="https://trailguide.net/js/plugin.js" />

Content

The content parameter specifies the activities that will be loaded and can take several forms. The plugin will only load activities you have licensed access to. If you specify content you do not have access to, nothing will show.

content="/x49"	This will load the content of collection 49
content="/hallingdalrides"	This will load the same content as on the landing page of hallingdalrides
content="8064,6985"	This will load activities 8064 and 6985
content="lat=62.5&lng=9.6"	This will load activities around the specified position

Mode

The plugin can show the content as cards, as a map, fully integrated one-by-on, or as a carousel of images and videos. The default mode is maps and cards.

mode="map,cards"	Shows the plugin as a map by default but enable the user to switch to card view and back. This is the default mode.
mode="cards,map"	Show the plugin as a set of cards by default but enable the user to switch to map view and back.
mode="map"	This will show the plugin as a map only.
mode="cards"	This will show the plugin as a set of cards only.
mode="full"	This will integrate each and every activity fully into the page.
mode="carousel" delay="12"	This will show the activities one-by-one, showing the cover image (if it has one) or play a video (if it has one). You can set the delay for how long each activity is shown (the default is 15 seconds). A QR-code is shown which can be scanned with your phone and open the activity being on display. You can also make it full-screen.

Options

There are some options you can set to adjust the visual appearance of the plugin.

theme="light"	Will show the plugin using more white backgrounds and with less bright colors.
lang="no"	Sets the language to Norwegian. This includes both the plugin labels and the content. Possible values are "no", "en", "cs", "pl", "es", "de", "it", and "fr".
base="norgeskart"	Sets the base map to norgeskart. Possible values are "trailguide", "norgeskart", "mtbmap", "swisstopo", "israel", "google", and "photo"
overlays="mtbtracks"	Shows the OpenStreetMap MTB tracks. Possible values are "mtbtracks", "cycleroutes", "strava", "stravared", and "protected_areas". They can be combined by separating them with a comma.
list="false"	Do not show the list in the map plugin