Appearance

Control how the voice button looks on your website.

Before you begin

• Open your agent in the Babelbeez dashboard.
• Be ready to test changes in Live Preview.

What this controls

• Background Color: the button’s fill color.
• Text/Icon Color: the headset icon and label color.
• Button Label: short text shown in the button (max 10 characters).
• Preview: a live preview shows how the button will look.

Steps

1. Open Configure Voice Agent from the left menu.
2. In Button Appearance:
   • Set a Background Color (hex or pick from the color picker).
   • Set Text/Icon Color for contrast and readability.
   • Enter a short Button Label (for example, “Try Me”).
3. Review the Preview on the right of the section.
4. Click the green Save button (bottom right) to apply your changes.
5. Test in Live Preview.

What you should see

• The button in Live Preview updates to your colors and label.
• The same styling appears on your website after you embed the agent.

Tips

• Keep contrast high so the icon is easy to see.
• Use a short label—long text may be truncated.
• Match your brand colors for a consistent look.

Troubleshooting

• My changes didn’t show up
  • Make sure you clicked the main Save button.
  • Refresh Live Preview after saving.
• The label is cut off
  • Shorten the label to 10 characters or fewer.
• The button is hard to read
  • Increase contrast between Background Color and Text/Icon Color.

Next steps

• Set tone and instructions in Agent behavior.
• Fine‑tune voice and timing in Voice and Audio.
• When ready, go to Go Live and embed on your site.