Build the cards, forms and slot pickers a Ringg AI agent shows inside a web chat: describe one in plain words, edit its blocks, then mention it in the prompt.
The visitor acts on a component in the thread, and what they tap or type goes back to the agent. Build one when the agent needs structured input or has to show more than a sentence.In the dashboard: Assistants → your agent → Embed & Widgets → Components. If your agent has no Components tab, contact Ringg.
Click New component. Everything you build is listed on this tab; agents that still have fixed-purpose widgets also see them below, under Legacy widgets.
Embed & Widgets → Components → New component.
2
Pick a starting point
Six templates ship with the builder: Start blank, Plan comparison, Lead form, Info card, Calendar slots and Quick actions. Picking one opens the builder; every block, label, colour and action stays editable.
Choosing Start blank opens the builder on an empty canvas.
3
Describe what you need
The Chat panel builds the component from a plain-English description:
Create a family member detail collection form that collects full name,age, city and relationship for one member at a time, with a submit button
To build from a design instead, use Add an image or screenshot: up to three PNG, JPEG or WebP images.
Typing the description, sending it, and the component being built (build fast-forwarded).
4
Save it, then use it in the agent
Check it collects what you asked for, set Name (the mention token is shown beneath it), then click Save.Save before you edit the prompt: the @ menu offers only saved, enabled components. Type @ where the component should appear and pick it under Chat Components; it inserts as a mention chip.
When the user agrees to add dependants, show @[[family_member_details_form]]and collect one member at a time.
The token comes from the name: lowercased, each run of characters outside a-z0-9 turned into one _, leading and trailing _ dropped, cut to 48 characters. A component created from a template whose name is taken gets a number (lead_form_2); a duplicated one gets _copy.
Saving the component, then inserting its mention in the agent's prompt from the @ menu.
5
Tune any block by hand
Open the Blocks panel and select any block; its inspector opens on the right. In the video, the City input goes to 50% width and its label becomes “Current city”. The preview updates as you type.
Selecting the City input, then editing its width and label.
6
Keep iterating in chat
Back in Chat, ask for a change such as “Add one more button for adding new member” and it edits the existing component. Switch between chat and hand-editing freely, then Save.
A follow-up instruction editing the existing component (rebuild fast-forwarded).
Use chat for structure (“a card with an image, three facts and two buttons”) and the inspector for exact values such as a width or an Action ID. The preview switches between Component and In chat, and Interact lets you click through it on sample data; real values arrive during the conversation.
Send agent text with widget is off by default, so the component is sent on its own, which reads better in chat. Turn it on to let the agent add a sentence alongside it.
width is a percentage of the parent (0 to 100). height, font_size, gap and padding are pixels.A button with no width set fills its parent, so two buttons side by side need explicit widths. Put them in a Stack set to horizontal and give each 50.
To show a block only for some answers, give it a condition on an input’s value: eq, ne, in, gt, lt or truthy. Combine several in one all or any group; groups don’t nest.To repeat a block over a list, point it at an array binding. It renders once per item, with the item under an alias you choose, plus its index:
source ${{api_res.plans}}as planmax_items 20
Inside the repeated block, ${{plan.name}} and ${{plan_index}} resolve per item. max_items accepts 1 to 50 and defaults to 20. Give repeated inputs a bound name such as qty_${{item.id}}, so each copy submits under its own key.
Save it in the builder and check its switch on the Components tab, then type @ again.
Can I delete a component the prompt still mentions?
No. Ringg refuses to delete or turn off a component the prompt still mentions, with “Remove tool references from the prompt before deleting the tool.” Remove the mention from the prompt first.
Does it work on the 1.0 CDN version?
No; see Pick a CDN version. The React Native and Flutter packages render them natively.
