Microstore

On this page we will look at the microstore concept and how to use it.

What is a microstore?

The Microstore concept was made for those who want to easily sell products with minimal setup. For example if someone wanted to sell Go Fjords’ products, Go Fjords would add a sales channel for the Microstore customer. Then the customer would be able to setup a minimal store with just a few of the widgets and sell the products from Go Fjords. In this scenario the Microstore customer would not be a direct user of Blend, but would tag along with another customer’s access.

How to use a microstore

To use a microstore you need to have a tenant and sales channel setup for the microstore. The tenant and sales channel is set up by the Blend customer and then provided to the microstore customer. There are four widgets needed to use the Microstore:

blend-search-bar
blend-search-results
blend-product-info
blend-checkout

A full example of a microstore would then look like this:

<html>
  <head>
    <!-- add styling -->
    <style>
      :root {
        /* Brand colors */
        --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>
    <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',
        analytics: [],
      };
    </script>
  </head>
  <body>
    <!-- Add widgets for Microstore -->
    <blend-search-bar></blend-search-bar>
    <blend-search-results></blend-search-results>
    <blend-product-info modal="true"></blend-product-info>
    <blend-checkout></blend-checkout>
  </body>
</html>

You can place the widgets anywhere on the page and they will work as expected. Because the search bar and search results are separate widgets you can easily have content in between them. When a traveler clicks on a product in the search results a modal will open with the product info. This modal also contains a date picker, ticket selector, and a checkout button to begin the checkout process.