Configure Web In-app Messaging support in Web SDK

In-app messages are notifications which you can send to users within your web application, guiding them to specific points of interest.

You can use these notifications for different purposes, such as promoting new features, presenting special offers, or facilitating user onboarding.

By using in-app messages, you can effectively engage with your audience and steer them towards important aspects of your application.

Prerequisites prerequisites

Web SDK tag extension version extension-version

The Web In-app messaging functionality requires the latest version of the Web SDK tag extension.

Configure a CSP for Web In-app Messaging csp

When you configure Web In-App Messaging, you must inclde the following directive in your CSP:

default-src  blob:;

For more information about configuring a CSP, see the dedicated documentation.

Configure Web In-App Messaging using the Web SDK tag extension tag-extension

Refer to the Web SDK tag extension configuration page to understand where you can find the settings described below.

After you have installed the Web SDK tag extension, follow the steps below to configure the extension for Web In-app Messaging.

In the Personalization section, check the Enable personalization storage option. This option allows the Web SDK to keep track of which experiences have been seen by the user across page loads.

Web In-app Messaging supports two types of triggers:

Refer to the following sections to configure the Web SDK tag extension according to the triggers you want to use.

Configuration steps for the Send data to Platform trigger send-data-platform

Select the tag property which contains your Web SDK extension, and create a new rule with the following settings:

Next, you must add an action to the rule that you created.

Next, you must add the newly created rule to the tag property library. To do this, go to Publishing Flow and select the rule that you previously created.

After you have added the rule to the library, select Save & Build to Development.

The configuration process is now completed and your message is ready to be shown to your users.

Configuration steps for using manual triggers manual-trigger

Select the tag property which contains your Web SDK extension, and create a new rule with the following settings:

Next, you must add an action to the rule that you created.

Next, you must add the newly created rule to the tag property library. To do this, go to Publishing Flow and select the rule that you previously created.

After you have added the rule to the library, select Save & Build to Development.

The configuration process is now completed and your message is ready to be shown to your users.

Configure Web In-App Messaging using the Web SDK JavaScript library js-library

As an alternative to using the Web SDK tag extension, you can also configure Web In-App Messaging directly from the Web SDK JavaScript library.

You can display web in-app messages from Adobe Journey Optimizer in two ways.

Method 1: Automatically fetch the personalization content automatic

To have Web SDK automatically fetch the personalization content on page load, use the sendEvent command, as shown in the example below.

  alloy("sendEvent", {
      renderDecisions: true,
      personalization: {
          surfaces: ['#welcome']
      }
  });

Method 2: Manually fetch the personalization content based on user action manual

To show the personalization content only after the user performs a specific action, use the evaluateRulesets command as shown in the example below.

In this example, the personalization content is displayed when a user clicks the Buy Now button on your website.

 alloy("evaluateRulesets", {
     renderDecisions: true,
     personalization: {
         decisionContext: {
             "userAction": "buy_now"
         }
     }
 });

Configure personalization storage personalization-storage

You can choose to show in-app messages to users for a set number of times, or every time they visit a page, through the personalizationStorageEnabled configuration option.

In the Web SDK configuration set the personalizationStorageEnabled option according to your needs: