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.

IMPORTANT
Web In-App Messaging is an Adobe Journey Optimizer feature, which uses the Web SDK to deliver the personalized content.
For detailed instructions on how to configure your Web In-App Messaging campaign, see the Adobe Journey Optimizer documentation.

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.

Image showing the personalization storage option in the tag extension configuration page.

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:

  1. Extension: Core

  2. Event Type: Library Loaded (Page Top)

    Image showing the event configuration screen.

  3. Select Keep Changes to save the event configuration.

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

  1. In the Actions section, select Add.
    Image showing the edit rule screen.

  2. Use the following Action settings:

    • Extension: Adobe Experience Platform Web SDK

    • Action Type: Send event

      Image showing the action configuration screen.

  3. On the right side of the screen, in the Personalization section, enable the Render visual personalization decisions option.
    Image showing the personalization configuration screen.

  4. On the right side of the screen, in the Decision context section, define the Key/Value pairs which you used in your campaign configuration, to qualify for the in-app message.
    Image showing the personalization configuration screen.

  5. Select Keep Changes to save your configuration.

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.

Image showing the library screen.

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

Image showing the personalization configuration screen.

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:

  1. Extension: Core

  2. Event Type: Click

  3. Set the trigger for a specific element on the page, identifier by a CSS selector of your choosing.

    Image showing the event configuration screen.

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

  1. In the Actions section, select Add.
    Image showing the edit rule screen.

  2. Use the following Action settings:

    • Extension: Adobe Experience Platform Web SDK

    • Action Type: Evaluate rulesets

      Image showing the action configuration screen.

  3. On the right side of the screen, enable the Render visual personalization decisions option.
    Image showing the personalization configuration screen.

  4. On the right side of the screen, in the Decision context section, define the Key/Value pairs which you used in your campaign configuration, to qualify for the in-app message.
    Image showing the personalization configuration screen.

  5. Select Keep Changes to save your configuration.

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.

Image showing the library screen.

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

Image showing the personalization configuration screen.

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:

  • personalizationStorageEnabled: true triggers the in-app message with the frequency you defined in the Adobe Journey Optimizer campaign.
  • personalizationStorageEnabled: false triggers the in-app message on every page load.
recommendation-more-help
def05a9c-d048-422c-a3a1-88b2de863f4f