Follow

Set Up In-App Messaging

Set Up In-App Messaging

The Kahuna SDK for JavaScript provides support to allow you to send in-app messages to your users.

Note: SDK 2.4.0 and above provides Marketer-Driven In-App Messaging so that you can develop messages with unique content using one of several template styles provided by Kahuna. If you use Marketer-Driven In-App Messaging, no setup is required and you can skip this section; however, you must contact Customer Success to turn on this feature for your namespace. If your application already has an in-app message style that you want to keep, you can use Custom In-App Messaging, which requires the following setup.

To set up Custom In-App Messaging

  1. After the Kahuna.init function in your JavaScript, add the Kahuna.setInAppMessageCallBack function shown below to register In-App Web Messaging callback.

    Kahuna.setInAppMessageCallBack(function (payload) {
        // Your Code Here
    });
  2. Kahuna checks for a new in-app message after every Kahuna.trackEvent call. When there is a new in-app message, it is downloaded to the client browser and triggers the callback function with the following message object.

    Properties Description Object Type
    message Main message String
    additionalParameters Deep linking parameters JSON Object

    After showing the message to the user, you need to mark it as read by calling the following function.

    Kahuna.dismissInAppMessage();

    Note: If this method is not called, your users repeatedly see the new in-app message.

    Example

    This example shows you how to use browser notifications to display an operating system notification window when an in-app message is received. After the code displays the message and performs any tasks you want to occur as a result, Kahuna.dismissInAppMessage() marks the message as read.

      // request permission to display web notifications on page load
      document.addEventListener('DOMContentLoaded', function() {
        if (Notification.permission !== "granted")
          Notification.requestPermission();
      });
      document.addEventListener('load', function(event) {
        if (Notification.permission !== "granted")
          Notification.requestPermission();
      });
      // When a message is received and the user has neither denied nor granted permission 
      // they are prompted to use browser notifications   
      Kahuna.setInAppMessageCallBack(function(data) {
        if (Notification && Notification.permission === "default") {
          Notification.requestPermission().then(function(result) {
            Kahuna.checkInAppMessage();
          });
          return;
        }
        // When a message is received and the user has not granted permission 
        // the message displays using the messi.js library as an in-app alert
        if (!Notification || (Notification && Notification.permission !== "granted")) {
          Messi.alert(data.message, function(data) {
            Kahuna.dismissInAppMessage();
          });
        } else {
          // When a message is received and the user has granted permission 
          // the message displays as a web notification
          var title = data.additionalParameters.title || "Notification from " + document.title;
          var notification = new Notification(title, {
            icon: "/favicon.ico",
            body: data.message,
            tag: "kahuna",
          });
          notification.onclick = function() {
          window.focus();
          if (data.additionalParameters.url) {
            // The web page comes into focus when the user clicks on the notification
            // If the link data in the in-app message contains a url key 
            // the URL opens when the user clicks on the notification
            window.open(data.additionalParameters.url);
          }
          notification.close();
        };
        Kahuna.dismissInAppMessage();
        }
      });

To track Custom In-App Messages (clicks, dismisses, displayed, and not displayed events) just like marketer-driven in-app messages, please also implement the events described on Configuring Kahuna Integration To Track Custom In-App Message Events.

After you complete the steps in this topic, your web application is ready to start receiving custom in-app messages from Kahuna. Now, follow the steps in Add Events and Attributes.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments