Skip to main content

Callout Blocks

Callout blocks draw attention to important information. Use them for tips, warnings, notes, and other content that should stand out.

Adding Callouts​

Using the Block Picker​

  1. Click + → Callout
  2. Choose a callout type
  3. Enter your content

Using Slash Commands​

  1. Type /callout
  2. Press Enter
  3. Select the callout type

Converting Text​

  1. Select a text block
  2. Click ⋮ → Turn into Callout
  3. Choose the type

Callout Types​

Info​

Blue callout for general information.

  • Additional context
  • Helpful explanations
  • Related details

Tip​

Green callout for helpful suggestions.

  • Best practices
  • Pro tips
  • Recommendations

Warning​

Yellow/orange callout for cautions.

  • Important considerations
  • Potential issues
  • Things to watch out for

Danger​

Red callout for critical warnings.

  • Breaking changes
  • Security concerns
  • Irreversible actions

Note​

Gray callout for side information.

  • Footnotes
  • Asides
  • Secondary details

Success​

Green callout for positive confirmations.

  • Completed steps
  • Achievements
  • Successful outcomes

Customizing Callouts​

Title​

Add a title to any callout:

  1. Click the title area (or where it says "Title")
  2. Type your title
  3. Click outside to save

Leave blank for no title.

Icon​

Change the callout icon:

  1. Click the icon on the left
  2. Choose from available icons
  3. Or select "No icon" to hide

Color​

Customize the callout color (Pro feature):

  1. Click ⋮ → Change Color
  2. Select from preset colors
  3. Or enter a custom hex code

Content in Callouts​

Callouts support rich content:

Text Formatting​

  • Bold, italic, underline
  • Headings (though typically avoid H1 in callouts)
  • Lists (bullet, numbered, checklist)
  • Links

Inline Content​

  • Code snippets
  • Inline images (coming soon)
  • Emojis

What's Not Supported​

  • Nested callouts
  • File attachments (use separate file blocks)
  • Full images (use image blocks)

Collapsible Callouts​

Make callouts expandable:

  1. Click ⋮ → Make Collapsible
  2. Callout now has expand/collapse toggle
  3. Set default state (expanded or collapsed)

Collapsible callouts are great for:

  • FAQ items
  • Optional details
  • Long content that might overwhelm

Examples​

Tip Callout​

💡 Tip: Quick Scanning

For fastest scanning, ensure your QR code is at least
2cm × 2cm and has good lighting.

Warning Callout​

⚠️ Warning: Data Loss

Deleting a tag permanently removes all content and
analytics. This action cannot be undone.

Info Callout​

ℹ️ Note

This feature requires a Pro subscription.
Learn more about upgrading.

Collapsible FAQ​

❓ How do I reset my password? (click to expand)

1. Go to the login page
2. Click "Forgot Password"
3. Enter your email
4. Check your inbox for reset link

When to Use Callouts​

Good Uses​

  • Important warnings before actions
  • Helpful tips that improve experience
  • Notes about requirements or limitations
  • Success confirmations after completing steps

Avoid Overuse​

  • Don't make everything a callout
  • They lose impact when overused
  • Reserve for truly important information
  • One or two per section is usually enough

Styling Guidelines​

Keep Content Concise​

  • Callouts should be brief
  • One main point per callout
  • Link to more details if needed

Choose Appropriate Types​

  • Match the type to your message
  • Don't use "Danger" for minor notes
  • Don't use "Info" for critical warnings

Position Strategically​

  • Before the relevant action
  • At natural pause points
  • Where users might need guidance

Converting Callouts​

To Text Block​

  1. Click ⋮ → Turn into Text
  2. Content becomes regular text
  3. Formatting is preserved

Between Types​

  1. Click ⋮ → Change Type
  2. Select new callout type
  3. Content is preserved

Accessibility​

Callouts are designed with accessibility in mind:

  • Semantic markup for screen readers
  • Color is not the only indicator
  • Icons provide visual cues
  • High contrast color schemes

Troubleshooting​

Callout Not Appearing Correctly​

  1. Refresh the page
  2. Check for browser compatibility
  3. Try a different browser

Content Not Saving​

  1. Ensure you've clicked outside the callout
  2. Wait for auto-save indicator
  3. Check internet connection

Can't Change Type​

  1. Verify you have edit permission
  2. Try clicking the ⋮ menu again
  3. Refresh and try again

Next Steps​