Add Bilberry Widgets to Agents Website

This step-by-step guide is for when Suppliers (Bilberry owners) wants to collaborate with an Agent by selling their products on the Agents web site.

Step 1: Register the Agent

Find a full guide on this step here.

Step 2: Approve the Agents Website Domain (CORS)

Cross-Origin Resource Sharing (CORS) controls which domains are allowed to integrate and use our widgets securely. This ensures that our widgets function seamlessly only on pre-approved websites, protecting against unauthorized requests.

Navigate to Widgets in the left side menu.
Click Widget settings.
Click the Token tab.
Type or paste the Agents website domain into the Add domain field.
Click Add.

Step 3: Copy the Agents Referral ID

Navigate to Customer in the left side menu.
Click Agents.
Click the agent who will resell the Suppliers products.
Find the Agent Referral ID in the bottom agent details. In this case it is Xr1bMmWPRx.

Copy the ID.
Add the Referral ID to the configuration code within a referral code line:
CODE
```
 window.BilberryWidgetsGlobal.referralCode = 'Xr1bMmWPRx';
```

Step 4: Give Complete Configuration Code to the Agent

The complete code consists of:

Pre-filled Configuration Code with the referral code line added.
Customizable widget Theme Code which will ensure the widgets are in the clients brand colors.
Widget Code which will be linking to the products the agent is authorized to sell/get commission on.

💡Example

Configuration Code:

CODE

<script type="text/javascript">
    window.BilberryWidgetsGlobal = window.BilberryWidgetsGlobal || {};
    window.BilberryWidgetsGlobal.bilberryAccessToken = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIzIiwianRpIjoiMGRjMjM1NTE0ZTQ3MmNjZDJhY2UwNDcxNmI3ODFlMzAyYjY0NGI0YTZhZTE1YWJkMDQzZDUwYTJhOWU0NmE1YjI3MjUwNjJkYWYyZTFjZGQiLCJpYXQiOjE3NDExNzc4NzEsIm5iZiI6MTc0MTE3Nzg3MSwiZXhwIjo0ODY1MzE1NDcxLCJzdWIiOiIiLCJzY29wZXMiOltdfQ.Ej7wBCBIfuacCPSDvRB0zskehXbs8lw9sP9ORV6y8Gv0Qfk_2-oX0pz4_tPFV3KCC7enD_hbiNheGvFxGHmgQl6cQflPbB7Sf-eLG92HxBp3Oh-zxrMne9eFjJrvNZs-ulyxGpTqGQQjD6dJCaa2YdMtgHJlPEtpbJbBN0HYxNUfL4KybFRmBpMy2-gJYTHbNtxbPrL4nQo9C4hT-PWyUCNjHL03VfOuMAngINRjoK-v-6X_rH8rMIHLOUpx7wfqU-9BFKd0d_dg7Fa0jw-T5NAO82TceGrO3WN7LqL5gRdUyqmdpEyuxKbguEIHykxxLs7frzoloPm-fZM7B9vLZhxJVYt1vOMqijW8zJ4bNx-G_xrPhKQE8ct1EmjPUvHrUgsrLgTE6vLFZxL3H7nghQRKtB3hEkBAZ0UaPVOS0U5MU2Twyb5cxMtURSQ-63D4b9QL2otgJVUivWjDD9t7AT9QQFngbzBSq8SLOinNoAYJHNSUsBAyqVpLbu3EXSPE4G0IuTVd7LF3wmE1fCZBhdNb8xxYtlpB35LOLzclnIKNSoRCEBG14yTPtlT0qy4-FcMGAnDw-4dIzXo7_C77cB5z5_WxZbryzJ2euzhVL0eyQbF17LzsHevceYHHY_JLkQDU2o7_o1kwgq3q2nU8uHiDY9NJ2mWyv_xWDIZrJvI';
    window.BilberryWidgetsGlobal.termsUrl = 'https://zenith-adventures.com/terms';
    window.BilberryWidgetsGlobal.privacyUrl = 'https://zenith-adventures.com/policy';
    window.BilberryWidgetsGlobal.bilberryBaseApiUrl =
        'https://zenith.bilberry.app';
    window.BilberryWidgetsGlobal.language = document.documentElement.lang;
    window.BilberryWidgetsGlobal.language = 'en';
    window.BilberryWidgetsGlobal.enableGiftcards = true;
    window.BilberryWidgetsGlobal.enableExtras = true;
    window.BilberryWidgetsGlobal.quickCheckout = true;
    window.BilberryWidgetsGlobal.skipBasketOnBook = true;
    window.BilberryWidgetsGlobal.referralCode = 'Xr1bMmwPRx';    
</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>

Customization Code:

CODE

<script type="text/javascript">
    window.BilberryWidgetsGlobal = window.BilberryWidgetsGlobal || {};
    window.BilberryWidgetsGlobal.bilberryAccessToken = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIzIiwianRpIjoiMGRjMjM1NTE0ZTQ3MmNjZDJhY2UwNDcxNmI3ODFlMzAyYjY0NGI0YTZhZTE1YWJkMDQzZDUwYTJhOWU0NmE1YjI3MjUwNjJkYWYyZTFjZGQiLCJpYXQiOjE3NDExNzc4NzEsIm5iZiI6MTc0MTE3Nzg3MSwiZXhwIjo0ODY1MzE1NDcxLCJzdWIiOiIiLCJzY29wZXMiOltdfQ.Ej7wBCBIfuacCPSDvRB0zskehXbs8lw9sP9ORV6y8Gv0Qfk_2-oX0pz4_tPFV3KCC7enD_hbiNheGvFxGHmgQl6cQflPbB7Sf-eLG92HxBp3Oh-zxrMne9eFjJrvNZs-ulyxGpTqGQQjD6dJCaa2YdMtgHJlPEtpbJbBN0HYxNUfL4KybFRmBpMy2-gJYTHbNtxbPrL4nQo9C4hT-PWyUCNjHL03VfOuMAngINRjoK-v-6X_rH8rMIHLOUpx7wfqU-9BFKd0d_dg7Fa0jw-T5NAO82TceGrO3WN7LqL5gRdUyqmdpEyuxKbguEIHykxxLs7frzoloPm-fZM7B9vLZhxJVYt1vOMqijW8zJ4bNx-G_xrPhKQE8ct1EmjPUvHrUgsrLgTE6vLFZxL3H7nghQRKtB3hEkBAZ0UaPVOS0U5MU2Twyb5cxMtURSQ-63D4b9QL2otgJVUivWjDD9t7AT9QQFngbzBSq8SLOinNoAYJHNSUsBAyqVpLbu3EXSPE4G0IuTVd7LF3wmE1fCZBhdNb8xxYtlpB35LOLzclnIKNSoRCEBG14yTPtlT0qy4-FcMGAnDw-4dIzXo7_C77cB5z5_WxZbryzJ2euzhVL0eyQbF17LzsHevceYHHY_JLkQDU2o7_o1kwgq3q2nU8uHiDY9NJ2mWyv_xWDIZrJvI';
    window.BilberryWidgetsGlobal.termsUrl = '<<URL TO YOUR TERMS AND CONDITIONS>>';
    window.BilberryWidgetsGlobal.privacyUrl = '<<URL TO YOUR PRIVACY POLICY>>';
    window.BilberryWidgetsGlobal.bilberryBaseApiUrl =
        'https://<<NAME OF YOUR BILBERRY INSTANCE>>.bilberry.app';
    window.BilberryWidgetsGlobal.language = document.documentElement.lang;
</script>

<script>
    window.BilberryCustomTheme = {
        primaryColor: '#ff0000',
        primaryColorContrast: '#ffffff',
        secondaryColor: '#00ff00',
        secondaryColorContrast: '#000000',
        checkoutHeaderColor: '#222222',
        checkoutHeaderColorContrast: '#ffffff',
        checkoutHeaderPrimaryColor: '#ff0000',
        lightestGrey: '#f5f5f5',
        fontFamily: 'Arial, sans-serif',
        bodyFont: 'Arial, sans-serif',
        h1Font: 'Arial, sans-serif',
        h2Font: 'Arial, sans-serif',
        h3Font: 'Arial, sans-serif',
        h4Font: 'Arial, sans-serif',
        h5Font: 'Arial, sans-serif',
        h6Font: 'Arial, sans-serif',
        bookingWidgetColor: '#ffffff',
        bookingWidgetPrimaryColor: '#ff0000',
        bookingWidgetInputColor: '#f5f5f5',
        bookingWidgetInputTextColor: '#333333',
        iconUrl: 'https://example.com/logo.png',
        fontSize: 14,
    };
</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>

Widget Code:

CODE

<bilberry-product-list product-catalog-ids="3,4,5,7,10"></bilberry-product-list>

Step 5: Agent Inserts the Configuration Code to their Website System

The Agent adds the codes to their website in the same way as describes here.

The Agent should add the configuration code to the page(s) where the widgets are going to be inserted, and not to the global header!

If it is added to the global header it can interrupt and make other widgets challenging to add.