---
title: Lab 3 - Web InApp Message
slug: ajo-elc/lab-3-web-inapp-message
docTags: 
createdAt: 2025-06-18T06:09:40.299Z
---

# Learning Objectives 

In this exercise you will: 

1. Learn how to configure a popup message to appear on the website when the profile belongs to a specific audience

# Scenario

We're going to rebuild the web popup campaign that was shown the demo.   The popup is shown only to profiles who are part of the **ELC - Purchased ANR twice in last year **audience.  

# 3.1  Create Web InApp Campaign 

InApp messages can be configured either within the context of a journey or as their own Campaign in isolation.   For this exercise we will configure it in a campaign action.  From the left navigation click to **Campaigns **and select the **Action **tab.   Here you can see the list of actions already configured.  

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/mkWPGnfnYha15S3ZgtJjB_image.png)

Click to **Create campaign**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/XFx01zTST3H5XJizKp0cY_image.png)

Select **Scheduled - Marketing **and click **Confirm.**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/IyDvu5op30IGLANMNGkqq_image.png)

Give your action a unique name  something like **\<your name or lab number> Web Popup.&#x20;**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/mCDmJUPx55m42MdpZ2xSL_image.png)

Move to the **Actions** tab and click to add &#x61;**&#x20;In-app message&#x20;**&#x61;ction.

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/GyV6ih65l2av7fON4W5nf_image.png)

Select the web-elc-inAppHome configuration.  The In-app message configuration controls where on a website (or which mobile app) the experience will placed.  This configuration is set to display on the home page of the australian estee lauder website.  &#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/5bnfYnodOxI0jm7F-zY06_image.png)

:::hint{type="warning"}
You can view the configuration details by clicking the eye icon to the right of the drop down.   It will show you what has been configured by administrator. &#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/CzqOC9iWO8rewlE0l2z3G_image.png)
:::

Next we need to configure what action on the website will trigger the popup to appear.   Click to **Edit triggers. &#x20;**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/_foAA9xdmGn4VxMTzC2D9_image.png)

Remove the default **Application Launch&#x20;**&#x74;rigger by clicking the x - this would be applicable to mobile app in app messages only.  &#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/ji01L2WEtyoRyOcP_Fj2M_image.png)

Replace the trigger with **Sent data to Platform. &#x20;**&#x54;his trigger is applicable to both web and mobile in-app messages.&#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/x9JWsZrU-683U6P1E_L8H_image.png)

Update the frequency rule to show the message to eligible users **until click through**, that way the message will appear whenever they return to the home page until they click on the call to action.&#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/desG9FCcl6BEIxdJrhEuH_image.png)

Just like the emails we configured in the journey, you can add experimentation or multi-lingual translations to a campaign as well.  The conflict management controls which experience will get priority if multiple campaigns are targeting the same profile on the same page at the same time.&#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/KEEjPHsZfFqblLEppWQ-h_image.png)

For this exercise we will ignore this and move straight onto the **Content&#x20;**&#x74;ab.    Multiple message layouts are supported, click to select a **Modal&#x20;**&#x6C;ayout for a center positioned popup. &#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/1nBFsSND6xeqltWoA4xR5_image.png)

Click to confirm the **change of layout.**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/9CQEvbiWlREiloO0t-Vtm_image.png)

Click to change the media asset. &#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/5f_MQ664R6dZu31SYP6fc_image.png)

From the Asset Selector pick an asset from the DAM in the ELC folder to add to your popup.&#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/FEn6nlTF2xw6yChVLvzeC_image.png)

Update the **Content&#x20;**&#x74;o have a meaningful **Header, Body, Button Text** and **Target URL**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/ml9rkF1cNo9i20HRE0zF8_image.png)

Switch on **Advanced formatting** and switch to the **Settings&#x20;**&#x74;ab to modify some of the styling.  &#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/PqvtLNbwJ9VC-l3fjX97H_image.png)

Scroll down to the Message settings and toggle on the **Customize size.&#x20;**&#x20;Change the **height** to **80%** and add a **Max Width** of **1000px.**   This will ensure the message doesn't get too large when viewing the website on a big screen. &#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/mBdH_2OsGcostROoFbIkf_image.png)

Move now to the **Audience&#x20;**&#x74;ab to control who will see this banner.    Change the audience to the complex audience we reviewed earlier: **ELC - Purchased ANR twice in last year.  &#x20;**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/hNDqTJ5utVb3m900X_X_w_image.png)

Lastly you can define a schedule for your campaign to control when it will be available.

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/65bI8jJ9WKClbbLE7TL7h_image.png)

Click **Review to activate.**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/b2zLn0cdFuE_2-Uf__doj_image.png)

Here you can review your campaign settings and check everything before setting the campaign to be active. &#x20;

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/epzwsuHe5ZA6JFMs-fD9D_image.png)

# Summary

Congratulations, you've successfully created a personalized web in app message campaign.&#x20;