
In-app messaging feature allows businesses to target customers who have abandoned their shopping carts, encouraging them to complete their purchases. The messaging can be personalized and triggered based on specific actions, such as how long the item has been in the cart or the customer's browsing history, increasing the chances of conversion. This can help boost revenue and improve the overall customer experience.

This use case describes the process of creating a reminder that a customer did not complete a purchase and sending it through an in-app message. In this case, we assume that the customer added products to cart and hasn't finalized a purchase in the following hour.  

This use case provides you with an instruction how to use a ready-made in-app template that can be used 1:1 in a business scenario.

<figure>
<img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/in-app-abc.png" alt="The in-app message view"  class="full no-frame">
</figure>

## Prerequisites 
---
- [Implement Synerise SDK](/developers/mobile-sdk) in your mobile app.
- Implement the [transaction events](/developers/web/transactions-sdk) using [SDK](/developers/web/transactions-sdk) or [API](https://developers.synerise.com/DataManagement/DataManagement.html#operation/CreateATransaction).
- [Implement the `cart.status` event](/developers/web/cart), which stores the current status of the basket in the form of an event on the customer's card. Event has to be sent to Synerise, after every change in the cart status.
- Collect [product.addToCart event](/docs/assets/events).

## Process
---

In this use case, you will go through the following steps:
1. [Create an aggregate](#create-an-aggregate) with abandoned products.
2. [Create an in-ap message](#create-an-in-app-message) with abandoned cart using the predefined template.

## Create an aggregate
---
In this step, create an aggregate that will be used to display products in your in-app message.

1. Go to <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/icons/behavioral-data-hub-icon.svg" alt="Behavioral Data Hub icon" class="icon"> **Behavioral Data Hub > Live Aggregates > Create aggregate**.
2. As the aggregate type, select **Profile**.  
2. Enter the name of the aggregate.
3. Click **Analyze profiles by** and select **Last**.
5. From the **Choose event** dropdown list, select the `cart.status` event.
6. As the event parameter, select **products**.
7. Set the period from which the aggregate will analyze the results to **Lifetime**. 
12. Save the aggregate.

<figure>
<img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/ac-aggregate.png" class="full" alt="The view of the configuration of the aggregate">
<figcaption>Configuration of the aggregate</figcaption>
</figure>

## Create an in-app message
---
In this part of the process, you create an in-app campaign triggered by the `session.start` event for customers who haven't made a transaction within an hour from adding the product to cart. We will use a predefined template for the message about abandoned cart, so there is no need to create a template from scratch.

1. Go to <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/icons/experience-hub-icon.svg" alt="Experience Hub icon" class="icon" > **Experience Hub > In-app messages> Create in-app**.
2. Enter the name of the in-app.

### Define the audience
---
As the first step, define the target group of customers for the in-app message. In this case, the group will consist of the customers who abandoned their cart within an hour from adding the product to cart.

1. In the **Audience** section, click **Define**.
4. Click **New Audience** and then **Define conditions**.
5. Click **Add condition**, from the dropdown list, select the `product.addToCart` event.
7. Click the calendar in the right bottom of the page.
    1. In the **Relative date range** section define the period from which the segmentation will return the customers. In this case, choose **Today**.
    2. Click **Apply**.
8. Click **Add condition**, from the dropdown list, select the `product.addToCart` event.
9. Click **and then...**, from the dropdown list, select the `transaction.charge` event.
10. Change **Performed** to **Not performed**.
11. Click the calendar in the right bottom of the page.
    1. In the **Relative date range** section define the period from which the segmentation will return the customers. In this case, choose **Today**.
    2. Click **Apply**.
12. Click the clock next to the calendar.
    1. Type `1` and from the dropdown list, select **Hours**.
    <figure>
    <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/inapp-au-ac.png" alt="The view of the In-app Audience configuration"  class="large">
    <figcaption>In-app Audience configuration</figcaption>
    </figure> 

9. Click **Apply**.
8. To save the audience, click **Apply**.

### Define content
---
In this part of the process, you will create the content of the in-app message that will appear in the mobile application with the help of ready-made template.

1. In the **Content** section, click **Define**.
2. Click **Create message** and from the list of template folders, select **Predefined templates**.
3. Select the **Abandoned cart** template.

**Result:** You are redirected to the code editor.

<div class="admonition admonition-note"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div><div class="admonition-body"><div class="admonition-content">

You can edit the template in two ways, by editing the code of the template ([add snippets](/docs/campaign/in-app-messages/creating-inapp-templates/creating-inapp-template#adding-a-snippet-to-the-template-code), [add variables](/docs/campaign/in-app-messages/creating-inapp-templates/creating-inapp-template#adding-a-variable) and/or by filling out the form in the Config tab. In this use case, we will use the capabilities of the predefined Config tab.

</div></div></div>


#### Edit form in the Config tab 
---
The form in the **Config** tab is already filled in with default values. You can keep them or change them to fit your business needs.
The fields in Config are split into two types: ones for dynamic content (related to Jinja) and ones for in-app appearance. The dynamic content fields must match the values in the catalog and the names of the attributes returned by the recommendations. The appearance fields only affect how the information presents itself in the in-app.


1. From the **Aggregate with products left in the cart** drop-down list, select the [aggregate you created in the previous step](#create-an-aggregate). You can find it by typing its name or ID in the search box.
2. In the **Header text** text box, type the header you want to display in the in-app message.
3. In the **Header description text** text box, type the header description you want to display in the in-app message.
4. In the **Name of the catalog with product information** field, change the default `Snrs-produktu-ogTag` value to the catalog name with product information. In our case, it's `store-1`.
5. In the **Name of the column with image link** field, change the default `og:image` value to the name of the column with image link in your catalog with product information. In our case, the name of the column with image link is `image`.
6. In the **Name of the column with title** field, change the default `og:title` value to the name of the column with the title in your catalog with product information. In our case, the name of the column with title is `name`.
7. In the **Name of the column with price** field, change the default `product:original_price:amount` value to the name of the column with original price in your catalog with product information. In our case, the name of the column with original price is `price`.
8. In the **Name of the column with product link** field, change the default `og:url` value to the name of the column with product link in your catalog with product information. In our case, the name of the column with product link is `productUrl`.
9. Define the colors for the following fields: **Wrapper background, Header background, Header text, Header description text, Close icon background** and **Close icon** to your needs.
10. After you make changes to the template, you can check the preview.
    1. Click the **Preview** button on the upper left side.
    2. Enter the ID of a customer.

       <div class="admonition admonition-important"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div><div class="admonition-body"><div class="admonition-content">

       Select a customer who has the `product.AddtoCart` event in their activity list in **Behavioral Data Hub > Profiles**.

       </div></div></div>

    3. Click **Apply**.
  
    <div class="admonition admonition-important"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div><div class="admonition-body"><div class="admonition-content">

    Considering that the in-app is very interactive, the preview in the platform may not be enough to test the in-app performance. That’s why we suggest checking the preview directly in the mobile app.

    </div></div></div>


    <figure>
        <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/ac_preview.png" alt="The view of the In-app preview" class="large">
        <figcaption>In-app preview</figcaption>
        </figure> 

11. If the template is ready, in the upper right corner click **Save this template > Save as**.
12. On the pop-up:
    1. In the **Template name field**, enter the name of the template.
    2. From the **Template folder** dropdown list, select the folder where the template will be saved.
    3. Confirm by clicking **Apply**.
13. To continue the process of configuring the in-app campaign, click **Next**.
14. To save your content changes, click **Apply**.

### Select events that trigger the in-app message display
---
In this part of the process, you will define the event triggering the display of the in-app message.

1. In the **Trigger events** section, click **Define**.
2. Select **Add event** and from the dropdown list, choose `session.start` event.
3. Click the **+ where** button and select `mobile`.
4. As the logical operator, select **Exists**.
5. Click **Apply**.

<figure>
<img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/inapp-ab-trigg.png" alt="The view of in-app trigger event configuration"  class="large">
<figcaption>In-app trigger event configuration</figcaption>
</figure> 

### Schedule the message and configure display settings
---
As the final part of the process, you will set the display settings of the in-app message such as schedule, capping, priority of the message among other in-app messages.

1. In the **Schedule** section, click **Define** and set the time when the message will be active. 
2. In the **Display Settings** section, click **Change**.
3. Define the **Delay display**, **Priority index** and enable the **Frequency limit** toggle to manage the frequency of in-app message display in the application.  
   In our case, we want to display the message to the customer a maximum of 1 time in period of 7 days. 

    
   <div class="admonition admonition-note"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div><div class="admonition-body"><div class="admonition-content">

   You can additionally enable the **Capping limit** toggle to limit the amount of time the in-app message can be displayed to a user in general.

   </div></div></div>
  

16. Click **Apply**. 

    <figure>
    <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/ab_prev.png" alt="The view of in-app schedule and display configuration"  class="large">
    <figcaption>In-app schedule and display configuration</figcaption>
    </figure> 

17. Optionally, you can define the UTM parameters and additional parameters for your in-app campaign.
18. Click **Activate**.

## Check the use case set up on the Synerise Demo workspace
---
You can check the [Aggregate](https://app.synerise.com/analytics/aggregates/17d214c4-5644-33b1-b0c6-9fab96b26b3e) and [In-app message](https://app.synerise.com/communications/in-app/91c87167-7881-4c9d-a0a2-52d68f2dfd25) configuration directly in Synerise Demo workspace. 

If you’re our partner or client, you already have automatic access to the **Synerise Demo workspace (1590)**, where you can explore all the configured elements of this use case and copy them to your workspace.  

If you’re not a partner or client yet, we encourage you to fill out the contact [form](https://demo.synerise.com/request) to schedule a meeting with our representatives. They’ll be happy to show you how our demo works and discuss how you can apply this use case in your business. 

## Read more
---
- [Aggregates](/docs/analytics/aggregates)
- [In-app messages](/docs/campaign/in-app-messages)
- [Snippets](/docs/assets/snippets)
- [Mobile campaigns](/docs/campaign/Mobile)
- [Using in-app template builder](/docs/campaign/in-app-messages/creating-inapp-templates/creating-inapp-template)