Drop an AllTrails map into any section of your Touch Stay guidebook to make it fun for guests to explore the area around your property, build excitement and plan, long before they arrive.
Video: How to add an AllTrails walking tour to your Touch Stay guidebook
How to add an AllTrails walking tour to your Touch Stay guidebook
Step 1: Get the embed code from AllTrails
Open the route in AllTrails, then click Share.
Select Embed.
Copy the iframe code. It will look something like this:
<iframe class="alltrails" src="https://www.alltrails.com/widget/trail/costa-rica/puntarenas--2/playa-biesanz-playa-tulemar" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="AllTrails: Trail Guides and Maps for Hiking, Camping, and Running"></iframe>
Step 2: Create a Custom Element in Touch Stay
Go to Settings.
Open the Custom Elements tab.
Click New Custom Element.
Complete the following fields:
Third Party Service: AllTrails
Element Code Name: Give the element a short, descriptive name so it's easy to recognise later (for example, ManuelAntonioTrail or WaterfallWalk). Only letters, numbers, underscores (_), and hyphens (-) are allowed, no spaces or special characters.
AllTrails Embed Code: Paste the iframe code you copied from AllTrails.
Click Save.
Step 3: Add the route to your guidebook
Open Content Hub.
Open the topic where you want to display the route.
Click Custom Element in the editor.
Select the AllTrails element you created.
Activate the tag
Click Save Topic.
This will place your custom element field code into your topic content, and when you preview the guide, it will be replaced by your chosen AllTrails map.
Troubleshooting - FAQs
My embed code isn't being accepted when creating my custom element, what should I do?
If your embed code isn't being accepted, then the most likely reason is that it's the wrong embed code. Double-check you are using the standard embed code for your trail. If this still doesn't work, or you can't find it in your AllTrails account, then please contact support and send us a screenshot of the AllTrails share options that are available to you.
My AllTrails map doesn't display fully or has lots of space beneath it, what should I do?
The AllTrails route is added to your guide using an iframe. Depending on the size of the route, you may want to adjust its height so it displays better in your guide. To do this:
Go to Settings
Click Custom Elements.
Click the ⋮ (three dots) next to your AllTrails custom element and select View/Edit.
Adjust the Height value as needed and click Save.
Tip: Keep your guide preview open in another tab. Refresh it after each height adjustment until the route displays as you'd like.
Can I have a different version of the AllTrails map for each of my guides?
If you'd like each guidebook to display a different AllTrails route, you can override the default custom element at the guide level. This is useful if each property has its own trail or if you're using dynamic links with pre-filled values (such as a property name or ID).
Go to Guides and open the guide you want to update.
Scroll to the bottom of the Guide Details page.
In the Guide Custom Elements section, click Edit.
Paste the custom element link into the relevant field.
Adjust the Height if needed, then Save.
Notes:
This only changes the custom element for the selected guide. The original custom element remains unchanged for all other guides.
This option is only available if your account contains more than one guidebook.