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:
-
Extension: Core
-
Event Type: Library Loaded (Page Top)
-
Select Keep Changes to save the event configuration.
Next, you must add an action to the rule that you created.
-
In the Actions section, select Add.
-
Use the following Action settings:
-
Extension: Adobe Experience Platform Web SDK
-
Action Type: Send event
-
-
On the right side of the screen, in the Personalization section, enable the Render visual personalization decisions option.
-
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.
-
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.
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:
-
Extension: Core
-
Event Type: Click
-
Set the trigger for a specific element on the page, identifier by a CSS selector of your choosing.
Next, you must add an action to the rule that you created.
-
In the Actions section, select Add.
-
Use the following Action settings:
-
Extension: Adobe Experience Platform Web SDK
-
Action Type: Evaluate rulesets
-
-
On the right side of the screen, enable the Render visual personalization decisions option.
-
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.
-
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.
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:
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.