Web SDK Release 1.11.5

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Change Log
 All notable changes to this project will be documented in this file.
 
+## [1.11.5] 30th Oct, 2024
+- Added support for personalisation in visual editor
+
 ## [1.11.4] 24th Oct, 2024
 - Fix for gender values. Have removed frontend validation
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clevertap-web-sdk",
-  "version": "1.11.4",
+  "version": "1.11.5",
   "description": "",
   "main": "clevertap.js",
   "scripts": {

src/modules/visualBuilder/dataUpdate.js

@@ -18,7 +18,7 @@ export const updateFormData = (element, formStyle, payload, isPreview = false) =
 
   // Update element text
   if (formStyle.text !== undefined) {
-    element.innerText = formStyle.text
+    element.innerText = isPreview ? formStyle.text.text : formStyle.text
   }
 
   // Handle element onClick

src/modules/visualBuilder/pageBuilder.js

@@ -46,7 +46,14 @@ const handleMessageEvent = (event) => {
     return
   }
   if (event.data.message === 'Dashboard') {
-    initialiseCTBuilder(event.data.url, event.data.variant ?? null, event.data.details ?? {})
+    // handle personalisation
+    window.evtMaster = event.data.personalisation.evtMaster
+    initialiseCTBuilder(
+      event.data.url,
+      event.data.variant ?? null,
+      event.data.details ?? {},
+      event.data.personalisation
+    )
   } else if (event.data.message === 'Overlay') {
     renderVisualBuilder(event.data, true)
   }
@@ -56,14 +63,15 @@ const handleMessageEvent = (event) => {
  * @param {string} url - The URL to initialize the builder.
  * @param {string} variant - The variant of the builder.
  * @param {Object} details - The details object.
+ * @param {Object} personalisation - The personalisation object
  */
-const initialiseCTBuilder = (url, variant, details) => {
+const initialiseCTBuilder = (url, variant, details, personalisation) => {
   if (document.readyState === 'complete') {
-    onContentLoad(url, variant, details)
+    onContentLoad(url, variant, details, personalisation)
   } else {
     document.addEventListener('readystatechange', () => {
       if (document.readyState === 'complete') {
-        onContentLoad(url, variant, details)
+        onContentLoad(url, variant, details, personalisation)
       }
     })
   }
@@ -75,7 +83,7 @@ let isShopify = false
 /**
  * Handles content load for Clevertap builder.
  */
-function onContentLoad (url, variant, details) {
+function onContentLoad (url, variant, details, personalisation) {
   if (!contentLoaded) {
     if (window.Shopify) {
       isShopify = true
@@ -89,7 +97,7 @@ function onContentLoad (url, variant, details) {
     container.style.display = 'flex'
     document.body.appendChild(container)
     const overlayPath = OVERLAY_PATH
-    loadOverlayScript(overlayPath, url, variant, details)
+    loadOverlayScript(overlayPath, url, variant, details, personalisation)
       .then(() => {
         console.log('Overlay script loaded successfully.')
         contentLoaded = true
@@ -118,16 +126,17 @@ function loadCSS () {
  * @param {string} url - The URL.
  * @param {string} variant - The variant.
  * @param {Object} details - The details object.
+ * @param {Object} personalisation
  * @returns {Promise} A promise.
  */
-function loadOverlayScript (overlayPath, url, variant, details) {
+function loadOverlayScript (overlayPath, url, variant, details, personalisation) {
   return new Promise((resolve, reject) => {
     var script = document.createElement('script')
     script.type = 'module'
     script.src = overlayPath
     script.onload = function () {
       if (typeof window.Overlay === 'function') {
-        window.Overlay({ id: '#overlayDiv', url, variant, details, isShopify })
+        window.Overlay({ id: '#overlayDiv', url, variant, details, isShopify, personalisation })
         resolve()
       } else {
         reject(new Error('ContentLayout not found in overlay.js'))