In-App Messages - Hacktionbase Docs

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

Campaign workflow targets a segment of users
When a matching user is active, the widget receives the message
Widget sends hacktionbase:show_modal to the SDK
SDK renders a modal overlay on the host page
User interacts with or dismisses the modal
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:

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