In this guide, I will show you how to embed AllTrails activity on your personal blog or website. This is very easy to do and will only take a few minutes. Keep in mind, this example is for a WordPress site, but it would be similar for many implementations. If you are unsure how to use these instructions for your site, drop a comment down below and I would be happy to help further.
Find AllTrails Activity
First, we need to find the activity that we recorded. To do that login to the AllTrails website, then on the top menu select “Saved” > “Activities”. This will present you with the list of activities you have recorded inside AllTrails.
Once you found the activity that you would like to embed on your website, click on the card and it will bring you to the details page of the activity.
Embed AllTrails Activity Get to Editor
Now we will click on the the share icon at the top of the activity.
This opens a new window where we can select how we want to share the activity. You can see there are several different options to choose from like Copy Link, Text, Email, Embed, or QR Code.
Click on the “Embed” option represented with the code icon.
Embed AllTrails Activity Options
Now we can see the window where we can choose from a couple of options and then copy the HTML code to embed into your website. To see the additional options you will need to click on “Customize your code” to expand the options.
At the time of writing this you can see the three options where as follows:
- Deactivate zoom with mouse: This will prevent the user from being able to scroll in and out of the map with the scroll wheel on the mouse.
- Hide elevation graph: As the name implies, this will hide the elevation graph from showing on the embed.
- Hide your name: This will remove your name from the embed so that the user does not immediately know that this is your recording.
These options will update in real-time as you select them. I recommend playing around with the options and seeing what you prefer for embedding the activity on your site.
Once you are happy, select the copy HTML button so that you can save the embed AllTrails activity code on your clipboard.
Embed AllTrails Activity in WordPress
Once logged into your WordPress blog you will want to navigate to the post or page that you would like to embed the activity on.
Once you are on that page, using the Gutenberg block editor (which has been the default for some time now in WordPress) select the “+” button to add a new block, then select the “Custom HTML” option. If you do not see this in your drop-down, you can search for HTML to narrow down the results and make it easier to find.
Now we will paste the HTML code into this block as you can see in the screenshot below.
If you would like to preview what this will look like you can select the “Preview” option in the block settings and it will show you the embedded map. Keep in mind, that often times the post looks different between the editor and the front end of the website. Make sure to check it where the user will see it to make sure you are happy with the final outcome.
Check this out as a live example below! Or you can look through any of the hiking trail articles posted on my website.
As you can see it was very easy to embed AllTrails activity on your website. Drop a comment down below with how you plan to use this feature. I look forward to hearing from you Adventure Family!
More AllTrails Tutorials
If there is anything else you would like to learn about AllTrails, please drop a comment down below, or reach out using the contact form. I would love to make some more articles and videos that help with your adventures. Plus, I might learn something along the way too!