Shopify - preezie Widget Integration

Note, this guide below is being supersed by this: https://preezie.atlassian.net/wiki/spaces/PW/pages/19104240 please use this instead.

ARCHIVE - Overview

preezie works by implementing our javascript widget code snippets into your website. There are the three preezie code snippets:

  1. Head code (required)
    The Head code must be copied into the head section of your website.

  2. Workflow Widget code (required)
    The Workflow Widget code can be added to any page on your website where you would like a guided shopping journey to run.

  3. Popups code (Exit Intents, Time Delays and Calls To Action) (required)
    The Popups code allows you to run preezie Popups anywhere on your website - all controlled with URL targeting from your preezie portal!

1. Head code

In order for any preezie features to run, the Head code must be present in the <head> section of your theme.liquid file.

Please find your preezie Head code below

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

Your Head code can also be found by logging into your preezie portal and navigating to WorkflowsActionsCode Snippet.

Warning: Do not add defer or async attribute to the script tag. This will cause potential issues which can be difficult to diagnose.

Internally the script will download all necessary dependencies deferred, so the script itself does not need to be deferred.

2. Workflow Widget code

Our Widget code is copied into the <body> section of your website page where your guided shopping journey will run. The base code is always the same and each Workflow or Workflow Selector has a different guideKey.

To launch your guided shopping journey. Follow the steps below:

  1. Log into your preezie portal and navigate to Workflows OR Workflow Selectors ActionsCode Snippet.

     

  2. Copy and paste the body code snippet into the <body> of your website where you want your guided shopping journey to sit.

     

  3. Once the code is implemented and deployed your guided shopping journey will appear straight away 🎉

Warning: the code snippet should be used as is and must not reside in another Javascript function or external JS file. Otherwise, preezie will not be able to provide support should an issue occur.

3. Popups code

The Popups code allows you to manage your preezie Exit Intents, Calls to Action and Time Delay Popups all from your preezie portal.

To implement preezie Popups, follow the steps below:

  1. Log into your preezie portal and navigate to Exit intent / Pop Up / Cta ActionsCode Snippet.

     

  2. Copy and paste the body code snippet directly before the closing </body> tag of your theme.liquid file:

     

  3. Once the Popups code is implemented and deployed, you will be able to target any page on your site with a preezie Exit Intent, Call to Action, or Time Delay popup.