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:

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