Modals

Modals are centered popup dialogs that capture user attention. They're ideal for important announcements, welcome messages, and feature introductions that deserve focus.

When to Use Modals

  • Welcome messages for new users

  • Feature announcements and tutorials

  • Important updates requiring acknowledgment

  • Promotional offers and upsells

  • Confirmation dialogs

  • Rich content with images and formatting

Creating a Modal

1. Start a New Modal

  1. Go to Messages in the sidebar

  2. Click New Message

  3. Select Modal

  4. Choose a template or start from scratch

2. Configure Content

Title

Write a compelling headline:

Good examples:

  • "Welcome to Cueflow!"

  • "Introducing Dark Mode"

  • "Your trial ends in 3 days"

Body

Use the rich text editor to format your message:

  • Bold and italic text

  • Colored text for emphasis

  • Headings for structure

  • Links to resources

  • Bullet points and lists

Header Image (Optional)

Add a visual to your modal:

  1. Click Upload Image or drag and drop

  2. Choose image position:

    • Top - Image bleeds to edges

    • Center - Image centered with padding

    • Bottom - Image at bottom of modal

Recommended size: 800x400px for best results.

3. Add Buttons

Primary Button

The main call-to-action:

  1. Enter button text (e.g., "Get Started")

  2. Enter destination URL

  3. Customize colors

Secondary Button (Optional)

For alternative actions:

  1. Click Add Secondary Button

  2. Enter text (e.g., "Maybe Later")

  3. Enter URL or leave empty for dismiss

4. Customize Settings

Size

Size
Width
Best For

Small

400px

Simple messages, confirmations

Medium

500px

Standard announcements (default)

Large

600px

Rich content, images, longer text

Background Color

Change the modal background to match your brand.

Dismiss Options

  • Show Close Button - X button in top-right corner

  • Close on Backdrop - Click outside to dismiss

If both options are off, users can only dismiss via button clicks.

5. Set Up Targeting

Switch to the Targeting tab.

Example: Welcome new users

Example: Upsell to free users

Learn more about targeting

6. Publish

  1. Preview on different sizes (desktop/mobile)

  2. Click Publish

  3. Modal appears to matching users

Modal Templates

Template
Use Case

Welcome Message

New user greeting

Feature Announcement

New feature intro

Upgrade Prompt

Upsell to paid plan

Feedback Request

Ask for reviews

Maintenance Notice

Important alerts

Best Practices

Content

  • One message, one purpose - Don't overload with information

  • Strong headline - Capture attention immediately

  • Clear CTA - Make the next step obvious

  • Concise body - Get to the point quickly

Design

  • Use images strategically - they should enhance, not distract

  • Ensure text is readable against backgrounds

  • Test on mobile - modals scale down

Targeting

  • Be specific - not every user needs every message

  • Consider user journey stage

  • Avoid showing too many modals

Dismissibility

  • Always provide an escape - frustrated users leave

  • Use close button for optional content

  • Reserve "no escape" for critical legal/compliance

Examples

Welcome Modal

Feature Announcement

Upgrade Prompt

Analytics

Track modal performance:

  • Views - Users who saw the modal

  • Primary Clicks - Clicked main CTA

  • Secondary Clicks - Clicked secondary button

  • Dismissals - Closed without clicking CTA

Use these metrics to optimize your messaging strategy.

PreviousBannersNextChecklists

Last updated