Skip to content
Bilberry Widget Docs

Basic setup

Basic Setup of the Widgets

Follow this guide to integrate Bilberry widgets into your website and connect them to your Bilberry instance.

Step 1: Base Configuration

Add the following base configuration script to the <head> section of your website. Replace the placeholder values (<<...>>) with the required details for your Bilberry instance:

<script type="text/javascript">
    window.BilberryWidgetsGlobal = window.BilberryWidgetsGlobal || {};
    window.BilberryWidgetsGlobal.bilberryAccessToken = '<<YOUR BILBERRY CLIENT API ACCESS TOKEN>>';
    window.BilberryWidgetsGlobal.termsUrl = '<<URL TO YOUR TERMS AND CONDITIONS>>';
    window.BilberryWidgetsGlobal.privacyUrl = '<<URL TO YOUR PRIVACY POLICY>>';
    window.BilberryWidgetsGlobal.bilberryBaseApiUrl =
        'https://<<YOUR BILBERRY INSTANCE NAME>>.bilberry.app';
    window.BilberryWidgetsGlobal.language = document.documentElement.lang;
</script>

Notes:

  1. Placement: Add this script as early as possible within the <head> section to ensure the widgets load with the correct configuration.

  2. Required Fields:

    • bilberryAccessToken: Your API access token. This is mandatory to connect the widgets to your Bilberry instance.
    • termsUrl: The URL to your website’s Terms and Conditions.
    • privacyUrl: The URL to your website’s Privacy Policy.
    • bilberryBaseApiUrl: The API endpoint for your Bilberry instance.
    • language: The language setting derived from the document’s language attribute (document.documentElement.lang).

Step 2: Adding the Bilberry Widgets Scripts

Include the main Bilberry Widgets scripts in the <head> section, directly below the base configuration script:

<script type="module" src="https://bilberry-widgets.b-cdn.net/v4/vendor.js"></script>
<script type="module" src="https://bilberry-widgets.b-cdn.net/v4/main.js"></script>

Script Loading Order:

  • vendor.js must be loaded first.
  • main.js must be loaded second, after vendor.js.
  • Any additional scripts (e.g., timeslots.js or upgradeV3toV4.js) must be loaded last, as they depend on vendor.js and main.js.

Best Practices:

  • Version Management: Always use the latest version of the scripts to benefit from updates and bug fixes.
  • Order of Scripts: Ensure the scripts are loaded in the correct order to prevent initialization errors.

Step 3: Additional Scripts for Specific Features

Timeslot Management

If your website uses membership or timeslots features, include the timeslots script:

<script type="module" src="https://bilberry-widgets.b-cdn.net/v4/timeslots.js"></script>

Compatibility for Upgrading from v3 to v4

If you are upgrading from version 3 to version 4 and using any of the following widgets:

  • bilberry-accommodation-booking
  • bilberry-timeslots-booking-widget
  • bilberry-product-cards

Add the compatibility script:

<script type="module" src="https://bilberry-widgets.b-cdn.net/v4/compat/upgradeV3toV4.js"></script>

Summary of Script Inclusions

Standard Setup

For a basic setup, your <head> section should look like this:

<head>
    <!-- Base Configuration -->
    <script type="text/javascript">
        window.BilberryWidgetsGlobal = window.BilberryWidgetsGlobal || {};
        window.BilberryWidgetsGlobal.bilberryAccessToken =
            '<<YOUR BILBERRY CLIENT API ACCESS TOKEN>>';
        window.BilberryWidgetsGlobal.termsUrl = '<<URL TO YOUR TERMS AND CONDITIONS>>';
        window.BilberryWidgetsGlobal.privacyUrl = '<<URL TO YOUR PRIVACY POLICY>>';
        window.BilberryWidgetsGlobal.bilberryBaseApiUrl =
            'https://<<YOUR BILBERRY INSTANCE NAME>>.bilberry.app';
        window.BilberryWidgetsGlobal.language = document.documentElement.lang;
    </script>


    <!-- Bilberry Widgets Scripts -->
    <script type="module" src="https://bilberry-widgets.b-cdn.net/v4/vendor.js"></script>
    <script type="module" src="https://bilberry-widgets.b-cdn.net/v4/main.js"></script>


    <!-- Additional Features (if applicable) -->
    <script type="module" src="https://bilberry-widgets.b-cdn.net/v4/timeslots.js"></script>
    <script
        type="module"
        src="https://bilberry-widgets.b-cdn.net/v4/compat/upgradeV3toV4.js"
    ></script>
</head>

Key Considerations

  1. Script Order: Always include vendor.js first, followed by main.js, and then any additional feature-specific scripts.
  2. Version Updates: Monitor for updates to the Bilberry Widgets scripts to ensure compatibility and access to new features.
  3. Testing: After setup, thoroughly test your widgets to verify that they connect correctly to your Bilberry instance and load as expected.

By following these steps, you’ll ensure a seamless integration of Bilberry widgets on your website.