> ## Documentation Index
> Fetch the complete documentation index at: https://moengage.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Use GIFs in an Onboarding Walkthrough

# Introduction

Effective user onboarding is crucial for driving app engagement and ensuring long-term retention. Leveraging GIFs within In-app messaging functionality offers a visually compelling and interactive means of guiding new users through initial interactions with the application.

For instance, consider a new user who has downloaded a beauty application and requires clear guidance on navigating the app to facilitate product orders, access exclusive discounts, and stay informed on the latest beauty news.

#### Advantages of using GIFs in an onboarding walkthrough

* **Enhanced visual communication**: GIFs offer a simplified way to visually communicate an app's navigation and features, making complex processes easier to understand.
* **Demonstration of actions**: GIFs can quickly demonstrate core functionalities and actions within the app, reducing the need for extensive written instructions.
* **Engagement and fun**: Animated elements can more effectively capture users' attention than static images, making the onboarding process more enjoyable and memorable.
* **Contextual communication**: GIFs can effectively communicate context without relying on text, such as demonstrating a loading spinner or a success checkmark.
* **Instructional aid**: GIFs serve as mini-tutorials, making the learning process more intuitive and reducing the need for extensive written instructions.
* **Visual feedback**: GIFs can give users immediate visual feedback on their actions, enhancing their interaction with the app.

This article will outline the process of creating an engaging onboarding walkthrough using GIFs within In-app messages. We will achieve this use case in two steps:

1. [Identify the key onboarding steps and create GIFs](/user-guide/use-cases/in-app-message/use-gifs-in-an-onboarding-walkthrough#step-1-identify-the-key-onboarding-steps-and-create-gifs)
2. [Create an In-app Messaging campaign](/user-guide/use-cases/in-app-message/use-gifs-in-an-onboarding-walkthrough#step-2-create-an-in-app-messaging-campaign)

# Expected Result

Users will experience a smooth and engaging onboarding and quickly understand key app features, which leads to increased user satisfaction and higher retention rates. Users will also easily navigate the app to make their first purchase, apply discounts, and read beauty articles, resulting in more frequent app usage.

<img src="https://mintcdn.com/moengage/OQ0V9ibjQLpsyCSD/images/moengage_10deaf.png?s=8da1f8e1affea8b617338b36cc31ac08" alt="ScreenRecording2024-07-26at6.24.45PM-ezgif.com-video-to-gif-converter.gif" style={{ width:"53%" }} width="600" height="1044" data-path="images/moengage_10deaf.png" />

<Tip>
  An event must be available in MoEngage to track the action of a user installing your app or signing up for your app and related information such as the platform, source, and app version in each event. In this example, we will use the event *User Installs the App*. To understand how to track events, refer to the [Developer Guide](/developer-guide/introduction).
</Tip>

# Step 1: Identify the Key Onboarding Steps and Create GIFs

1. **Identify Key Onboarding Moments**: Identify the essential steps and features that new users should understand during their initial interaction with the app. For our example, we aim to ensure that new users can effortlessly order products, discover and apply discounts, and access the latest beauty news.
2. **Create Informative GIFs**: Create a series of short, looping GIFs that effectively demonstrate each key feature or action. Ensure that the GIFs are visually captivating and easy to understand. For instance, include GIFs that include the essential steps that you identified previously. For example, inform new users about your products, explain how to apply discount codes, and guide users to the beauty news section. The following is a sample GIF: <img src="https://mintcdn.com/moengage/fUSb9kG75-iJ0JuL/images/moengage_e62be6.png?s=9fc736afe32df2bc8a778f68bbf079d7" alt="onboarding-walkthrough.gif" width="800" height="600" data-path="images/moengage_e62be6.png" />

# Step 2: Create an In-App Messaging Campaign

In this section, we will create an In-app Messaging campaign targeting new users or users who have recently installed the app. We will incorporate the GIF you created earlier to enhance user onboarding.

## Step 2.1: Target Users

1. On the left navigation menu in the MoEngage dashboard, click **Engage**, and then click **Campaigns**.
2. On the All campaigns page, click **+ Create campaign**.
3. Under **Inbound**, click **In-app**. <img src="https://mintcdn.com/moengage/N1a7P_mcSpm-5bMa/images/moengage_5a40c1.png?fit=max&auto=format&n=N1a7P_mcSpm-5bMa&q=85&s=b07bd3c33f36d20fc10a516b010b2d6f" alt="Screenshot 2025-05-12 at 10.27.15 AM.png" width="1066" height="1660" data-path="images/moengage_5a40c1.png" /> You are taken to the first step, **Target users**, in defining your campaign.
4. Define your campaign with a name and tags.
5. In the **Target Platforms** section, select **Android** and **iOS**.
   <img src="https://mintcdn.com/moengage/fVqFKGn_bbcOn3ck/images/moengage_208696.png?fit=max&auto=format&n=fVqFKGn_bbcOn3ck&q=85&s=b4326d0ac99f13778d7c1fbd59e57613" alt="target platforms.png" style={{ width:"48%" }} width="556" height="198" data-path="images/moengage_208696.png" />
6. In the **Trigger Criteria** section, click the **On app open** card. This will ensure that the In-app message is displayed to the users during onboarding when the app is opened. <img src="https://mintcdn.com/moengage/SBG7um9Fqotw1CFo/images/moengage_b697e9.png?fit=max&auto=format&n=SBG7um9Fqotw1CFo&q=85&s=8c2dc45dfb30e2a7cd077a45b4a88eb0" alt="trigger criteria.png" width="1604" height="536" data-path="images/moengage_b697e9.png" />
7. In the **Select trigger time** section, select **After Delay** and set the trigger time for the In-app message to appear after 2 seconds of opening the app.
   <img src="https://mintcdn.com/moengage/N1a7P_mcSpm-5bMa/images/moengage_594ec3.png?fit=max&auto=format&n=N1a7P_mcSpm-5bMa&q=85&s=10c076ae0e1cf6d75e87f09ff87dc9fe" alt="trigger time.png" style={{ width:"51%" }} width="496" height="242" data-path="images/moengage_594ec3.png" />
8. In the **Target audience** section:
   1. Select the **Filter users by** option.
   2. On the **User behaviour** tab, segment the audience to target only those users who have newly installed the app in the last three days. <img src="https://mintcdn.com/moengage/tNrQQROY8O0h4yWe/images/moengage_182c3e.png?fit=max&auto=format&n=tNrQQROY8O0h4yWe&q=85&s=6830edbadef93898f4312227da430690" alt="target audience.png" width="2562" height="1150" data-path="images/moengage_182c3e.png" />
9. Click **Next** to move to the second step, **Content**, where we will define the content for your campaign.

## Step 2.2: Content

1. On the **Prebuilt and saved templates** tab, use the search box to search with the keyword *nudge* to find the nudge templates.
2. Select the **Nudge - Image, text & button** template. <img src="https://mintcdn.com/moengage/431DqtwGIOyvyx6H/images/moengage_863c06.png?fit=max&auto=format&n=431DqtwGIOyvyx6H&q=85&s=b916da47683fe9a565017d20e3189e26" alt="Screenshot 2025-03-17 at 12.02.32 PM.png" width="3150" height="1572" data-path="images/moengage_863c06.png" />
3. Upload the created GIFs in the template in the **Image** section. <img src="https://mintcdn.com/moengage/fVqFKGn_bbcOn3ck/images/moengage_294540.png?fit=max&auto=format&n=fVqFKGn_bbcOn3ck&q=85&s=323616255fa79bf66dde676f87e97b29" alt="Screenshot 2025-03-17 at 12.06.08 PM.png" width="3116" height="1450" data-path="images/moengage_294540.png" />
4. Add a concise and clear Call to action (CTA) text for the GIF.
5. Add navigation to the button so that when the user clicks it, they are redirected to the info page. <img src="https://mintcdn.com/moengage/2FjM3dGfEH1CYo8k/images/moengage_658166.png?s=9e7fd18721835c46c3d00c752e748142" alt="2025-03-17_12-09-50 (1).gif" width="1596" height="762" data-path="images/moengage_658166.png" />
6. Modify the template's design accordingly. Follow the video below to edit the template's design.
   <iframe src="https://www.youtube.com/embed/xxJbATdh3gI" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />
7. Before publishing the campaign, test the In-app messages under the **Preview in-app section**. With this, you can ensure that GIFs and text display correctly on different devices and screen sizes. <img src="https://mintcdn.com/moengage/SBG7um9Fqotw1CFo/images/moengage_b78b2b.png?fit=max&auto=format&n=SBG7um9Fqotw1CFo&q=85&s=7e6b70018634de2a48d9d2204cb86e3d" alt="testing.png" width="1242" height="268" data-path="images/moengage_b78b2b.png" />

## Step 2.3: Schedule and Goals

1. In the **Send campaign** section, define when you want to start and end your In-app messaging campaign. <img alt="image-20240121-054649.png" src="https://mintcdn.com/moengage/epqsPEpMsGQCYy1r/images/moengage_5bfa66.png?fit=max&auto=format&n=epqsPEpMsGQCYy1r&q=85&s=39ed1d6a1863ebf1ab23412ad884cffc" width="2742" height="996" data-path="images/moengage_5bfa66.png" />
2. In the **Conversion goals** section, add conversion goals that you would like to track.
3. In the **Campaign priority** section, assign a priority to this campaign. For example, selecting **Critical** ensures that the users will always see the campaign even when there are other campaigns for which they are eligible. For more information, refer to [Create In-App Campaign](/user-guide/campaigns-and-channels/in-app-message/create/create-in-app-campaign).
4. In the **Delivery controls** section, define the controls based on your requirements. For more information, refer to [Create In-App Campaign](/user-guide/campaigns-and-channels/in-app-message/create/create-in-app-campaign).  <img alt="image-20240121-054810.png" src="https://mintcdn.com/moengage/Deli0Qwc2s7oDHRm/images/moengage_94b46f.png?fit=max&auto=format&n=Deli0Qwc2s7oDHRm&q=85&s=fbc5bb2f4072f5ec18ba377d9b376e34" width="2744" height="636" data-path="images/moengage_94b46f.png" />
5. Click **Publish**.

After the In-app campaign is published, you can monitor its performance on the campaign analytics page. For more information, refer to [Analyze In-App Campaigns](/user-guide/campaigns-and-channels/in-app-message/analyze/analyze-in-app-campaigns).

# Analyze and Optimize

* Use the campaign analytics page to track user interactions with the In-app messages.
* Gather feedback and identify any drop-off points.
* Make necessary adjustments to the GIFs or message content based on user behaviour and feedback.

For more information, refer to [Analyze In-app Campaigns](/user-guide/campaigns-and-channels/in-app-message/analyze/analyze-in-app-campaigns).

# Conclusion

Implementing an onboarding walkthrough using GIFs in In-app messaging can significantly enhance the user experience, making the onboarding process more engaging and effective. By following the steps outlined in this use case, you can ensure new users quickly understand and appreciate the value of the app, leading to higher engagement and retention rates.
