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

Introduction to the trip planner widget integration describes the 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 the impression of a modal dialog. In this example the plan with Furkot button is a static anchor element <a>, the 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 the Furkot trip planner below or above a plan with Furkot button provides the user with a visual clue showing which place they are adding to the trip. In this example the plan with Furkot button is a submit button <input type="submit"> of a <form>, the Done button is styled as x next to the plan with Furkot button when the 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.