Documentation

Home Screen Cards

Cards are the interactive building blocks of your home screen. Each card serves a different purpose — from starting a conversation to browsing help articles or opening a form. You add, remove and reorder them on the Chat widget's Home tab.

Overview

Cards are the interactive building blocks of your home screen. Each card serves a different purpose — from starting a conversation to browsing help articles or opening a form. You can add, remove, and reorder cards from Brand → Chat widget → Home.

Cards appear stacked vertically in the exact order you arrange them in the dashboard.

Card Types

Four of the eight types depend on what your account includes: Form / Bug Report needs Tickets, Help Articles needs the knowledge base, Documentation needs the paid Documentation module, and Latest News needs News. A type you don't have still appears in the Add Card picker, but greyed out and unclickable, with "Not included in your plan" under it. Help Articles and Documentation are greyed the same way until the brand actually publishes a knowledge base or a documentation set — the picker then reads "Requires Knowledge Base" or "Requires Documentation".

ASK (AI Assistant)

The ASK card is an interactive input field with an animated "Ask me anything..." placeholder that types out character by character. Visitors can type a question directly and press Enter to start a conversation.

Below the input, you can add quick action buttons — small pill-shaped shortcuts that visitors can tap instead of typing.

Each button has a type:

  • Send Message — sends a pre-written message and opens the chat
  • Open Link — opens an external URL in a new tab
  • Open Form — opens a specific form inside the widget
  • Open Article — opens one of your knowledge base articles in the widget
  • Open News Article — opens a news post in the widget
  • Open Documentation — opens your documentation portal in a new browser tab

The last four are tied to the same paid features as the cards above, but they behave differently in the editor: a type your account doesn't include is left out of the list entirely instead of being greyed out.

Quick action buttons are great for common questions. Add buttons like "Pricing", "Demo", or "Report a bug" to help visitors get to the right place in one click.

ACTIVE_CHAT

The Active Chat card only appears when the visitor has an ongoing conversation. It shows:

  • The last message preview (text or "Attachment" for files)
  • The agent's avatar and name (or "You" if the visitor sent the last message)
  • A relative timestamp ("just now", "5 minutes ago")
  • A pulsing red dot when there are unread messages

Clicking the card takes the visitor straight back to the chat.

This card is hidden automatically when there are no messages. You don't need to manage its visibility — just add it to your card list and it handles the rest.

HELP (Knowledge Base Articles)

The HELP card displays a search bar and a list of knowledge base articles. Visitors can browse articles directly from the home screen or tap the search bar to jump to the full knowledge base.

Article selection:

  • The articles come from the knowledge base your brand publishes on its public web address, which is chosen on Brand → Knowledge. There is no per-widget knowledge base to pick.
  • By default the card shows the first 4 published articles (sorted by weight); you can instead select specific articles on the Home tab to curate what appears.

Clicking an article opens it in the widget's knowledge base view.

DOCS (Documentation)

The Documentation card is a shortcut to your brand's public documentation portal. Clicking it opens that portal, at the brand's own web address, in a new browser tab.

What you configure:

  • A Title and a Description, exactly like the Message and Link cards
  • A Documentation picker listing the documentation sets in your organisation

The card shows a book icon that transitions to a chevron on hover.

NEWS

The NEWS card displays recent news articles as rich preview cards with optional hero images, a title, and a content snippet.

Article selection:

  • By default, the card shows the 2 most recent news articles
  • You can manually select specific news articles in the dashboard

Clicking a news card opens the full article in the widget's news section.

MESSAGE

A simple card with a title and description that opens the chat when clicked. Use it as a direct "talk to us" call-to-action.

Default text:

  • Title: "Send us a message"
  • Description: "We typically reply in under 5 minutes."

The card shows a chat bubble icon that transitions to a chevron on hover.

LINK

An external link card with a title and description. Clicking it opens the URL in a new browser tab.

Use this for linking to external resources like documentation, your main website, booking pages, or anything outside the widget.

The card shows a link icon that transitions to a chevron on hover.

FORM

A card that opens a specific form when clicked. Forms belong to the ticket board they feed, so you build them at Tickets → (board) → Forms — bug reports, feature requests, contact forms, surveys, and more. Every form in your organisation is offered in the card's picker.

Form icon options:

IconUse Case
Document (default)General forms
BugBug reports
MapLocation or roadmap feedback
Light bulbFeature requests, ideas

The icon is configurable per card in the dashboard settings.

Card Styling

All cards share a consistent visual style:

  • Semi-transparent background using your Dimmed Bg color
  • Subtle border using your Decorations color
  • Rounded corners and a soft shadow
  • Hover effect that lifts the card slightly upward
  • Icon animation on hover — the card's icon smoothly swaps to a chevron arrow

Adding and Reordering Cards

Open the Chat widget

Go to Brand → Chat widget → Home.

Add a card

Click Add Card and select a card type from the dropdown. Configure its title, description, and type-specific options.

Reorder cards

Drag and drop cards to change their order. The top-to-bottom order in the settings is the exact order visitors see on the home screen.

Remove a card

Click the delete button on any card to remove it from the home screen.

Default Cards

A brand's chat widget starts with two cards already in place:

  1. ASK — with two quick action buttons: "How does it work?" and "Talk to a human"
  2. ACTIVE_CHAT — the shortcut back into an ongoing conversation

Nothing else is added for you, and you can freely modify, reorder, or remove both of them.