Widget Integration Guide

Overview

The preezie system works by implementing our javascript widget code snippet into your website.

1. Our head code (required)

This must be copied into the head section of your website.

2. Workflow widget code (required)

This is the actual widget code and is copied into the specific location where the workflow will run. Each workflow has a different guideKey, hence requires a different code.

3. Popups code (Exit Intents, Time Delays and Calls To Action) (required)

This allows us to run our exit intents, CTAs and popups site wide.

4. Personalisation blurb (optional feature)

This is an additional feature and requires both a new head code and a body code copied into the product page only.

1. Head code

This must be copied into the head section of theme.liquid.

<script type="text/javascript" src="https://preeziecdn.azureedge.net/production/preguide.min.js"></script>

2. Workflow widget code

This is the widget code and is copied into the specific location where the workflow will run. Each workflow has a different guideKey.

To get your Workflow widget codes / guideKeys please ask your preezie account manager or login to your portal and follow the below:

Workflows/Workflow Selectors > Actions Dropdown > Code Snippet

Copy and paste our code snippet into the body of your website where you want the workflow to sit.

<div id="preezie-widget-div-id"></div>
<script type="text/javascript">
    PREEZIE_GUIDE.render([
    {
       guideKey: 'your guideKey is here',
       version: '1.0.0',
       renderTo: 'preezie-widget-div-id'
    }
   ]);
</script>

You are free to put a DIV element with preezie-widget-div-id ID anywhere you want on your website.

Once the code is implemented and deployed your widget will be visible as per the below:

3. Popups

This allows us to run our exit intents, CTAs and time delay popups sitewide.

To get your Exit Intent, Popup and CTA code please ask your preezie account manager or login to your portal and follow the below:

Exit Intent / Popup / CTA > Actions Dropdown > Code Snippet

Copy and paste the code that looks like the below only with your guideKey into the end body section of theme.liqud:

<div id="preezie-widget-div-id-popup"></div>
<script type="text/javascript">
    PREEZIE_GUIDE.render([
    {
         guideKey: 'your guideKey is here',
         version: '1.0.0',
         renderTo: 'preezie-widget-div-id-popup'
    }
    ]);
</script>

Once the code is implemented and deployed preezie will be able to target any page on your site with Exit Intents, Calls to Action and Time Delay popups, see below example:

4. Personalisation blurb

This is an additional feature and requires both a new head code and body code to be added to your site.

To get your personalisation widget code please ask your preezie account manager or login to your portal and follow the below:

Product Score Widgets > Actions Dropdown > Code Snippet

There will be a head and a body code:

Copy and paste the code that looks like the below into your head section of theme.liquid:

<script type="text/javascript" src="https://preeziestaticcontent.blob.core.windows.net/productscore/preezieScoreInit.js"></script>

Copy and paste the code that looks like the below into the body code in product.template.liquid. Please ensure to update the red part below with your blurbKey:

<div id="preezie-product-blurb"></div>
<script type="text/javascript">
    PREEZIE_PRODUCT_SCORE.render([
    {
        blurbKey: 'blurbkey',
        renderTo: 'preezie-product-blurb'
    }
    ]);
</script>