One of the ways to engage your visitors is to allow them to plan their trip. Implementing a full fledged trip planner is likely beyond the scope of most websites. That's why Furkot proposes to share the burden. You can concentrate on what your website does best: describe places worth visiting, and we'll do what we do best: let people add those places to their planned itineraries while allowing them to remain on your website.

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 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 link to full planning capabilities on Furkot.

Benefits ¶

What you gain by using 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 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 be also visible to everyone who sees it;

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

• make money - we offer a revenue sharing program - once visitors start adding places from your website to their trips you can receive a share of revenue we earn from these trips for booking hotels, flights and car rentals.

Embedding Furkot trip planner widget is a great way to offer trip planning on your website not just because it is much easier to implement than any dedicated solution. More importantly it lets users seamlessly combine places from your website with any other places they want to visit on their trips. They can build much richer itineraries and thus are more inclined to spend time on your website doing that.

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 plan with Furkot button anyway you want (add place to trip, visit on your trip, go to ... are but a few suggestions).

Trip planner widget ¶

On pages with one or more plan with Furkot buttons you can embed Furkot trip planner widget and setup connection between them by adding a 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 Furkot trip planner widget. Click on the button below to see how it works.

More examples of how to integrate 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 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,

• Travelhome (in Dutch), a full-service motorhome travel agency helping Dutch customers with motorhome holidays to the United States, Canada, Australia, New Zealand, South Africa, Europe and South America: plan with Furkot buttons (labeled Plan Trip) featured in the campings pages open the Furkot trip planner widget directly on the page. Integration done by nCode.

Markup ¶

The script places Furkot trip planner widget markup at the end of the page. If that's not what you want, put the following snippet of 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/hide 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 detailed description of how to add them to your website.

Without Furkot trip planner widget, plan with Furkot buttons simply direct user to Furkot trip planner web application. With Furkot trip planner widget embedded on the same page, plan with Furkot buttons allow 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 data-source parameter of the furkot-widget element to specify how to find place data on the page. 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 Furkot trip planner widget to fit well visually with other elements of your website. Elements added to your page by 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 user is adding a place to her 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 Furkot default background shades don't fit your website, you can switch it off by setting data-theme parameter to select a color theme.

Following color themes are supported:

• neutral - sets transparent background on elements inside the widget, so the page background will be visible underneath; if you want to set a specific background to Furkot trip planner widget different then 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 transparent background, it changes 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 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 Furkot trip planner widget is created. It can be hidden but has to exists.

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

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

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