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

# In-App Messages

> Deliver targeted modals and banners to users via campaigns.

## Overview

In-app messages are modals rendered **in the host page** (outside the widget iframe). They are triggered by campaign workflows and delivered via the widget's postMessage bridge.

## How it works

```
1. Campaign workflow targets a segment of users
2. When a matching user is active, the widget receives the message
3. Widget sends hacktionbase:show_modal to the SDK
4. SDK renders a modal overlay on the host page
5. User interacts with or dismisses the modal
6. SDK sends hacktionbase:modal_closed back to the widget
```

## Message format

In-app messages support the following fields:

| Field              | Type                     | Description                                                                                |
| ------------------ | ------------------------ | ------------------------------------------------------------------------------------------ |
| `title`            | `string`                 | Modal title (required)                                                                     |
| `body`             | `string`                 | Message body text                                                                          |
| `imageUrl`         | `string`                 | Header image URL                                                                           |
| `videoUrl`         | `string`                 | Embedded video URL                                                                         |
| `ctaLabel`         | `string`                 | Call-to-action button label                                                                |
| `ctaUrl`           | `string`                 | CTA button link                                                                            |
| `senderName`       | `string`                 | Sender's display name                                                                      |
| `senderPictureUrl` | `string`                 | Sender's avatar URL                                                                        |
| `size`             | `'sm' \| 'md' \| 'full'` | Modal size                                                                                 |
| `position`         | `string`                 | Modal position: `'center'`, `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'` |
| `backdrop`         | `boolean`                | Show a backdrop overlay behind the modal                                                   |
| `steps`            | `ModalStep[]`            | Multi-step carousel (each step has title, body, optional image/video)                      |

## Sizing

| Size   | Description                                                       |
| ------ | ----------------------------------------------------------------- |
| `sm`   | Compact modal — ideal for quick announcements                     |
| `md`   | Medium modal — good for feature highlights                        |
| `full` | Full-screen overlay — for onboarding flows or major announcements |

## Multi-step messages

Use the `steps` array to create a carousel-style modal:

```json theme={null}
{
  "title": "What's New",
  "size": "md",
  "position": "center",
  "backdrop": true,
  "steps": [
    {
      "title": "New Dashboard",
      "body": "We've redesigned the dashboard for better insights.",
      "imageUrl": "https://example.com/dashboard.png"
    },
    {
      "title": "Session Replay",
      "body": "Watch user sessions to debug issues faster.",
      "imageUrl": "https://example.com/replay.png"
    }
  ]
}
```

## Creating campaigns

In-app messages are configured in the **Campaigns** section of the dashboard. You can:

* Target specific user segments
* Set delivery timing and frequency
* A/B test message content
* Track impressions and CTA clicks