Skip to main content
This guide walks through designing a card in Card Builder, from a blank canvas to a saved template.

​
The Editor

Card Builder is organized into three areas: The top bar holds the card name, import and export, undo/redo, and Save.
Card Builder editor: the element palette on the left, the card canvas in the center, and the structure tree and properties on the right

​
1. Start a Card

When you open Card Builder, choose a starting point:
  • Template library — pick a ready-made template (Product Card, Order Confirmation, and more) and customize it.
  • Blank card — start from scratch.
The Card Builder template library, showing saved templates and ready-made templates to start from

​
2. Add Elements

Click an element in the palette to add it to your card. New elements are placed relative to your current selection — inside a selected layout element, or after the selected element. You can add content such as text, images, and buttons, and arrange them using layout elements like rows, columns, and grids. For the full list, see Elements & Actions. You can also add a component — a pre-built group of elements (for example a product card or an order timeline) — and then edit its pieces.

​
3. Arrange the Layout

By default, elements stack vertically. To change the layout:
  • Row — place elements side by side.
  • Column — group elements vertically inside a row.
  • Grid — arrange elements in a grid.
  • Carousel — let users scroll horizontally through items.
Use the structure tree in the properties panel to drag elements into a new order, nest them inside layouts, or remove them.

​
4. Style the Card

Select an element to edit its properties, or click an empty area of the card to edit the overall card style:
  • Background — set a fill color, or make it transparent.
  • Corner radius — round the card’s corners.
  • Border — add a border color and width.
  • Padding — control the spacing inside the card.

​
Light and Dark Mode

Colors are set separately for light and dark mode, so your card looks right in both. You can set a color for one mode and leave the other transparent.

​
5. Make It Interactive

Add an action to a button, icon button, link, or chip so it does something when tapped — open a URL, start a chat, send a message, make a call, and more. See Elements & Actions for the full list.

​
6. Use Variables

Insert variables — placeholders such as {{user.name}} or {{order.id}} — from the variable picker wherever you enter text or a URL. They’re filled with real values when the card is sent, so a single card personalizes for every recipient. Available variables depend on where the card is used.

​
7. Notifications (Push)

A card is a message in CometChat. When that message triggers a push notification, the push can’t show the full rich card — so the Notification tab is where you define the notification text for the message: the title and body shown in the push. A device preview shows how it will appear, and you can insert variables into the title and body so the notification is personalized per recipient.
The Notification tab in Card Builder, with a device preview showing how the push notification appears

​
8. Save

Give the card a name in the top bar and click Save. Saved cards are stored as templates so you can open them again from the template library, edit them, and reuse them.
Next: Elements & Actions — a reference of everything you can add to a card.