WebView

Android

From SDK v3.5.0 onwards, you now raise events inside a Webview generated by your app. To enable the raising of events from a WebView, add the following code while creating the webview activity

webView.addJavascriptInterface(new CTWebInterface(CleverTapAPI.getDefaultInstance(this)),"<your_variable_name_here>");

🚧
Note
Ensure you use a unique identifier for YOUR_VARIABLE_NAME_HERE to avoid interfering with other apps leading to namespace issues. It should be a unique variable that the JS Engine can recognize. We recommend using your app's package name because two applications cannot have the same package name. This will ensure that it is unique. For example, com_my_sampleapp if your app package name is com.my.sampleapp.

The following methods can be used to raise events and update user properties in the webview -

//An example of recording a User Event called Product Viewed in the Webview JS
if (window.your_variable_name_here) {
  // Call Android interface             
 your_variable_name_here.pushEvent("Product Viewed");          
}



//An example of recording a User Event called Product Viewed with properties, in the Webview JS
var props = {foo: 'xyz', lang: 'French'};

if (window.your_variable_name_here) {
  // Call Android interface             
 your_variable_name_here.pushEvent("Product Viewed",JSON.stringify(props));
            
}

//An example of recording a CHARGED Event with charge details and items, in the Webview JS
var chargeDetails = {Amount: 300, Payment: 'Card'};
var items = [{Category: 'Books', Name: 'Book name', Quantity: 1},{Category: 'Clothes', Name: 'Cloth name', Quantity: 1},{Category: 'Food', Name: 'Food name', Quantity: 1}]

if (window.your_variable_name_here) {
  // Call Android interface             

your_variable_name_here.pushChargedEvent(JSON.stringify(chargeDetails),JSON.stringify(items))
            
}


//An example of updating profile properties of the User in the Webview JS
var props = {foo: 'xyz', lang: 'French'};
if (window.your_variable_name_here) {
  // Call Android interface             
 your_variable_name_here.pushProfile(JSON.stringify(props));          
}


//An example of adding user property for the User in the Webview JS
if (window.your_variable_name_here) {
  // Call Android interface 
your_variable_name_here.addMultiValueForKey('membership', 'gold');
}


//An example of adding multiple user properties for the User in the Webview JS
var cars = ['Saab', 'Volvo', 'BMW', 'Kia'];
if (window.your_variable_name_here) {
  // Call Android interface 
your_variable_name_here.addMultiValuesForKey('Cars', JSON.stringify(cars));

}


//An example of removing a user property for a specific key in the Webview JS
if (window.your_variable_name_here) {
// Call Android interface 
your_variable_name_here.removeMultiValueForKey(‘Cars’, 'Saab');
}


//An example of removing multiple user properties for a specific key in the Webview JS
var cars = ['BMW', 'Kia'];
if (window.your_variable_name_here) {
  // Call Android interface 
your_variable_name_here.removeMultiValuesForKey('Cars', JSON.stringify(cars));
}


//An example of removing a user property by specifying a key in the Webview JS
if (window.your_variable_name_here) {
  // Call Android interface 
your_variable_name_here.removeValueForKey('Cars');
}


//An example of setting a user property by specifying the key in the Webview JS
var values = ['Mercedes','Bentley']
if (window.your_variable_name_here) {
  // Call Android interface 
your_variable_name_here.setMultiValueForKey('Cars', JSON.stringify(values));
}

// Increment user property value by specifying the key in JS enabled custom In-Apps

if (window.your_variable_name_here) {
  // Call Android interface 
your_variable_name_here.incrementValue('Cars',2);
}

// Decrement user property value by specifying the key in JS enabled custom In-Apps

if (window.your_variable_name_here) {
  // Call Android interface 
your_variable_name_here.decrementValue('Cars',2)
}

//Calling onUserLogin 

var props = {Identity: '12434', Email: '[email protected]'};
if (window.your_variable_name_here) {
  // Call Android interface 
your_variable_name_here.onUserLogin(JSON.stringify(props));
}

iOS

The CleverTapJSInterface is a bridge to communicate between Webviews and CleverTap SDK

Integrating the CleverTapJSInterface -

Import the CleverTap JS Interface Header
Initialize the Webview and add the CleverTapJSInterface as a script message handler

#import <CleverTapSDK/CleverTapJSInterface.h>

// Inititialize the Webview and add the CleverTapJSInterface as a script message handler
  
CleverTapJSInterface *ctInterface = [[CleverTapJSInterface alloc] initWithConfig:nil];
[self.webView.configuration.userContentController addScriptMessageHandler:ctInterface name:@"<your_variable_name_here>"];

//Inititialize the Webview and add the CleverTapJSInterface as a script message handler
let ctInterface: CleverTapJSInterface = CleverTapJSInterface(config: nil)

self.webView.configuration.userContentController.add(ctInterface, name: "<your_variable_name_here>");

🚧
Note
Ensure you use a unique identifier for YOUR_VARIABLE_NAME_HERE to avoid interfering with other apps leading to namespace issues. It should be a unique variable that the JS Engine can recognize. We recommend using your app's package name because two applications cannot have the same package name. This will ensure that it is unique. For example, com_my_sampleapp if your app package name is com.my.sampleapp .

The following methods can be used to raise events and update user properties in the webview -

//Recording a User Event called Product Viewed in JS enabled custom in-apps.
var props = {foo: 'xyz', lang: 'French'};
var message = { action:'recordEventWithProps', event:'Product Viewed', properties: props};
if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.your_variable_name_here){
 // Call iOS interface       
  window.webkit.messageHandlers.your_variable_name_here.postMessage(message);         
} 

//Updating profile properties of the User in JS enabled custom in-apps.
var props = {foo: 'xyz', lang: 'French'};
var message = { action:profilePush, properties: props};
if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.your_variable_name_here){
  window.webkit.messageHandlers.your_variable_name_here.postMessage(message);        
}

//Setting a user profile
var message = {
                action: 'profileSetMultiValues',
                value: ['bag', 'kitkat'],
                key: 'myStuff'
            };
if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.your_variable_name_here){
   window.webkit.messageHandlers.your_variable_name_here.postMessage(message);
}

//Add multi value
var message = {action: 'profileAddMultiValue',
             value: 'coat', 
             key: 'myStuff'};

if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.your_variable_name_here){
   window.webkit.messageHandlers.your_variable_name_here.postMessage(message);
}

//Add multi values
 var message = {action: 'profileAddMultiValues',
                values: ['bag', 'kitkat', 'Wine'],
                key: 'myStuff'};

if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.your_variable_name_here){
   window.webkit.messageHandlers.your_variable_name_here.postMessage(message);
}

//Remove value for key
var message = {action: 'profileRemoveValueForKey',
                    key: 'myStuff' };
if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.your_variable_name_here){
    window.webkit.messageHandlers.your_variable_name_here.postMessage(message);
}

//Remove multi values for key
 var message = {action: 'profileRemoveMultiValues',
                values: ['scarf', 'knife'],
                key: 'myStuff'};
if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.your_variable_name_here){
   window.webkit.messageHandlers.your_variable_name_here.postMessage(message);
}

//Remove multi Value
var message = {action: 'profileRemoveMultiValue',
                value: 'bag',
                key: 'myStuff'};
if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.your_variable_name_here){
    window.webkit.messageHandlers.your_variable_name_here.postMessage(message);
}


// Record Charged Event
const chargeDetails = {
                "Amount" : 300,
                "Payment mode": "Credit Card",
                "Charged ID": 24052013
};
const items = [{
       "Category": "books",
        "Book name": "The Millionaire next door",
        "Quantity": 1
 	    },{
        "Category": "books",
        "Book name": "The Millionaire previous door",
        "Quantity": 5
];
const message = {
       action:'recordChargedEvent',
       chargeDetails: chargeDetails,
       items: items
};
if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.your_variable_name_here) {
     window.webkit.messageHandlers.your_variable_name_here.postMessage(message);
}

// Increment user property value

var message = {action: 'profileIncrementValueBy',
               value: 1,
               key: 'score'
             };
                
if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.your_variable_name_here) {
    window.webkit.messageHandlers.your_variable_name_here.postMessage(message);
}

// Decrement user property value

var message = {action: 'profileDecrementValueBy',
               value: 1,
               key: 'score'
             };
                
if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.your_variable_name_here) {
    window.webkit.messageHandlers.your_variable_name_here.postMessage(message);
}

// Call onUserLogin

var props = { Name: 'JohnWeb', Email: '[email protected]' };
var message = { action:'onUserLogin', properties: props };
                
if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.your_variable_name_here) {
    window.webkit.messageHandlers.your_variable_name_here.postMessage(message);
}

WebView

Android

🚧
Note

iOS

🚧
Note

Android

🚧Note

iOS

🚧Note

🚧
Note

🚧
Note