Theming & Customization
Customize your widget's colors, fonts, icons, and behavior to match your brand.
Make the tahc widget feel like a natural part of your website with comprehensive theming options.
Accessing the Theme Editor
In your dashboard, go to Widget in the left sidebar.
Click Create Theme or click the edit icon on an existing theme.
Make your changes and click Create Theme or Update Theme.
Quick Start: Brand Extraction
The fastest way to create a matching theme:
- Go to Widget > Themes
- Enter your website URL in the "Quick Start" section
- Click Extract
- tahc will automatically detect your brand colors and create a theme
Brand extraction analyzes your website's CSS to find your primary colors, ensuring a perfect match.
Appearance Settings
Colors
| Setting | Description |
|---|---|
| Primary Color | Main brand color (buttons, header, links) |
| Background | Widget background color |
| Text Color | Main text color |
| Border Color | Widget border color |
| Header Text | Text color in the widget header |
Position
Choose where the widget appears:
- Bottom Right — Most common, standard chat position
- Bottom Left — Alternative corner placement
- Side Right — Vertical tab on right edge
- Side Left — Vertical tab on left edge
Launcher Shape
The chat bubble can be:
- Circle — Classic round button
- Rounded Square — Softer square shape
- Capsule — Pill-shaped button
Chat Icons
Choose from three built-in icon styles:
- Chat Bubble — Single message bubble with dots
- Double Chat — Two overlapping bubbles (filled)
- Outline Chat — Two overlapping bubbles (outlined)
You can also customize icon colors independently from the theme.
Border & Shadow
Control the widget's visual depth:
- Show Border — Toggle the border on/off
- Border Width — 1-10 pixels
- Border Radius — Corner roundness (0-50 pixels)
- Shadow — None, Small, Medium, or Large
Typography
- Font Family — System fonts, Inter, or Manrope
- Text Scale — Compact, Base, or Comfortable
Animation
The launcher button can animate to attract attention:
- None — Static button
- Pulse — Subtle pulsing effect
- Bounce — Gentle bounce
- Slide — Slide-in animation
All animations respect the user's "reduce motion" preference for accessibility.
Persona Settings
Greeting Message
The first message visitors see when opening the widget:
- Default: "How can I help you today?"
- Customize to match your brand voice
Offline Greeting
Shown when human agents aren't available:
- Example: "We're away right now, but our AI can help!"
AI Tone
Set how the AI communicates:
| Tone | Description |
|---|---|
| Concise | Short, to-the-point responses |
| Helpful | Balanced, informative answers |
| Friendly | Warm, conversational style |
| Professional | Formal, business-appropriate |
Emoji
Enable or disable emoji in AI responses.
Handoff Label
Customize the text for the human handoff button:
- Default: "Talk to a person"
- Examples: "Speak with an agent", "Get human help"
AI Avatar
Choose an avatar image for AI responses:
- Blue Face — Friendly robot illustration
- Pro Woman — Professional female avatar
- Pro Man — Professional male avatar
Customize the avatar's background color to match your brand.
Behavior Settings
Trigger Type
Control how the widget opens:
| Trigger | Description |
|---|---|
| Manual | Opens only when clicked |
| Time on Page | Auto-opens after X seconds |
| Exit Intent | Opens when user moves to leave |
| Selector | Opens when clicking a specific element |
Handoff Confidence
Set the AI confidence threshold for offering human help (0-1):
- Lower values (0.3-0.5): AI offers human help more often
- Higher values (0.6-0.8): AI is more confident before escalating
Accessibility
- Focus Rings — Show focus indicators for keyboard navigation
- Minimum Contrast — AA (4.5:1) or AAA (7:1) contrast ratio
If your colors don't meet the contrast requirement, you'll see a warning. Consider adjusting colors for better accessibility.
Managing Multiple Themes
You can create multiple themes for different purposes:
- Default Theme — Your main brand theme
- Holiday Theme — Seasonal variations
- A/B Testing — Test different styles
To switch themes:
- Go to Widget > Themes
- Find the theme you want to use
- Click Activate
Only one theme can be active at a time.
Previewing Your Widget
Before going live:
- Create or edit your theme
- Click the Preview icon on any theme
- See the widget in action on a demo page
- Make adjustments as needed
Allowed Domains
For security, the widget only loads on whitelisted domains:
- Go to Widget > Allowed Domains
- Add each domain where you'll use the widget
- Include variations (with/without www, subdomains)
Without an allowed domain, the widget won't load on your site.
Next Steps
Was this helpful?