If you've planned a trip that you'd like to feature on your website or blog—or have an article, post, or page that could be enhanced with one from Furkot's curated collection of publicly shared trips—you can add a tripshot widget to your site.

To add your own trip to a website you need to publish it first: press the Share button in the Trip drawer and then press the Publish button. You will be taken to the trip snapshot page where you can use the embed button to generate an HTML snippet - the widget - to paste on your website.

All of Furkot's publicly shared trips - like the Top 10 The Jémez Mountain Trail - also have the embed button that you can use to create widgets to add to your website.

The tripshot widget allows you to capture the information in your webpage or post in the format that allows your visitors to easily transform it into their trip plans. Offering trip planning capabilities will increase your visitors interest in your website or blog. That's not the only benefit you can derive from the tripshot widget. You can also make money. We offer an affiliate program: when a Furkot user draws on the information in the tripshot widget on your page while planning their trip, you can earn a commission from their purchase of a Furkot Pass.

Width and height ¶

When pressed, the embed button on the tripshot page will generate an HTML code that looks like this:

The src attribute of the iframe element is a URL to the widget version of the tripshot. The href attribute of the anchor a element is a URL to the full page version of the tripshot. Both end with the identifier of the trip.

The embed button selects the width and height attributes of the iframe to ensure that the trip fits the widget at the same map scale as on the tripshot page. You can zoom on the map before generating a widget code or you can edit them afterwards. You can also remove them and style the widget iframe using CSS.

Trip album ¶

You can display more than one trip in the same widget. All your tripshots shared publicly with the Furkot community are grouped in albums; the tripshot page links to its album. You can use trip tags to determine which tripshots should be grouped together in an album. Use the embed button on the album page to create a tripshot album widget.

Trip set ¶

Even if you don't want to use trip tags to display multiple tripshots in one widget or when you don't want to share your tripshots with Furkot community you can still display multiple trips in the same widget. Add a parameter ts_id with a comma-separated list of additional trip identifiers to the tripshot widget URL.

The trip identifier is the last part of the tripshot URL.

Top 10 The Jémez Mountain Trail

Colors ¶

Displaying multiple trips in the same map can be confusing. In addition to ts_id tripshot widget accepts a parameter colors to help distinguish between trips.

Parameter color expects a comma-separated list of color values as RGB hex triplets (without #) in the same order as trips. If the trip is to be displayed using default color leave its slot on the colors list blank.

Top 10 The Jémez Mountain Trail

In some cases, you may not want to display a specific trip. You can hide its title by setting the title parameter to none.

Plan with Furkot

Styling ¶

We want the Furkot tripshot widget to fit well with other elements of your website. Since the widget is enclosed in an iframe, CSS rules do not have a direct effect on it. We can however help you transfer the CSS styling of your website to the embedded Furkot tripshot widget.

In order to transfer styles from your website to the Furkot tripshot widget you'll need to add the following script element to your page.

The source code of this script is available on github.

Add the following parameters to the iframe element representing the widget to style the Furkot tripshot widget:

• data-button - style of the Plan with Furkot button,

• data-button-hover - style of the Plan with Furkot button when the user hovers over it with the cursor (mouse pointer),

• data-link - style of the link to the full tripshot page,

• data-link-hover - style of the link to the full tripshot page when the user hovers over it with the cursor (mouse pointer),

• data-link-visited - style of the link to the full tripshot page that the user has already visited,

• data-heading - style the heading at the top of the widget.

Chances are, the webpage you embed the Furkot tripshot widget in already contains the elements (links, buttons etc.) that you want to use as the model for the widget elements. In that case you can use the CSS selectors of such elements as the values of respective data- parameters. The element addressed by the selector has to be present on the webpage when Furkot tripshot widget is created. It can be hidden but has to exists. Note: selectors can only be used for data-button, data-link, and data-heading parameters.

Check out this example of the Furkot tripshot widget styled to match the page:

To see a real life example of the styled Furkot tripshot widget take a look at the America's Scenic Byways website.

Affiliate program ¶

When you register online to join the Furkot affiliate program, you are issued a unique identifier. Make sure you specify its value as the uid parameter in the query part of the href attribute of the anchor element and the src attribute of the iframe element. This is what we need to credit you with commission from a Furkot Pass purchased by users who planned trips based on the tripshot widget in your webpage or post.

Remember to use & as a delimiter when there are already query parameters in the URL and ? when there are not.

Real world examples ¶

Furkot's curated collection of publicly shared trips is using tripshot widgets.

State by state blog employs the tripshot widget to illustrate posts with trip itineraries: trip, coast, and labor.

What about you? Do you embed Furkot tripshot widget on your website? Let us know and we'll post a link to your website here.