Introducing Card Builder: turn AI answers into branded cards.

What can you customize with Card Builder?

In your Assistable account, open Card templates. Its drag-and-drop editor includes headings, text, images, badges, and link buttons, with stacks, rows, and dividers to organize them. Adjust the card’s width, background, spacing, and corners, then tune typography and colors inside each block.

Use variables such as {{name}}, {{price}}, and {{image_url}} wherever a value should come from the tool result. A field mapping connects each variable to a response path. The same template can display different results without your team redesigning the card for every conversation.

This makes the card configurable in two separate ways: its visual structure belongs to the template, while its content comes from the connected tool. You can reuse a template across several eligible tools. Each tool uses one connected template within its account.

When should an AI answer become a card?

Use text for explanation, nuance, and follow-up questions. Use a card when the customer needs to recognize an item, compare a few important fields, or find a clear next step. They work well together.

Card Builder controls presentation. Your connected booking, checkout, or business tool handles the underlying action, and the card displays the result it returns. Keep the heading clear about whether you are showing an option or a completed action.

Four useful ways to put cards to work

How to build and connect an AI card

Start with one customer decision and one real tool response. A small card with the right information is easier to review than a template trying to display every available field.

1. Create the template

   Open Card templates and choose New template. Arrange the blocks in the visual editor. Give the important fields a clear hierarchy, set your colors and spacing, and use a specific link label that tells the customer what happens next.

2. Add the dynamic values

   Place {{variables}} in the fields that should change between results. For a product card, these might include name, image URL, price, and destination URL. Keep labels and supporting copy fixed when they should stay consistent.

3. Save and connect a tool

   Use Publish to save the template, then choose Connect to tool. Select an eligible tool and paste a sample JSON response to inspect the available fields. That sample supports configuration and preview; it does not execute the tool.

4. Map fields and lists

   Map each variable to the matching response field, including nested paths when needed. If the response contains several results, set the list path so each item uses the template. Review missing fields, long names, images, and destination links before choosing Save connection.

5. Test the customer experience

   Run the real workflow in your intended channel. Check both the agent’s reply and the rendered card, including how the result handles empty data. Confirm links reach the right destination and that image-based delivery still makes sense without interactive buttons.

How cards appear across channels

Design for the place your customer will see the card. The web chat widget displays a card within the conversation, while supported HighLevel messaging paths use images. That difference changes how you present the next step.

Check the experience in your intended channel, including image readability and action links, before rolling a template out to customers. For other deployments, talk with our team about channel support.