How to make CleverTap Web Popups a part of your website


#1

How to make Make CleverTap Web Popups a part of your Website : Allows the website to control the look, feel and location of the CleverTap Web Pop-up which you create in the dashboard

e.g. On flipkart.com, on the home page there is a carousal of recommendations/offers running.

The same can be implemented via CleverTap Web Popups by “Defining a Custom Rendering Listener”.
Implementation Documentation : https://developer.clevertap.com/docs/web#section--defining-a-custom-rendering-listener-
This is the only one time tech implementation required and is worth the investment. Make sure you implement support for both “Exit Intent” and “Web Popups” based on the requirements.

E.g:

Sample Website : https://shahharsh093.github.io/customrendering.html

Sample Code for the same :

   <title></title>
   <meta name="viewport" content="width=device-width, initial-scale=1"><meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
   <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
   <style type="text/css">.mySlides {display:none;}
   </style>
   <div class="w3-content w3-section" style="max-width:100%"><img class="mySlides" src="https://i.imgur.com/SmTNoQe.jpg" style="width:100%" /> <img class="mySlides" src="https://i.imgur.com/SmTNoQe.jpg" style="width:100%" /> <img class="mySlides" src="https://image3.mouthshut.com/images/Restaurant/Photo/-95593_10703.jpg" style="width:100%" /></div>
   <script>
   var myIndex = 0;
   carousel();

   function carousel() {
       var i;
       var x = document.getElementsByClassName("mySlides");
       for (i = 0; i < x.length; i++) {
          x[i].style.display = "none";
       }
       myIndex++;
       if (myIndex > x.length) {myIndex = 1}
       x[myIndex-1].style.display = "block";
       setTimeout(carousel, 2000); // Change image every 2 seconds
   }
   </script>

The look and feel is completely customisable via the CleverTap dashboard.

Please do let us know if you have any queries on the same.