> For the complete documentation index, see [llms.txt](https://docs.digia.tech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digia.tech/digia-engage/user-guides/webengage/inline-carousel.md).

# Inline Carousel

This guide walks you through creating an **Inline Carousel**, connecting it to **WebEngage**, and testing it inside an app slot. Inline campaigns render inside a developer-defined slot in your app layout instead of appearing as an overlay.

Use an Inline Carousel for homepage offers, product discovery cards, feature banners, or merchandising slots.

{% hint style="info" %}
Prefer a quick visual walkthrough first? Watch [Creating Native Inline Content Experiences](https://www.youtube.com/watch?v=Xg8NQnApj00).
{% endhint %}

***

## Before You Start

Make sure you have:

* Access to the correct **Digia Engage project** created with **WebEngage** as the CEP integration.
* Access to the matching **WebEngage project**.
* Your app must already be integrated with Digia Engage and WebEngage. Share the [WebEngage developer integration guide](/digia-engage/developer-guides/webengage.md) with your app team if this setup is not complete yet.
* The audience and trigger event decided in WebEngage.
* A test profile or test segment in WebEngage so you can verify the campaign before launch.
* Your app team must have added a Digia inline slot where the carousel should render.
* The available **slot key** shared by your app team.
* Carousel image URLs and tap actions ready.

{% hint style="info" %}
This guide is written for product managers and marketers. Developer-only setup is linked above so you know what must already be complete before campaign testing.
{% endhint %}

### Slot keys

A **slot key** is the name your app team gives to a place in the app layout where Inline content can render. The slot key in Digia must match the app implementation exactly.

| Slot key          | Where it appears            |
| ----------------- | --------------------------- |
| `home_carousel`   | Homepage hero carousel area |
| `product_offers`  | Product detail offer slot   |
| `checkout_banner` | Checkout reminder banner    |

{% hint style="info" %}
For developer setup details, see the Inline widgets section in the [WebEngage developer integration guide](/digia-engage/developer-guides/webengage.md). After slots are synced, review usable pages and slots in [Component Registry](/digia-engage/user-guides/component-registry.md) before building the campaign.
{% endhint %}

***

## 1. Create an Inline Carousel Campaign

Go to **Campaigns** and choose **New Campaign**. Use a name such as:

```
Homepage Carousel Inline - WebEngage
```

On the **Basics** step, select **Inline** and choose **Carousel** as the widget type.

<figure><img src="/files/O4Um6Q6h0iBSwJEDXas1" alt="Digia Engage Basics step with Inline and Carousel highlighted"><figcaption><p>Select <strong>Inline</strong> and choose <strong>Carousel</strong> as the widget type.</p></figcaption></figure>

***

## 2. Confirm Setup Values

The **Setup** step shows the campaign key and optional screen targeting. Use **Target screens** only if the carousel should render on specific app screens.

<figure><img src="/files/gWqPkmHkdwDAC0XORpjP" alt="Digia Engage Inline Setup step with campaign key and target screens highlighted"><figcaption><p>Confirm the campaign key and decide whether screen targeting is needed.</p></figcaption></figure>

***

## 3. Build the Carousel

On the **Choose UI** step, add carousel items. For each image, paste the image URL and add a tap action only if tapping that image should open a deep link, URL, or another action.

In the **Settings** panel, enter the slot key provided by your app team.

```
home_carousel
```

Keep the default carousel settings unless you need to adjust height, auto-play, interval, infinite scroll, viewport fraction, or indicator dots.

<figure><img src="/files/VLFgVD8HgGH16gxBFr7N" alt="Digia Engage Inline Carousel builder with carousel items, preview, and slot settings highlighted"><figcaption><p>Add carousel images, check the mobile preview, and set the exact slot key shared by your app team.</p></figcaption></figure>

{% hint style="info" %}
Once the Inline campaign UI is saved, use [Live Testing Campaigns](/digia-engage/user-guides/live-testing.md) to send it to a connected debug device and confirm it renders inside the expected slot before moving into review and WebEngage setup.
{% endhint %}

***

## 4. Review the Inline Campaign

Check the campaign name, type, slot key, number of images, and launch checks. You can save as draft while WebEngage setup is pending, or activate when the carousel is ready.

<figure><img src="/files/Ood9JZYzWgJZW3W3PKZk" alt="Digia Engage Inline campaign Review step with campaign summary and launch checks highlighted"><figcaption><p>Review the campaign summary and launch checks before saving or activating.</p></figcaption></figure>

Copy the campaign key from the WebEngage setup section.

***

## 5. Create the WebEngage In-App Custom HTML Campaign

Create a WebEngage In-App campaign and use Custom HTML for the content step. WebEngage decides the audience, trigger event, schedule, and priority. Digia decides what renders after the campaign fires. Inline campaigns for WebEngage use the same campaign payload contract as other Digia experiences; the Digia campaign type tells the SDK to render into the matching slot.

Start with the audience step. Name the campaign, choose the segment, and continue through the trigger and scheduling choices that match your launch plan.

<figure><img src="/files/ZXPfivcqQvfne39QsLn3" alt="WebEngage Audience step for the Homepage Carousel Inline campaign"><figcaption><p>Name the WebEngage campaign and choose the audience that should see the Inline carousel.</p></figcaption></figure>

Choose **Classic Modal** as the In-App layout. Then use Custom HTML for the message content so WebEngage can pass the Digia Inline campaign key to the app.

<figure><img src="/files/NLI00j5wv2LjmTgYHdgu" alt="WebEngage Select a Layout modal with Classic Modal highlighted"><figcaption><p>Select <strong>Classic Modal</strong> before opening the Custom HTML editor.</p></figcaption></figure>

***

## 6. Link WebEngage to the Digia Inline Campaign

In the Custom HTML editor, add a `digia-config` block. Inline campaigns currently require only the `digia_campaign_key` meta tag.

```html
<template id="digia-config">
  <meta name="digia_campaign_key" content="homepage_carousel_inline_webengage">
</template>
```

Keep the carousel images, slot key, and carousel behavior in Digia. WebEngage should only carry the campaign key.

<figure><img src="/files/9Xatrj5Sh6icwmfpaxy0" alt="WebEngage Custom HTML editor with Digia Inline campaign key"><figcaption><p>Add only the Inline campaign key inside the Custom HTML editor.</p></figcaption></figure>

***

## 7. Test the Inline Campaign End to End

1. Use a test audience in WebEngage.
2. Activate or preview the WebEngage campaign for that audience.
3. Open the app screen that contains the `home_carousel` slot.
4. Trigger the event from a test device.
5. Confirm the carousel appears inside the correct slot.
6. Swipe through all carousel items.
7. Tap any configured item action and confirm it performs the expected action.

<figure><img src="/files/FNvG1TxzV17HUr2cFciG" alt="WebEngage Test Campaign step"><figcaption><p>Use WebEngage's Test Campaign step to send the Inline campaign to a test segment before launch.</p></figcaption></figure>

### If the Inline campaign does not appear, check:

| What to check                                      | Why it matters                                             |
| -------------------------------------------------- | ---------------------------------------------------------- |
| The Digia campaign is active                       | Draft campaigns will not render                            |
| `digia_campaign_key` matches exactly               | The key is case-sensitive                                  |
| The WebEngage campaign uses **In-App Custom HTML** | The Digia plugin only receives the expected payload format |
| The app screen contains the slot                   | Inline content needs a mounted Digia slot                  |
| Slot key matches exactly                           | A typo prevents the carousel from rendering                |

{% hint style="info" %}
WebEngage can sometimes take time to start delivering a newly activated campaign. If the campaign still does not appear after your usual campaign propagation window, reach out to Digia support.
{% endhint %}

***

## Launch Checklist

* Digia Inline campaign is active.
* WebEngage campaign uses **In-App Custom HTML**.
* `digia_campaign_key` matches the Digia campaign key.
* Slot key matches the app team's placement key.
* The slot exists on the screen where WebEngage will trigger the campaign.
* Audience and trigger rules are correct in WebEngage.
* The carousel was tested on at least one real device.