Overview

Web Native Display enables organizations to tailor the content of a website for delivering contextual and personalized user experiences for their customers. Basically, web native display is the real-time individualization of a website to cater to each individual’s varying needs.

❗️

Prerequisites

1. Ensure that you have integrated CleverTap's new Web SDK.
2. Ensure that the default/fallback content is configured on your website to render in case of delayed response from CleverTap servers

Custom Key-value Pair Template

In the Custom Key-Value pair template, CleverTap sends the desired custom data configured by clients in JSON format to the client website. The developer uses this custom key-value data to personalize the web elements of the website.

Sample Key-Value Web Native Display Campaign

Once you create a Key-value pair campaign on CleverTap dashboard for your website, you need to:

1. Define rendering functions For Key-Value Pairs
2. Listen to the key-value pairs sent by CleverTap
3. Determine the topic value and render a personalized element
4. Raise Notification Viewed and Notification Clicked Events

Define Rendering Functions For Key-Value Pairs

Developers need to define functions that accept the key-value pair that you have configured as a part of your campaign. They can define their custom rendering logic based on the custom event use case. For example, if you want to render a personalized banner for a cart drop-off event, you need to define the specific rendering logic.

Below is a sample function to render a custom personalized banner on your website.

Let us assume you have the following HTML element on your page:

<div id="container">
	<div class="close">&times;</div>
  <img src="https://img.freepik.com/free-photo/young-gowoman-yellow-leather-jacket-copy-space_23-2148674153.jpg?w=2000"/>
  <div class="message">
  	Hello <span id="user-name">user</span>,
   	<p>Still thinking about the <span id="product-name">item</span> in your cart?</p>
    <p>We get it - it's fabulous.</p>
   	<p>Use SALE20 and avail 20% off</p>
    <p>What are you waiting for??</p>
  </div>
</div>

For personalizing the above HTML element with the key-value pair defined while creating the campaign, you can define a custom rendering function as shown below:

function renderCartDropOffPersonalisationCampaign(data) {
	const name = data.kv.Name;
  const product = data.kv.Cart;
  const containerEl = document.getElementById('container')
  const userNameEl = containerEl.getElementById('user-name')
  usernameEl.innerText = name
  const productNameEl = containerEl.getElementById('product-name')
  productNameEl.innerText = product 
}

Listen to the key-value pairs sent by CleverTap

The developer needs to add a listener for the event - CT_web_native_display and define a callback function that will be executed whenever the event happens.

document.addEventListener("CT_web_native_display", function(event) {
    console.log(event);
});

A sample event object would look as follows:

{
  "detail": {
    "kv": {
          "topic": "Cart drop-off",
		  "Name": "Alice", 
		  "Cart": "Roadster Jacket",
	  	},
    msgId: "1649748667_20220412",
    wzrk_pivot: "wzrk_default" 
  }
}

🚧

Note

The first key of your object will always be topic. The marketer can provide the relevant value of this key while configuring the campaign. The developer must use this value to access the right payload for that campaign.

Determine the Topic Value and Render Personalized Element.

Basis the topic value, you need to call the appropriate custom rendering logic defined in step 1.
Given below is a sample rendering logic.

document.addEventListener("CT_web_native_display", function(event) {
  const data = event.detail;
	const topic = data.kv.topic;
	switch (topic) {
		case "Cart drop-off": {
			renderCartDropOffPersonalisationCampaign(data)
			break;
   	}
  }
});

Raise Notification Viewed and Notification Clicked Event

To raise the NotificationViewed and NotificationClicked event, you can call the clevertap.renderNotificationViewed(data); and clevertap.renderNotificationClicked(data); API within the custom rendering function defined in Step 1.

Here data is the argument that your custom rendering function receives.

function renderCartDropOffPersonalisationCampaign(data) {
	const name = data.kv.Name;
  const product = data.kv.Cart;
  const containerEl = document.getElementById('container')
  const userNameEl = containerEl.getElementById('user-name')
  usernameEl.innerText = name
  const productNameEl = containerEl.getElementById('product-name')
  productNameEl.innerText = product 
  clevertap.renderNotificationViewed(data);
  containerEl.addEventListener('click', () => {
  	clevertap.renderNotificationClicked(data)
  });
}

Banner and Carousel Templates

At the time of creating a campaign, users will have to specify the Div ID of the container within which they want to render the banner. In case there is some content within the container, it will be replaced with the banner from the campaign that you have created.

📘

Default Banner

Ensure that the default/fallback banner is configured on your website to render in case of delayed response from CleverTap servers

In case you have not set the CSS height property explicitly for your container, the banner will take 100% width of the container and its height will be auto-adjusted to maintain the aspect ratio.

In case you have set the CSS height property explicitly for your container, you'll have to specify the same under the Div height input field at the time of creating a campaign on the CleverTap dashboard.

When the banner is rendered, it will appear with the specified height defined at the time of campaign creation and its width will be auto-adjusted to maintain the aspect ratio.