Embed AllTrails Activity on Website or Blog Easy – 3 Minute

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.

AllTrails Saved Activities Menu

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.

AllTrails Saved Activities Menu

Embed AllTrails Activity Get to Editor

Now we will click on the the share icon at the top of the activity.

AllTrails Lawson Peak Trail Share Button

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.

AllTrails Share Modal Embed

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:

  1. 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.
  2. Hide elevation graph: As the name implies, this will hide the elevation graph from showing on the embed.
  3. 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.

AllTrails Embed This Activity

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.

WordPress Custom HTML Block

Now we will paste the HTML code into this block as you can see in the screenshot below.

WordPress HTML Block with AllTrails Embed

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.

WordPress HTML Content Block AllTrails Preview

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!

6 thoughts on “Embed AllTrails Activity on Website or Blog Easy – 3 Minute”

  1. Does this require a certain type of WordPress site? I’ve been trying to embed alltrails maps on my blog for ages, but can never get it to work!

    Reply
    • Yeah, it should work on any current WordPress website. You can also do it without WordPress, it is very easy. If you need help let me know! Checked out your Blog, lots of beautiful photos! Stay safe out there on the trail!

      Reply
      • how do we embed in a word document.

        Reply
        • Which part are you trying to embed? The same exact content? I am not sure if there is a simple way to support putting the trail iframe into the word document.

          Reply
  2. Is it possible to embed a list also?

    Reply
    • Hey Magne, I don’t know of any current option for this. You are not the first one to ask this. I will let you know if I figure out how to do this.

      Reply

Leave a Comment