Usage examples for Custom Callback in Web Pop-ups


#1

Hey,

This is regarding this section of Web Pop-ups documentation https://docs.clevertap.com/docs/web-pop-ups#section-define-a-custom-callback

As it’s mentioned there:

Using the following custom callback functions, you will be able to control the look, feel, and location of your web pop-up.

We’re particularly interested in handing the location for our web pop-up, with custom templates.
Since a web-popup comes floating by default which hides the navigation. We would want it to be just on top of our nav.

Is it possible for a website to add like a slot maybe for ex:

<div id="clevertap__banner__goes_here"></div>

& insert that custom template manually just in this slot rather than a fixed styled top/bottom sticky container which clevertap web-popups comes with by default.

I think Custom Callbacks can solve this but not sure how to use this with custom defined templates in campaigns. An example for the same would really help.

Thank you


#2

I did some trial & error against my custom template for campaign with this notificationCallback:

I tried putting in the sample code provided to see what is received in the message

clevertap.notificationCallback = function(msg){
      console.log(msg);
};

& I received this kind of response there.

{
  msgContent: {
    html: '<html>My full custom template html code defined in the campaign here</html>',
    templateType: "box",
    type: 1
  },
  msgId: "1556193686_20190425"
}

So at this point I have access to that custom template in message.msgContent.html property.

An interesting thing about this is, if we define a notificationCallback clevertap skips creating the iframe by itself & just calls this callback. So the control of rendering it anywhere is in the our hand.

I think:

  1. The documentation can be improved for when using this callback with custom template & what message response to expect
  2. The behaviour that clevertap will not automatically inject the web pop-up when subscribing to this caller can be explicitly mentioned.