> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gocertify.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrate on-site

> Convert shoppers with targeted, gated rewards.

## Integrate on-site

<Tip>
  Make sure the script is implemented site-wide to access all our features.
</Tip>

Integrate Gocertify by adding the Gocertify <Tooltip tip="Our script is just 12kb and optimised for performance">script</Tooltip> to your site's `<head>` using either a tag manager (no developer needed) or manually pasting it in (basic HTML knowledge recommended). The setup takes less than 2 minutes!

## Get your script from the dashboard

<Tip>
  Need a developer to handle the integration? Use the **Need a developer?** section on the settings page to quickly invite them to your team.
</Tip>

The easiest way to get your Gocertify script is from the **Integrate on-site** settings page in your dashboard. The script snippet is pre-configured with your brand identifier - just copy and paste it directly into your site.

<Steps>
  <Step title="Navigate to the settings page">
    In your dashboard, go to **Settings** → **Integrate on-site**.

    <Frame>
      <img src="https://mintcdn.com/gocertify-db9cc6b8/3qEQD-Hp_9xH3sLF/images/dashboard/settings/integrate-settings-overview.png?fit=max&auto=format&n=3qEQD-Hp_9xH3sLF&q=85&s=e5d5769f5d40a0a4a8b408c29e753a23" alt="Integrate on-site settings page" width="2654" height="1850" data-path="images/dashboard/settings/integrate-settings-overview.png" />
    </Frame>
  </Step>

  <Step title="Copy the script">
    Click the copy icon next to the script snippet. Your brand identifier is already included, so no manual editing is required.

    <Info>
      **Installing in multiple regions?** If you have access to multiple regions, you'll see a hint card with a **"Show me"** button. Click it to open the region selector and switch to the correct region before copying the script—each region has a unique brand identifier.
    </Info>
  </Step>

  <Step title="Add to your site">
    Paste the script into your site using one of the installation methods listed in the [installation methods](#installation-methods) section below.
  </Step>
</Steps>

## Installation methods

{/* ```javascript gocertify-script
      <script>
        (function() {
          var el = document.createElement("script");
          el.setAttribute("src", "https://assets.gocertify.me/assets/gocertify.js");
          el.setAttribute("data-brand", "example-company"); //replace example-company with your company name
          el.setAttribute("defer", "true");
          document.head.appendChild(el);
        })();
      </script>
``` */}

You can use any **one** of the following methods to add the Gocertify script to your site. You only need to add the script **once** to your site. Pick your preferred method below and follow the steps.

<Info>
  **Pro tip**: Get your script with your brand identifier pre-configured from the [Integrate on-site settings page](#get-your-script-from-the-dashboard) to avoid manual configuration errors.
</Info>

<AccordionGroup>
  <Accordion icon="rectangle-terminal" title="Manually Add script to head">
    Copy and paste the Gocertify script into the `<head>` of your site. Remember to replace `example-company` with your actual company name.

    ```javascript gocertify-script theme={null}
          <script>
            (function() {
              var el = document.createElement("script");
              el.setAttribute("src", "https://assets.gocertify.me/assets/gocertify.js");
              el.setAttribute("data-brand", "example-company"); //replace example-company with your company name
              el.setAttribute("defer", "true");
              document.head.appendChild(el);
            })();
          </script>
    ```

    <Info>
      **Note**: If you cannot add the script to the `<head>` of your site you can place it in the `<body>` .
    </Info>
  </Accordion>

  <Accordion icon="shopify" title="Shopify">
    <Steps>
      <Step title="Navigate to the Shopify app">
        Navigate to our [Shopify app](https://apps.shopify.com/gocertify).
      </Step>

      <Step title="Install the app">
        Install the app by clicking `Install`.

        <Frame>
          <img src="https://mintcdn.com/gocertify-db9cc6b8/PPr5fj4e8e7ywwBC/images/integrations/ecommerce/shopify/shopify-install-screen1.png?fit=max&auto=format&n=PPr5fj4e8e7ywwBC&q=85&s=67212b16f18cb789b14038c86db0a81a" alt="Shopify install screen" width="2652" height="1838" data-path="images/integrations/ecommerce/shopify/shopify-install-screen1.png" />
        </Frame>
      </Step>

      <Step title="Connect to your brand">
        Once installed, you will see the app appear in your left side menu. Click on the app and you will be asked to connect to your Gocertify brand by clicking `Connect`.

        <Frame>
          <img src="https://mintcdn.com/gocertify-db9cc6b8/PPr5fj4e8e7ywwBC/images/integrations/ecommerce/shopify/shopify-connect-screen1.png?fit=max&auto=format&n=PPr5fj4e8e7ywwBC&q=85&s=e516c06048eaa30c03107f43406d3144" alt="Shopify connect screen" width="3044" height="2044" data-path="images/integrations/ecommerce/shopify/shopify-connect-screen1.png" />
        </Frame>
      </Step>

      <Step title="Select your brand">
        You will be presented with a list of brands you have access to. Select the brand you want to connect the app to. If you cannot see your brand, please contact your Gocertify account manager.

        <Frame>
          <img src="https://mintcdn.com/gocertify-db9cc6b8/PPr5fj4e8e7ywwBC/images/integrations/ecommerce/shopify/shopify-connect-screen2.png?fit=max&auto=format&n=PPr5fj4e8e7ywwBC&q=85&s=0048dd4be7609dfb532197c14dcac519" alt="Shopify connect screen" width="1396" height="954" data-path="images/integrations/ecommerce/shopify/shopify-connect-screen2.png" />
        </Frame>
      </Step>

      <Step title="Navigate to the embed page">
        Once successfully connected you will see a success message and a button asking you to `Enable the script`. Click this button to navigate to the embed page.

        <Frame>
          <img src="https://mintcdn.com/gocertify-db9cc6b8/PPr5fj4e8e7ywwBC/images/integrations/ecommerce/shopify/shopify-enablescript-screen1.png?fit=max&auto=format&n=PPr5fj4e8e7ywwBC&q=85&s=7fe714738f825e6a426fd16e21b665a3" alt="Shopify connect screen" width="3032" height="1926" data-path="images/integrations/ecommerce/shopify/shopify-enablescript-screen1.png" />
        </Frame>
      </Step>

      <Step title="Enable your embed script">
        Click the toggle to enable the embed script. The Gocertify head script is now enabled and added to your site.

        <Frame>
          <img src="https://mintcdn.com/gocertify-db9cc6b8/PPr5fj4e8e7ywwBC/images/integrations/ecommerce/shopify/shopify-enablescript-screen2.png?fit=max&auto=format&n=PPr5fj4e8e7ywwBC&q=85&s=79254263dfa53da5c70af1f42f27970a" alt="Shopify connect screen" width="3030" height="2044" data-path="images/integrations/ecommerce/shopify/shopify-enablescript-screen2.png" />
        </Frame>
      </Step>

      <Step title="Add on-site messaging">
        Once you have enabled the embed script, you can use Shopify Blocks to add on-site messaging to your site.

        <Frame>
          <iframe src="https://www.loom.com/embed/f0751b810299485c958d8412c872ded8?sid=c34ab8ef-9432-4dc6-a7bb-6f16f96dda90" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{ width: '100%', height: '400px' }} />
        </Frame>
      </Step>
    </Steps>
  </Accordion>

  <Accordion icon="tag" title="Google Tag Manager">
    Watch our [tutorial video](https://www.loom.com/share/c71c832b378e4e17b6aa80a6bcc284a7?sid=9604726f-f6e8-4997-bf66-9a11773773d2) or follow these steps.

    <Steps>
      <Step title="Add a new tag">
        Navigate to your [Google Tag Manager](https://tagmanager.google.com/#/home) (GTM) account and select `Add new Tag`
      </Step>

      <Step title="Pick the Custom HTML configuration">
        Within the tag configuration, select the `Custom HTML` option.
      </Step>

      <Step title="Paste in your Gocertify script">
        Copy and paste the following script into the HTML tag. Remember to replace `example-company` with your actual company name.

        ```javascript gocertify-script theme={null}
          <script>
            (function() {
              var el = document.createElement("script");
              el.setAttribute("src", "https://assets.gocertify.me/assets/gocertify.js");
              el.setAttribute("data-brand", "example-company"); //replace example-company with your company name
              el.setAttribute("defer", "true");
              document.head.appendChild(el);
            })();
          </script>
        ```
      </Step>

      <Step title="Trigger to fire on all pages">
        Within the `Triggers` options configure the tag to fire on all pages.

        <Info>
          **Note**: The script is just 12kb and well optimised so it won't slow down your site.
        </Info>
      </Step>

      <Step title="Save and Publish">
        Save your tag as `gocertify` and publish your container.
      </Step>
    </Steps>
  </Accordion>

  <Accordion icon="tag" title="Bloomreach Tag Manager">
    <Info>
      **Prerequisite**: The Bloomreach [JS SDK](https://documentation.bloomreach.com/engagement/docs/js-sdk) must be integrated into your website. The SDK retrieves active tags and executes them after the page loads.
    </Info>

    <Steps>
      <Step title="Open Tag Manager">
        In your Bloomreach Engagement project, go to **Data & Assets** → **Tag Manager**.
      </Step>

      <Step title="Create a new tag">
        Click **+ Create new**. Skip the preset selection to create a custom tag.
      </Step>

      <Step title="Add the Gocertify script">
        In the **Definition** section, paste your script into the code editor. Remember to replace `example-company` with your actual company name.

        ```javascript gocertify-script theme={null}
          <script>
            (function() {
              var el = document.createElement("script");
              el.setAttribute("src", "https://assets.gocertify.me/assets/gocertify.js");
              el.setAttribute("data-brand", "example-company"); //replace example-company with your company name
              el.setAttribute("defer", "true");
              document.head.appendChild(el);
            })();
          </script>
        ```
      </Step>

      <Step title="Configure settings">
        In the **Settings** section, set **Fire on** to fire on all pages so the script loads site-wide.

        <Info>
          **Note**: The script is just 12kb and well optimised so it won't slow down your site.
        </Info>
      </Step>

      <Step title="Save and activate">
        Save your tag as `gocertify` and activate it.
      </Step>
    </Steps>
  </Accordion>

  <Accordion icon="network-wired" title="Awin Mastertag">
    Watch our [tutorial video](https://www.loom.com/share/e13b1bc79c2545078fb46d4b78c8bb50?sid=46361597-a98e-4871-8f2d-7a24166e9c00) to see how it's done.

    <Steps>
      <Step title="Navigate to the plugin Store">
        Select `Toolbox` from your main menu and then under `Links and Tools` select `Plugin Store`.

        <Frame>
          <img src="https://mintcdn.com/gocertify-db9cc6b8/XUb6vbj2nTBva5Hn/images/other/awinFeatured.png?fit=max&auto=format&n=XUb6vbj2nTBva5Hn&q=85&s=156f2215b2d4c83719f609f422a6066e" alt="Awin gocertfiy Plugin" width="1450" height="730" data-path="images/other/awinFeatured.png" />
        </Frame>
      </Step>

      <Step title="Activate Plugin">
        Within the store search for the Gocertify plugin and click `Activate now` and confirm your choice.
      </Step>

      <Step title="View your Plugins">
        Once activated the final modal will give you the option to `View My Plugins`. Select this and you will see that the plugin is activated and the script has been deployed.
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>

<Tip>
  If you encounter the error `Refused to load the script 'https://assets.gocertify.me/assets/gocertify.js'` due to Content Security Policy violations, add this domain to your CSP whitelist to resolve the issue.
</Tip>

### Validate your installation

Once you've added the script to your site, use the built-in validation tool (found in the [Integrate on-site settings page](#get-your-script-from-the-dashboard)) to confirm it's working:

<Steps>
  <Step title="Enter your website URL">
    In the validation section, enter the URL of a page where you've installed the script.
  </Step>

  <Step title="Run validation">
    Click validate. The tool will check that the Gocertify script is present and correctly configured.

    <Frame>
      <img src="https://mintcdn.com/gocertify-db9cc6b8/f-pBA2-MNJfua5BZ/images/dashboard/settings/integrate-settings-validation.png?fit=max&auto=format&n=f-pBA2-MNJfua5BZ&q=85&s=c368a3118ec56826e70994b6a0271dd4" alt="Script validation success" width="2652" height="1864" data-path="images/dashboard/settings/integrate-settings-validation.png" />
    </Frame>
  </Step>

  <Step title="Confirm success">
    A success message confirms everything is working. If validation fails, check that the script was added to the `<head>` and that the page has been published.
  </Step>
</Steps>
