Updated: 24/11/2023
| Table of Contents | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
Overview
preezie works by adding our javascript code onto your website. This is typically one line of code that you copy from within the CMS:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script type="text/javascript" src="https://widget-cdn.preezie.com/production/preguide.min.js" data-widgetid="{your guide key here}"></script> |
Depending on how preezie is shown, there are two ways to integrate:
Embedded on a page
You add the code into the <body> section of the page where the widget should be loaded. Alternatively you can use our data-targets attribute to position it (see guide below).
CTA/Pop up
Add the code to the <head> or <body> section of your pages. This allows you to all the code to all pages of your site and use the CMS to specifiy how and where the widget is shown.
| Info |
|---|
Note, these method supersedes the previous head code + snippet code, but that guide can still be found here. |
Integrations supported
The below method covers most of the website integration types.
However for:
Google Tag Manager users should reference this guide: Google Tag Manager - preezie Widget via GTM
Single Page Applications/React frameworks should reference this guide: SPA framework integration
Shopify users can use the below method and use your CMS or code tools as usual, e.g. theme.liquid
Adding journey widget code
Log into your preezie CMS and navigate to Journeys OR Journey Connectors → Actions → Code Snippet
This will open up a window containing the specific code for that specific Journey/Connector.
In here there are two versions:
This can be pasted directly into your page HTML where you want to load the widget:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script type="text/javascript" src="https://widget-cdn.preezie.com/production/preguide.min.js" data-widgetid="{your guide key here}"></script> |
Note, do not add defer or async attribute to the script tag. This will cause potential issues which can be difficult to diagnose. The script will already defer all necessary dependencies, so this isn’t needed.
Alternatively, use the data-targets version to position it on the page via a css class:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script type="text/javascript" src="https://widget-cdn.preezie.com/production/preguide.min.js" data-widgetid="{your guide key here}" data-targets="{your css class}" data-isafter="true"></script> |
data-targetsadd a css class from the HTML of your page to specifiy where you want the widget to load after. Just add the exact text of the css class, for example,I can see in the head section of my page has a css class of
content-containerthis is where I want to load the widget after
I copy that text and place into my preezie code snippet:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script type="text/javascript" src="https://widget-cdn.preezie.com/production/preguide.min.js" data-widgetid="123456345-9fcb-4bef-9dd9-08dbdb451953" data-targets="content-container" data-isafter="true"></script> |
data-isafterif set to true so the widget will load after my class, if this is false it will load before
This loads the widget in this position on the page:
This code can be loaded anywhere within your HTML as it waits for DOMContentLoaded to intiate.
| Info |
|---|
For those using Single Page Apps/React check out these guides instead. |
✔️ Things to look for
If your code is not loading the widget, check for:
Typos in your code, any additional ' or “ could break the code
Check the guide keys are identical to those from the platform
If you’re using data-targets check the code works without data-targets first to eliminate this as an issue
You cannot load more than one embedded widget on a single page, if you want to load popups and embed see the guide below
A good place to check is the Developer Console of your browser, any preezie related errors will tell you something isn’t :
Adding journey pop up code
The Popups code allows you to manage your Slide out, Exit Intent, Call to Action (CTA) and time delayed popups all via the CMS controls.
Log into your preezie CMS and navigate to Popups → Actions → Code Snippet
If you don’t have any use the Create or Import buttons in the top right.
This will give you a code snippet that can be loaded anywhere within your HTML, ideally this is placed in the <head> sections as the earlier it can load the better:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script type="text/javascript" src="https://widget-cdn.preezie.com/production/preguide.min.js" data-widgetid="{your guide key here}"></script> |
We recommende loading this single code snippet on all pages, as it can be used for multiple trigger types of multiple journeys. All of these are controlled in the settings, for example the Rule feature:
So if I loaded this code snippet on all pages of my website, I can then launch a:
Slide out on my category pages > urlContains: /category
Time delayed popup on the home page > urlMatch: https://www.mybeautystore.com.au/
Each of these items can reference different Journeys or Journey Connectors in their settings as above.
| Info |
|---|
Note, there is a limit of 50 items that can reference the same single code snippet. |
For more info on these check out: Managing preezie triggers
Loading embedded and pop up code on the same page
If you want to load two types of journey on the same page you can use the single code snippet to chain multiple guide keys.
To do this, copy the code snippet from your Journey/Connector then paste in the Popup guide key (from the code snippet of that item) that you also want to load, separate by a comma:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script type="text/javascript" src="https://widget-cdn.preezie.com/production/preguide.min.js" data-widgetid="{your journey guide key here},{your popup guide key here}"></script> |
It would look something like this:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script type="text/javascript" src="https://widget-cdn.preezie.com/production/preguide.min.js" data-widgetid="bdd38fb6-b9e1-403c-7cdf-1234567,EPO-faf89df0-7cc6-442c-e02f-1234567"></script> |
If you’re using the data-targets attribute then just reference the same css class twice but comma separated - this is required as thedata-targets attribute needs a place to load both guidekeys,
e.g. data-targets="content-container,content-container"
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script type="text/javascript" src="https://widget-cdn.preezie.com/production/preguide.min.js" data-widgetid="bdd38fb6-b9e1-403c-7cdf-1234567,EPO-faf89df0-7cc6-442c-e02f-1234567" data-targets="content-container,content-container" data-isafter="true"></script> |
Coming soon: multiple code snippets on the same page!