If you have planned a trip that you want to feature on your website / blog or have an article, a post or a page that would be enhanced by one from Furkot's curated collection of publicly shared trips you can add a tripshot widget to your website / blog.

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. 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 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 / blog. That's not the only benefit you can derive from the tripshot widget. You can also make money - we offer a revenue sharing program - once enough visitors plan their trips using the information incorporated in the tripshot widget in your webpage or post you can receive a share of revenue we earn from these trips for booking hotels, flights and car rentals.

Width and height ¶

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

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 the map before generating 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 that one trip in the same widget. All your tripshots shared publicly with 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

Sometimes it doesn't make sense to call out one 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.

Revenue sharing program ¶

When you register online to join the Furkot revenue sharing program, you are issued the 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 your share of revenue from reservations made 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 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.