preezie Widget Integration

Owned by Danny Wang
Last updated: Jan 10, 2024 by Graham Ralls (Unlicensed)
5 min read

Updated: 24/11/2023

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:

<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.

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:

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:

  1. This can be pasted directly into your page HTML where you want to load the widget:

<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.

  1. Alternatively, use the data-targets version to position it on the page via a css class:

<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-targets add 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-container this is where I want to load the widget after

    • I copy that text and place into my preezie code snippet:

  • data-isafter if 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.

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:

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.

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:

It would look something like this:

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"