Trip planner integration - examples

2/8/2014

We collected some examples of how to integrate Furkot trip planner widget into a website.

Introduction to the trip planner widget integration describes necessary steps in details.

Furkot trip planner can be displayed in the middle of the screen with the rest of the page obscured to create impression of a modal dialog. In this example plan with Furkot button is a static anchor element <a>, Done button is styled as x in the upper right corner of the dialog. Click here to see how it works together with HTML and CSS code.

Next to plan with Furkot button

Displaying Furkot trip planner below or above a plan with Furkot button provides the user with a visual clue showing which place she is adding to the trip. In this example plan with Furkot button is a submit button <input type="submit"> of a <form>, Done button is styled as x next to plan with Furkot button when Furkot trip planner is shown. Click here to see how it works together with HTML and CSS code.

Style to match the page

Furkot trip planner can be styled to fit the color scheme of the page. In this example the widget is configured on the very light background (parameter data-theme="light") and copies styles for buttons and links from elements on the page (parameters data-button and data-link). Click here to see how it works together with HTML and CSS code.