One of the best ways to engage your visitors is to let them plan their trip. Building a full-featured trip planner is often beyond the scope of most websites—that’s where Furkot comes in. You can focus on what your website does best: showcasing places to visit. We provide the tools that let users add those places to their itineraries while staying on your site.

You can now add trip planning capability with just a few lines of HTML. And if you have any problems we are here to help.

Furkot trip planner is a widget that displays a user's list of trips (itineraries), allows adding places (a.k.a. stops) to a selected trip, offers a subset of planning operations (adding, removing and reordering stops) within your website, and provides a link to full planning capabilities on Furkot.

Benefits ¶

What you gain by using a Furkot widget:

• Keep your audience on your site - people can add multiple stops from multiple pages of your website with Furkot recording their progress in the background, they don't have to leave your site until they've added all stops they were interested in.

• Save a link to your website in the planned itinerary - each saved stop will keep a backlink to your website, it will be visible to the person who planned the trip, and - if the trip is shared on social media - it will also be visible to everyone who sees it.

• Let people combine places from your website with other places - you may have a list of the best side road attractions but someone else may have a list of the best ethnic restaurants.

• Make money - we offer an affiliate program: when a Furkot user adds a place from your website to their trip you can receive commission from their purchase of a Furkot Pass.

Embedding the Furkot trip planner widget is an easy way to offer trip planning on your website—not only because it is far simpler to implement than a dedicated solution. More importantly, it allows users to seamlessly combine places from your website with any other destinations they want to visit. This enables them to build richer itineraries and encourages them to spend more time engaging with your content.

Integration ¶

In order to add trip planning capabilities you need two components: the Furkot trip planner widget and plan with Furkot buttons. Together, they support the following scenario:

1. visitor reads your description of a place and decides to visit it on their trip

2. visitor clicks on the plan with Furkot button

3. Furkot displays a widget allowing visitors to select the specific trip

4. visitor clicks the done button and continues to browse the content of your website

The whole scenario happens entirely in the context of your website without a distraction of switching tabs or windows. You can name the plan with Furkot button any way you want (add place to trip, visit on your trip, go to ... are a few suggestions).

Trip planner widget ¶

On pages with one or more plan with Furkot buttons you can embed the Furkot trip planner widget and setup connection between them by adding the following script element to the page. The source code of this script is available on github should you want to check it out.

The script will find all plan with Furkot buttons on the page and configure them to add stops to trips within the Furkot trip planner widget. Click on the button below to see how it works.

More examples of how to integrate the Furkot trip planner widget into a website are here.

Check also real-life examples of the embedded Furkot trip planner:

• State by state blog: each post has a plan with Furkot button near the bottom allowing readers to add described place to their itineraries,

• nooreq, scuba diving web app: plan with Furkot button (the one with the signature Furkot car icon) displays the Furkot trip planner widget styled to match nooreq color scheme,

• Discover Upstate New York, a website featuring exciting activities and great places to dine and stay from the shores of the Great Lakes to the Adirondack Mountains in upstate New York,

Markup ¶

The script places a Furkot trip planner widget markup at the end of the page. If that's not what you want, put the following snippet of the markup where you prefer the widget to be.

The script also adds an element with class furkot-widget-done - the Done button - that can be used to close or hide the trip planner widget. This button is added as the last element of the widget element. If you want it elsewhere or with a different text, just add an element with class furkot-widget-done to the page document.

Plan with Furkot buttons ¶

Check the article about plan with Furkot buttons for a detailed description of how to add them to your website.

Without a Furkot trip planner widget, plan with Furkot buttons simply direct a user to the Furkot trip planner web application. With a Furkot trip planner widget embedded on the same page, plan with Furkot buttons allow a user to plan the trip directly on your website.

If your page contains place data (name and geographic coordinates at the minimum) in the format the Furkot trip planner widget supports, it will automatically add plan with Furkot buttons to the page if you instruct it to do so. Configure the data-source parameter of the furkot-widget element to specify how to find place data on the page. The following options are supported:

• data-source="microdata" - place data is in microdata format as described in the article about plan with Furkot buttons

Styling ¶

We want the Furkot trip planner widget to fit well visually with other elements of your website. Elements added to your page by the Furkot trip planner widget can be styled with CSS. Classes that identify specific elements are:

• furkot-widget - trip planner container; use selector .furkot-widget iframe to style content of the trip planner (to the extent iframe from a different domain can be styled)

• furkot-widget-done - trip planned Done button

• furkot-widget-active - class set on trip planner container, Done button, and plan with Furkot buttons when a user is adding a place to their itinerary.

• furkot-widget-inactive - class set on trip planner container, Done button, and plan with Furkot buttons otherwise

Typically, you'll define a style .furkot-widget.furkot-widget-active to show the trip planner widget, and .furkot-widget.furkot-widget-inactive to hide it. Similarly .furkot-widget-done.furkot-widget-active, and .furkot-widget-done.furkot-widget-inactive will show and hide the Done button.

Since the widget content is enclosed in an iframe, CSS rules won't have effect on its content. If the Furkot default background shades don't fit your website, you can switch it off by setting the data-theme parameter to select a color theme.

The following color themes are supported:

• neutral - sets a transparent background on elements inside the widget, so the page background will be visible underneath; if you want to set a specific background to the Furkot trip planner widget different than the page background, style the widget container with CSS (class furkot-widget described above);

• light - theme similar to neutral, designed specifically for a white or a very light background; in addition to setting widget elements to a transparent background, it changes the styling of certain elements to improve their visibility on a light background

Chances are the webpage you integrate Furkot trip planner with contains clickable elements (buttons and links) styled in a certain way. In that case the default styling of Furkot buttons (orange rectangle) and links (blue text) may not match your website well. You can configure the widget to use the same styling for buttons (and links) as your webpage by setting data-button (or data-link) parameter to CSS selector of an element acting as a button on your page. Most likely it will be the same selector you specify in your webpage stylesheet to style buttons. For instance if a button on your webpage is and anchor <a> element of a class button, you'll set data-button to a.button. The element addressed by the selector has to be present on the webpage when the Furkot trip planner widget is created. It can be hidden but has to exist.

Check this example of the Furkot trip planner widget styled to match the page:

To see how well the Furkot trip planner can match a website color scheme check the scuba diving web app nooreq.

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 data-uid parameter of the furkot-widget element. This is what we need to credit you with commission from a Furkot Pass purchased by users who added stops to their trips by means of the Furkot trip planner widget embedded in your website.