# Help customers see it. Then act on it. Product: Cards & artifacts Turn tool results into clear, branded cards. Present products, services and appointment options in a format customers can compare and act on. Interactive product examples use illustrative data; changes remain on the page. ## One layout. The right details for each request. A customer asks which service fits their needs. Use the returned options to create a consistent presentation, with a useful destination for each choice. ### Design the card Arrange headings, images, text, badges and link buttons in the visual editor. Set the spacing, typography and color around your brand. ### Connect the data Map the template’s fields to the tool response. Apply the same layout to individual results or items in a returned list. ### Guide the next action Preview the populated card and give its link a clear purpose, such as viewing service details or opening a booking destination. ## Make the answer easier to use. ### Present a useful comparison Keep the same fields in the same place across options, so customers can find the differences that matter. ### Reuse the design Create the template once and populate it with the data returned for each request, including mapped lists and nested values. ### Give the conversation a destination Connect a visual recommendation to a relevant page or next step instead of leaving the customer with another block of text. ## Design for the data and the delivery channel. Card Builder is currently a preview. Confirm the account and channel experience for the deployment you have in mind. ### Use source-backed values Prices and availability come from the connected tool. Distinguish an available option from a confirmed booking and handle empty fields deliberately. ### Match the channel Web cards support link buttons. Supported messaging paths deliver images or image links; a button drawn in an image is not interactive. ### Keep the action in its system Give each link a clear destination. Complete bookings, payments and other transactions through the connected tool or the system that owns the action. ## Product capabilities and architecture Assistable Card Builder turns an eligible tool’s response into reusable visual artifacts for customer conversations. Your team designs the template and maps its variables to returned fields. The tool supplies the information; the card gives it a consistent presentation. ### Your data. A presentation designed by you. ### Visual template editor Compose headings, text, images, badges and link buttons with rows, stacks and dividers. Adjust width, spacing, typography, colors and corners in the editor. ### Mapped dynamic values Connect variables to tool-response fields, including nested data. Reuse the layout while each customer receives the information returned for their request. ### Lists of recommendations Apply a template to each item in a mapped result list. The web widget can display up to ten cards from one tool result. ### Delivery for the channel Web-widget cards support link buttons. Supported HighLevel messaging paths deliver rendered images, while SMS provides an image link. ### Business data stays separate from visual design. The connected system supplies the result. The template makes it clear to the customer. ### A reusable presentation layer Change the design without rebuilding the integration. Field mappings connect the template to returned values. ### One source for changing facts Prices, availability and listing details come from the tool; the template determines their presentation. ### Explanation and structure together The agent explains the recommendation while the card keeps key details and the destination visible. ## Operating controls and references ### A clear design should communicate a clear state. Present options, estimates and confirmed results accurately, with only the information appropriate for the customer. ### Show the result the source supports Use clear labels for an option versus a confirmed booking. Handle empty fields and unavailable values without turning missing information into a promise. ### Give links a defined purpose A card button opens a destination. Booking, checkout and other transactions are completed by the connected tool or destination system. ### Match the channel experience Images are useful for presentation but do not contain interactive buttons. Plan the associated link or follow-up action around the delivery format. - [Read the complete Card Builder guide](https://www.assistable.ai/blog/ai-card-builder) - [Connect a custom business tool](https://docs.assistable.ai/build/custom-tools/overview) - [Watch website chat configuration](https://www.assistable.ai/resources/website-chat-agent) ## Connect the next part of your workflow. - [Chat AI](https://www.assistable.ai/solutions/chat-ai): Qualify, book and support through customer messaging. - [Tooling](https://www.assistable.ai/solutions/tooling): Connect conversations to calendars, records and APIs. - [Widgets](https://www.assistable.ai/solutions/widgets): Turn website visitors into conversations and inquiries. ## Cards & artifacts questions. ### What are configurable AI artifacts? They are structured visual outputs for an AI conversation. Assistable Card Builder combines reusable templates with mapped tool data to present products, services and other results in supported channels. ### Can a card show current prices or availability? Yes, when the connected tool returns those values. Their freshness comes from the source and integration; the template itself is not a live database or a data connector. ### Are buttons interactive in every channel? Web-widget cards support link buttons. Supported messaging paths use PNG images or image links, so a button drawn in an image is not clickable. Use an appropriate accompanying link for the next action. ### Is Card Builder available for our deployment? Card templates are currently presented as preview. Confirm account and channel availability with our team. Web cards are not currently restored when an earlier widget session is reopened; the current button opens a link rather than executing a tool or native checkout. ## Give your best answer a better presentation. Bring an example of what customers need to compare. We’ll map the card, its source data and the next action into the conversation. [Talk to sales](https://www.assistable.ai/contact) Source: https://www.assistable.ai/solutions/cards-and-artifacts