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.
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:
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
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
iframe using CSS.
You can customize map displayed by the widget by adding
maptype parameter to the
link. You should specify the same map type in the anchor
href, so your visitors will see the same
kind of map on the tripshot full page as well.
Furkot supports following map types: roadmap (the default option, a normal street map, satellite (a satellite image), hybrid (a satellite image overlaid with major streets), and terrain (a topographic map).
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.
You can customize the map displayed by the tripshot album widget by adding the same
maptype parameter as with the tripshot widget.
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.
Displaying multiple trips in the same map can be confusing. In addition to
tripshot widget accepts a parameter
colors to help distinguish between trips.
color expects a comma-separated list of color values as RGB hex triplets
#) in the same order as trips. If the trip is to be displayed using default color leave
its slot on the colors list blank.
Sometimes it doesn't make sense to call out one trip. You can hide its title by setting the
title parameter to
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
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
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.