This page will go over how to implement the preezie widget into your webpage using Google Tag Manager.
Initial Setup:
*ensure that your container code is pasted in your page(s) before starting
Create a new tag with your desired name, we recommend ‘preezie-widgets-{pagename}’
The type of tag must be set to custom HTML, create a new initialization trigger which only initialises on page where you want your journey(s) to sit. Repeat this process for any additional pages.
...
| Code Block | ||
|---|---|---|
| ||
<script type="text/javascript" src="https://preeziecdn.azureedge.net/production/preguide.min.js"></script>
<script defer type="text/javascript">
var targetElement = document.querySelector(".INSERT_CLASS_TARGET") || document.getElementById("INSERT_ID_TARGET")
;(function () {
if (!targetElement) return
targetElement.innerHTML += '<div id="preezie-widget-div-id"></div>'
PREEZIE_GUIDE.render([
{
guideKey: "PUT YOUR OWN GUIDE KEY HERE",
version: "1.0.0",
renderTo: "preezie-widget-div-id",
},
])
})()
</script>
|
Example Image:
...
Multiple Journeys On A Page
If you want to add another journey to a page, simply add another script below your initial workflows script.
...
| Code Block | ||
|---|---|---|
| ||
<script type="text/javascript" src="https://preeziecdn.azureedge.net/production/preguide.min.js"></script>
<script defer type="text/javascript">
var targetElement = document.querySelector(".INSERT_CLASS_TARGET") || document.getElementById("INSERT_ID_TARGET")
;(function () {
if (!targetElement) return
targetElement.innerHTML += '<div id="preezie-widget-div-id"></div>'
PREEZIE_GUIDE.render([
{
guideKey: "PUT YOUR OWN GUIDE KEY HERE",
version: "1.0.0",
renderTo: "preezie-widget-div-id",
},
])
})()
</script>
<!-- New Widget -->
<script defer type="text/javascript">
var targetElement = document.querySelector(".INSERT_CLASS_TARGET") || document.getElementById("INSERT_ID_TARGET")
;(function () {
if (!targetElement) return
targetElement.innerHTML += '<div id="CHANGE ME PLEASE"></div>'
PREEZIE_GUIDE.render([
{
guideKey: "YOUR OTHER GUIDE KEY HERE",
version: "1.0.0",
renderTo: "CHANGE ME PLEASE",
},
])
})()
</script> |
Exit Intents, Popups & CTAs:
These will work exactly the same as journeys, you will just need to ensure your popups active rulings are configured correctly on the preezie portal.
You can select any class or id for the popup div to sit under.
Remember to replace any instances of
preezie-widget-div-idwithpreezie-widget-div-id-popup.