Components

The Components page holds your company's brand for the assistant's widget. You set colors, typography, the logo and a few layout choices. A live preview next to the form shows each change as you make it. Nothing reaches your customers until you publish.

What you see

• Colors and type. Brand color, Accent color, Header background, Logo position, Font family and Font URL.
• Corner radius. A slider from 0 to 28.
• Loader style. Choose Skeleton or Phrases. With Phrases you also get a Loader phrases list.
• Product card fields (commerce). Switches for image, price, badge and cta. These matter only if your company sells through the assistant.
• Empty state. Title, Body, CTA label and CTA tool.
• Brand assets. Your logo and an embedded font.
• Preview. The real widget with sample data. Tabs along the top switch between sample component types.
• The save bar at the bottom. It shows the live version, any draft version, and whether you have unsaved changes.

How to change colors and layout

1. Type a color into Brand color, Accent color or Header background. Use a hex value such as #141413. The header also accepts rgb(a) or transparent.
2. Pick Left, Center or Right under Logo position.
3. Drag the Corner radius slider.
4. Watch the preview update as you type.
5. Click Save draft to keep your work, or Publish to make it live.

How to set the font

1. Enter the font's name in Font family, for example Inter.
2. Paste a link into Font URL. A Google Fonts link, a stylesheet or a font file all work.
3. Under Brand assets, click Embed font. The font is fetched and saved with your design. The label next to the button changes to "embedded ✓".
4. If you change the Font URL later, click Re-embed font.
5. Click Publish to make the font live.

How to add your logo

1. Under Brand assets, click Upload next to Logo.
2. Choose a PNG, JPEG, WebP, GIF or SVG file.
3. The logo appears in the small preview box and in the widget preview.
4. To change it, click Replace. To take it off, click Remove.
5. Click Publish to make the logo live.

How to show phrases while the assistant works

1. Set Loader style to Phrases.
2. Type a phrase in Loader phrases and press Enter or click Add.
3. To include what the customer asked for, write {{intent}} in the phrase.
4. Remove a phrase with the × on its chip.

How to publish or undo a draft

1. Click Save draft to keep your changes without making them live. This button is active only when you have unsaved changes.
2. Click Publish to make what is in the form live for your customers. You do not need to save a draft first.
3. Click Discard draft to throw away a saved draft. This button appears only when a draft exists.

Good to know

• The logo must be an image file and roughly 300KB or smaller. Larger files are refused with a message.
• You can add up to 8 loader phrases.
• Uploading a logo or embedding a font does not change the live widget by itself. Only Publish does.