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.

Modal dialog ¶

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.