Widgets Intro

Blend Widgets is a set of web components for embedding booking functionality into your website. They are self-contained and designed to be used on any website regardless of the framework or technology used. The widgets are built on top of the Blend Booking API and can be composed to create a full booking experience.

Getting Started

Blend Widgets is a hosted JavaScript library you can include on your website. You need to include the following script and style tags in your website to get started:

<head>
  <!-- rest of head omitted -->
  <link rel="stylesheet" href="https://widgets.blendbooking.com/assets/index.css" />
  <script>
    window.blendConfig = {
      tenantId: 'xxxxxxxx-XXXX-XXXX-XXXX-xxxxxxxxxxxx',
      salesChannelId: 1,
      termsConditionsUrl: 'https://example.com/legal/terms-and-conditions',
      privacyPolicyUrl: 'https://example.com/legal/privacy-policy',
      logoUrl: 'https://example.com/logo.svg',
    };
  </script>
  <body>
    <!-- rest of body content omitted -->
    <script src="https://widgets.blendbooking.com/assets/index.js" async type="module"></script>
  </body>
</head>

Using this snippet will load the latest version of the Blend Widgets library. The async attribute causes the browser to execute the script after your page HTML finishes loading and the web-component tags are ready. It is recommended to add the <script src="https://widgets.blendbooking.com/assets/index.js" async type="module"></script> to the end of the body tag if possible.

The configurations has to be added in the <head> section of your website alongside the two other snippets. They are used to fetch the correct products and configurations you have setup in the Administration Panel.

Customizing styles

The widgets come with a default style that you can use, but you will likely want to customize the look and feel to match your website. The widgets use CSS Custom Properties to allow you to customize the design. You can override the default values by setting CSS Custom Properties in a style tag like this:

<style>
  :root {
    --bw-color-brand1-lightest: #ffe6e6;
    --bw-color-brand1-lighter: #feb4b4;
    --bw-color-brand1-key: #fd8383;
    --bw-color-brand1-darker: #fc4f4f;

    --bw-color-brand2-lightest: #eae6ff;
    --bw-color-brand2-lighter: #5635fd;
    --bw-color-brand2-key: #15017c;
    --bw-color-brand2-darker: #090132;
  }
</style>

The style tag described above will generate widgets that match your theme while still being consistent across widgets.

Blend widgets operate using centralized state. The state of the widgets is stored in a single place and is shared between all widgets on the page. This allows you to use multiple widgets on the same page and have them interact with each other. Some state is synced to local or session storage to allow the traveler to continue where they left off if they refresh or return to a page. Some state is also synced as query parameters to allow you to link to a specific state of the widgets. This typically include search and filter state and whether to show a certain widget or not.

Example setup

In the <head> of the CMS you are using you should add the main config and styling.

<head>
  <!-- add styling -->
  <style>
    :root {
      /* This will be deprecated in the next version */
      --bw-primary: #15017c !important;
      --bw-primary-accent: #fea8a8 !important;
      --bw-primary-contrast: white !important;

      /* You should therefore also add these */
      --bw-color-brand1-lightest: #ffe6e6;
      --bw-color-brand1-lighter: #feb4b4;
      --bw-color-brand1-key: #fd8383;
      --bw-color-brand1-darker: #fc4f4f;

      --bw-color-brand2-lightest: #eae6ff;
      --bw-color-brand2-lighter: #5635fd;
      --bw-color-brand2-key: #15017c;
      --bw-color-brand2-darker: #090132;
    }
  </style>
  <!-- Add blend scripts -->
  <link rel="stylesheet" href="https://widgets.blendbooking.com/assets/index.css" />
  <script src="https://widgets.blendbooking.com/assets/index.js" async type="module"></script>

  <!-- Configurations -->
  <script>
    window.blendConfig = {
      tenantId: 'xxxxxxxx-XXXX-XXXX-XXXX-xxxxxxxxxxxx',
      salesChannelId: 1,
      termsConditionsUrl: 'https://example.com/legal/terms-and-conditions',
      privacyPolicyUrl: 'https://example.com/legal/privacy-policy',
      logoUrl: 'https://example.com/logo.svg',
    };
  </script>
</head>

Also make sure that the checkout page is on every page a product is sold. It has to be as a direct child of the body element. Most CMS lets you do this in a global setting.

<blend-checkout></blend-checkout>

Quick embed

The Blend App provides a quick embed feature that allows you to copy a product’s embed code and paste it into your website.

Login to the Blend App and find the product you want to sell – either a package or an activity.
Click “Actions”.
Click “Widget” and see that a dialog is opened.
Click “Copy snippet” to copy the embed code.
Paste it into your website to sell that product there.

The embed code will look something like this (remember to replace product-id and sales-channel-id with the correct ids):