Getting Started

Shopbox App Implementation

There are different methods to implement the Shopbox application. The scripts differ depending if you are implementing via Google Tag Manager or directly into the header of the website.

# Prerequisites

• A unique client id (CID) provided to you by the Shopbox team or generate through the customer portal interface.
• Access to the header of the website you wish to implement on, or access to the Google Tag Manager account associated with the website.

# Option 1 - Inserting Script Via Google Tag Manager (GTM)

# Step 1:

Login in to your GTM account.

# Step 2:

In your workspace home interface select Add a new tag. In the Tag Configuration section choose the Custom HTML option.

# Step 3:

Now in the Tag Configuration section there should be an area were you can copy and paste the below script into, replacing UNIQUE_CLIENT_ID with your CID.

<script>
  (function () {
    var sbid = "UNIQUE_CLIENT_ID";
    var t = document.createElement("shopbox-app-v2"),
      s = document.createElement("script");
    t.setAttribute("cid", sbid);  s.type = "text/javascript";
    s.async = !0; s.src = "https://widget.shopbox.ai/js/app.js";
    document.getElementsByTagName("body")[0].append(t); document.getElementsByTagName("head")[0].append(s);
  })();
</script>

# Step 4:

Still in the Tag Configuration section, under Advanced Settings. For Tag firing options, change this to Once per page

# Step 5:

In the Triggering section select the All Pages option.

# Option 2 - Inserting Script Directly Into the Header of Your Website

Copy and paste the below script into the header of you wesbite across all pages, replacing UNIQUE_CLIENT_ID with your CID.

<script>
  document.addEventListener("DOMContentLoaded", () => {
    var sbid = "UNIQUE_CLIENT_ID";
    var t = document.createElement("shopbox-app-v2"),
      s = document.createElement("script");
    t.setAttribute("cid", sbid);
    s.type = "text/javascript";
    s.async = !0; s.src = "https://widget.shopbox.ai/js/app.js";
    document.getElementsByTagName("body")[0].append(t); document.getElementsByTagName("head")[0].append(s);
  });
</script>

# Testing if the Script is Firing Correctly

If installed correctly the shopbox elements should be inserting into your website on every page load. To check this, open the developer console of you web browser and search for shopbox in the element section.

Alternatively, you can check the network tab and make sure the script sbmain.js is firing.