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>
<trailguide-plugin license="your_license_key" content="/gol" lang="no" mode="cards,map" theme="light"> </trailguide-plugin>
<trailguide-plugin license="your_license_key" content="8064,6985,6816,8173,8679,7692" mode="carousel" delay="12"> </trailguide-plugin>
<trailguide-plugin license="your_license_key" content="7783,8064" lang="no" mode="full"> </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>
Add the following script tag below your
You only need one of these, no matter how many
<trailguide-plugin/> entries you have.
Or add the following between the
</head> section of your HTML code
<script async src="https://trailguide.net/js/plugin.js" />
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|
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.|
|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.|
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|