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-link). Click here to see how it works together with HTML and CSS code.