Overview

Advanced Personalization in CleverTap lets you customize and personalize your website content dynamically based on user attributes, behaviors, and events. It includes powerful tools like the Visual Editor, helping you deliver relevant, real-time experiences with minimal development effort.

Visual Editor

The Visual Editor template empowers marketers to tailor specific elements on their website, enhancing the user experience for their target audience. This feature lets marketers personalize various content types, such as text or images, using custom HTML or JSON. For instance, marketers can modify the textual content to better resonate with their audience or adjust image content to be more visually appealing and relevant, all through a user-friendly interface and zero development effort.

📘

Note

• The Visual Editor feature is currently under Private Beta.
• CleverTap offers Visual Editor as a paid add-on. Contact your customer success manager to enable this feature for your account.

Prerequisites

Before you start using the Visual Editor, ensure the following prerequisites are met:

• Web SDK v1.13.1 and above support the Visual Editor. To check your Web SDK version, use the clevertap.getSDKVersion method.
• Ensure that the Content Security Policy (CSP) value for frame-ancestors contains self. Without this configuration, the Visual Editor will not work.

Access Visual Editor

To get started, from the What section in the Web Native Display campaign builder, select your message type and click Go to Editor:

1. Go to Advanced Personalization and select Visual Editor.

2. Enter the webpage URL you want to personalize and click Continue. The web page loads within the editor in a new tab.

3. After the website loads in the editor, hover over the elements to highlight them. Click any element to open the inline editor menu to edit the specific element. The dropdown menu appears with the following options:
   1. Edit Element
   2. Edit HTML
   3. Hide
   4. Insert Element
   5. Add JSON
   6. Track Clicks

Edit Element

The edit element feature allows you to modify various aspects of the element, such as color, margin, font, text style, etc.

Visual Editor supports user-level personalization using profile and event properties. Click the {{ }} icon in the editor to use liquid scripting.

Edit HTML

You can change the Editor by selecting Edit HTML from the dropdown. The HTML editor allows you to modify the selected element's HTML according to your use case.

Hide

The Hide option allows you to hide a particular element. You can hide it for desktop, mobile, all devices, or none.

Insert Element

This feature allows you to insert a new element to your webpage. You can configure its position and margin or duplicate an existing element.

Add JSON

You can change the Editor by selecting Add JSON in the dropdown. The JSON editor allows you to define custom behavior or personalization logic.

Track Clicks

The Click Tracking feature allows element-wise tracking. Click Track Clicks, add a name, and click Save to start tracking. This name will be added as a value of the wzrk_c2a property in the Notification Clicked event. You can view the Click Tracking data under Dashboard > Analytics > Events. For more information, refer to Events.

4. You can preview and edit your website as it appears on desktop and mobile devices using the Device Toggle.

5. You use the dropdown menu to adjust screen sizes and test responsiveness.

6. Toggle the Browse mode to make the webpage interactive inside the editor.

7. You can click Changelog to view a summary of all changes made during the session. Clicking on each changelog automatically highlights the corresponding changed element. You can long press the view button to compare the original version with your latest changes. Click the delete button to delete a specific change or click Clear All to delete all changes.

📘

Note

Deleted changes cannot be restored.

8. Click the Preview button at the top right corner to preview the HTML changes in a new tab.
9. Click Save to apply your changes.