Checkout Widget

This documentation will help you integrate the widget into your website.

The Checkout Widget allows users to start the booking process for an activity by selecting options and quantities, and then displaying a calendar with available dates and slots for the chosen options. This widget is embedded as an iframe on your website, making it easy to integrate and use.

Implementation

To integrate the Checkout Widget into your website, include the following HTML snippet:

<div
    data-funbooker-widget="true"
    data-product-slug="activity-slug"
    data-utm-source='some_utm_source_exemple'
></div>

Explanation of HTML Attributes

  1. data-funbooker-widget

    • Description: This attribute initializes the widget. It signals the widget script to identify and load the checkout interface within this div element. The value must be always set to "true".

    • Required: Yes

  2. data-product-slug

    • Description: This attribute specifies the product or activity to be booked. The value should be a unique identifier (slug) that corresponds to the specific activity.

    • Example: "visite-balade-street-art-dans-le-marais-a-paris"

    • Required: Yes

  3. data-utm-source

    • Description: This attribute is used for tracking the source of the traffic. This can be useful for analytics purposes, helping you understand where your bookings are coming from.

    • Example: "some_utm_source_exemple"

    • Required: No, but recommended for tracking.

Example

Here is an example of how you might implement the widget on a page dedicated to booking a street art tour in Paris:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Book a Street Art Tour in Paris</title>
</head>
<body>
    <h1>Street Art Tour in the Marais, Paris</h1>
    <p>Discover the vibrant street art scene in the Marais district with our expert guides.</p>

    <!-- Checkout Widget -->
    <div
        data-funbooker-widget="true"
        data-product-slug="visite-balade-street-art-dans-le-marais-a-paris"
        data-utm-source='website_homepage'
    ></div>

    <!-- Include the widget script -->
    <script src="https://www.funbooker.com/assets/checkout-widget/mainV1.js"></script>
</body>
</html>

In this example:

  • The data-funbooker-widget is always set to "true".

  • The data-product-slug is set to "visite-balade-street-art-dans-le-marais-a-paris".

  • The data-utm-source is set to "website_homepage" to indicate that bookings are coming from the homepage of your website.

Loading the Widget Script

Ensure you have included the widget script provided by Funbooker in your webpage. This script is responsible for loading and rendering the widget inside the div element.

<script src="https://www.funbooker.com/assets/checkout-widget/mainV1.js"></script>

Place this script tag at the bottom of your body tag to ensure it loads after the rest of your page content.

PreviousAPI Voucher EndpointsNextHow it works

Last updated