
In today's digital landscape, the majority of internet users access the web through mobile devices. In-app campaigns offer companies a unique opportunity to engage with this large and growing customer base in a personalized and meaningful way. By using a variety of triggers, in-app campaigns can increase customer engagement, conversions, and provide valuable insights into customer preferences. 

The swiping mechanism is a user-friendly feature commonly used in in-app campaigns. It allows customers to quickly and easily swipe left or right to indicate their level of interest in a product or offer. The mechanism provides companies with valuable insight into customer tastes and behavior, enabling them to make informed decisions about future campaigns and product offerings. Finally, the swipe mechanism adds a fun and interactive element to in-app campaigns, increasing customer engagement and overall user experience.

This use case outlines the process of creating an engaging in-app campaign featuring a swiping mechanism with personalized product recommendations. With the use of a predefined in-app template for the swiping mechanism, there is no need for time-consuming creation of a template from scratch, making it quick and easy to launch the campaign. The campaign will be displayed to customers as soon as they add a product to their favorites list, providing a seamless user experience.

<figure>
<img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/in-app-swiping.png" alt="In-app swiping mechanism"  class="full no-frame">
</figure> 

## Prerequisites 
---
- [Implement Synerise SDK in your mobile app](/developers/mobile-sdk).
- [Configure AI engine](/docs/settings/configuration/ai-engine-configuration/engine-configuration-for-search). Enable **Personalized recommendations**.
- Implement the `product.addToFavorite` event in your [mobile application](/developers/mobile-sdk/event-tracking#product-added-to-favorites). The event must be sent to Synerise after adding any product to favorites by the customer.

## Process
---
In this use case, you will go through the following steps:
1. [Create AI recommendations](/use-cases/in-app-swiping-mechanism#create-ai-recommendations) with personalized products. 
2. [Create an in-app campaign](/use-cases/in-app-swiping-mechanism#create-an-in-app-campaign) with swiping mechanism using the predefined template. 

## Create AI recommendations
---

In this step, create an AI recommendation campaign that will be used to display products in your in-app message.

1. Go to <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/icons/ai-hub-icon.svg" alt="AI Hub icon" class="icon" > **AI Hub > (AI Recommendations) Models > Add recommendation**.
2. Enter the name of the recommendation (it is only visible on the list of recommendations).
3. In the **Type & Items feed** section, click **Define**.
4. From the **Items feed** dropdown list, select a product feed.
5. Select the **Personalized** recommendation type.  
6. Confirm the recommendation type by clicking **Apply**.  
6. In the **Items** section, click **Define**.  
7. Click **Add slot**.  
8. Click the **Unnamed slot** that was created.    
8. Define the minimum and maximum number of products displayed in the frame according to your needs.
9. Optionally, you can use filters to include specific items in the recommendation frame.

   <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">

   Learn about the difference among [elastic, static filters](/docs/ai-hub/recommendations-v2/creating-recommendation-campaign#select-conditions-of-displaying-items), and [distinct filters](/docs/ai-hub/recommendations-v2/creating-recommendation-campaign#distinct-filter).

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

10. Confirm the configuration by clicking **Apply**. 
11. Optionally, you can use boosting option to promote or demote any items attributes in the recommendation frame. 
12. Optionally, you can also define the settings in the **Additional settings** tab according to your needs.
13. Click **Save**.
    <figure>
    <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/personalized-inapp.png" alt="AI recommendation configuration" class="full">
    <figcaption> AI recommendation campaign configuration</figcaption>
    </figure>

## Create an in-app campaign
---
In this part of the process, you will create an in-app campaign triggered by the `product.addToFavorite` event. We will use a predefined template for the swiping mechanism, 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 menu icon" class="icon"> **Experience Hub > In-app messages > Create new**
2. Enter a meaningful name for the in-app campaign.

### Define the audience
--- 
1. In the **Audience** section, click **Define**.
2. Select the **Everyone** tab.
3. Click **Apply**.

### Define content
---

1. In the **Content** section click **Define**.
2. Click **Create message** and from the list of template folders, select **Predefined templates**.
3. Select **Swiping mechanism with recommendation campaign**.   
    **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 inserts](/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 **Config** tab already has default values filled in. You can keep them or change them to fit your business needs.  
The fields in **Config** are split into two types: ones for dynamic (related to Jinja) content 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 the visual layer of the in-app message.

1. From the **Recommendation Campaign** drop-down list, select the personalized recommendation campaign you created in the previous step. You can find it by typing its name or ID in the search box. 
2. In the **Product attribute name with image link** field, change the default value of the `imageLink` attribute to the attribute name from your item catalog. In our case, the attribute corresponding to the image link is `image`. 
3. In the **Product attribute name with title** field, change the default value of the `title` attribute to the attribute name from your item catalog. In our case, the attribute corresponding to the title is `name`. 
4. In the **Header text** text box, type the header you want to display in the in-app message.
5. Define the color in the following fields: **Header text color**, **Wrapper background color** and **Close icon background color** to your needs.
6. Customize the **Header text on a Thank you view** and **Header description on a Thank you view** to your needs.  

   <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">

   The **Thank you** view refers to the last view of the campaign when the user has already clicked through all the items that were supposed to be displayed in-app. It can be previewed only after the campaign is pushed on the mobile app.

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

7. Adjust the remaining fields corresponding to the **Thank you** view, which includes its text color, text and color and background color of the close button. 
8. 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 or a product.
    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 how this campaign displays altogether directly in the mobile app.

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

9. If the template is ready, in the upper right corner, click **Save this template > Save as**.
10. 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**.
    <figure>
    <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/in-app-preview-1.png" alt="In-app preview" class="large">
    <figcaption>In-app preview</figcaption>
    </figure>
11. Click **Next** to continue the process of configuring the in-app campaign.
12. Click **Apply** to save your content changes. 

### Select events that trigger the in-app message display
---
In this part of the process, define the event that triggers the display of the in-app message. In our case, the trigger is adding an item to favorites.

1. In the **Trigger events** section, click **Define**.
2. Select **Add event** and from the dropdown list, choose the `product.addToFavorite` event.
3. Click the **+ where** button and as the parameter, choose `source`.
4. As the logical operator, select **Contain** and as the value add **MOBILE** to analyze events only from the mobile application.
5. Click **Apply**.
<figure>
<img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/in-app-trigger.png" alt="The view of In-app trigger event configuration"  class="full">
<figcaption>In-app trigger event configuration</figcaption>
</figure> 

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

1. In the **Schedule** section:
    1. Click **Define**.
    2. Choose **Run immediately** option.
    3. Click **Apply**.
2. In the **Display settings** section:
    1. Click **Define**.
    2. Define the **Delay display** as **0** and **Priority index** as **1**. 
    
       <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">

       The mobile application can display one in-app message at a time. If the conditions allow the display of several in-apps at a time, the priority is a decisive factor for displaying the message. The messages with lower priority aren’t queued.

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

    3. 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 two times in 7 days.
    4. You can additionally enable the **Capping limit** toggle to limit the amount of time the in-app message can be displayed to a customer in general. 
    5. Click **Apply**.
3. Optionally, you can define the UTM parameters in the **UTM & URL parameters** section. Otherwise, click **Skip step**.
4. Optionally, you can add the custom parameters in the **Additional parameters** section. Otherwise, click **Skip step**.
3. To start your campaign, click **Activate**.
<figure>
<img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/in-app-configuration-view.png" alt="In-app campaign configuration settings"  class="large">
<figcaption>In-app campaign configuration settings</figcaption>
</figure> 

## What's next
---
Refer to the What's next section from [this use case](/use-cases/in-app-bestsellers#whats-next) for some ideas on how to use data obtained from user swipes in the in-app campaign you've created.

## Check the use case set up on the Synerise Demo workspace
---
You can check the configuration of the campaign components directly in Synerise Demo workspace:
- [AI recommendation configuration](https://app.synerise.com/ai-v2/recommendations/iLhCWkFA771c),
- [In-app campaign](https://app.synerise.com/communications/in-app/f6cb088d-0f1f-41b0-bca8-80af671fb56c)

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
---
- [In-app messages](/docs/campaign/in-app-messages)
- [Using in-app template builder](/docs/campaign/in-app-messages/creating-inapp-templates/creating-inapp-template)
- [Mobile campaigns](/docs/campaign/Mobile)
- [Recommendations](/docs/ai-hub/recommendations-v2)
- [Recommendations inserts](/developers/inserts/recommendations-v2)
