Publishing an Experience on your website

Let's explore how to publish your experience on your website using either a Javascript code or HTML.

Iframe JavaScript

  1. When you finalise your experience in the last step "confirm" you can choose how to publish your experience 
  2. Select iFrame
  3. Define the height of your iFrame under Setup
  4. Copy the JavaScript
  5. Copy-paste the JavaScript into your Webpage / CMS
  6. Test the experience on desktop and mobile to make sure it renders properly

For an iFrame integration we always recommend to use the JavaScript code as it offers more flexibility with functionality such as height of page.

HTML iFrame

It is also possible to use standard HTML code to iFrame your experience. In this case you can simply add the URL of your experience into an HTML iFrame code.

  1. When you finalise your experience in the last step "confirm" you can choose how to publish your experience 
  2. Update the HTML iFrame code with your Experience URL: <p><iframe style='border-style: none;' src='https://YOUREXPERIENCEURL' height='750' width='100%' ></iframe></p>
  3. Insert the HTML code into your Webpage / CMS
  4. Test the experience on desktop and mobile to make sure it renders properly

In this case it is not possible to update the Height of the iFrame directly from Odicci.

Pop-Up Javascript

Odicci experiences can also be published as pop-ups in your website.

  1. When you finalise your experience in the last step "confirm" you can choose how to publish your experience 
  2. Select Pop-Up
  3. Setup your Pop-Up (pop-up on exit intent, type of pop-up, pages where it should show, ...)
  4. Copy the JavaScript
  5. Copy-paste the JavaScript into your Webpage / CMS
  6. Test the experience on desktop and mobile to make sure it renders properly

There are lots of options available for the Odicci Pop-Ups.


Using Google Tag Manager for Deployment

Odicci experiences can also be added using GTM:

  1. Create a New Custom HTML Tag in GTM
  2. Copy the below code into your tag:

<script>

(function() {

// Create the iframe element

var iframe = document.createElement("iframe");

iframe.style.borderStyle = "none";

iframe.src = "https://campaign.odicci.com/#/example";

iframe.height = "750";

iframe.width = "100%";

// Try to insert it into the first element with class "content"

var target = document.querySelector(".content");

if (target) {

target.appendChild(iframe);

} else {

// If the element doesn't exist yet, keep checking until it appears

var checkExist = setInterval(function() {

var target = document.querySelector(".content");

if (target) {

target.appendChild(iframe);

clearInterval(checkExist);

}

}, 100); // check every 100ms

}

})();

</script>

  1. Replace the iframe.src URL with your experience URL found on the confirm screen in Odicci
  2. Replace the ".content" with the div class you'd like to inject the experience within
  3. Set your GTM trigger for the page/pages you'd like to display the experience
  4. Save and preview
  5. Publish in GTM when ready

Related Articles