SettingsChat Widget

Chat Widget

Configure the appearance, behavior, and tracking of your website chat widget.

The Chat Widget settings allow you to customize how the Autoch.at widget looks and behaves on your website. You can adjust colors, text, launcher styles, contact collection requirements, and proactive messaging to match your brand.

Widget Configuration

These settings control the visual appearance and initial behavior of the widget on your website.

Launcher Style

Choose how the widget button appears when closed:

  • Floating circle: A standard circular button in the corner of the screen.
  • Bottom-right bar: A wide rectangular bar docked to the bottom right.
  • Centre-left bar: A vertical rectangular bar docked to the middle left of the screen.

Launcher Content

Control what is displayed inside the launcher button:

  • Icon only: Shows only the chat icon.
  • Text only: Shows only the text label.
  • Icon + text: Shows both the icon and the text label.

When using Text only or Icon + text, you can customize the text using the Launcher Text field (e.g., "Chat with us").

Theme and Colors

  • Theme: Choose between Light and Dark mode for the widget interface.
  • Widget Color: The primary accent color used for the widget button, highlights, and active states. Enter a hex code (e.g., #3B82F6) or use the color picker to match your brand.
  • Header Font Colour: The color of the company name text in the open widget header. This is useful if your widget color is light and you need dark text for contrast.

Contact Information

Choose what information visitors must provide before they can start a chat. This helps you capture leads and follow up with users later.

  • Name only: Visitors only need to provide their name.
  • Name and email: Visitors must provide their name and email address.
  • Name and phone number: Visitors must provide their name and phone number.
  • Name, email, and phone number: Visitors must provide all three fields.

Name is always collected. Email and phone are optional depending on this setting. The widget will prompt the user for this information before they can send their first message.

Branding and Images

  • Greeting Message: The default message shown at the top of the chat window before a conversation starts.
  • Avatar URL: An optional image URL for the AI assistant's avatar.
  • Header Icon URL: An optional image URL for the icon shown in the widget header.
  • Header Wordmark URL: An optional image URL for a full logo/wordmark in the header. If provided, this replaces the text-based company name.

White Labeling

If your workspace has the White Label add-on enabled, you can check the Hide "Powered by" disclaimer box to remove the Autoch.at branding from the bottom of the widget.

We recommend keeping a disclaimer on AI-assisted experiences for transparency and compliance. You are responsible for any disclosure obligations in your jurisdiction.

Proactive Messaging

Proactive messaging allows you to show a message bubble above the chat launcher when visitors meet certain conditions. Clicking the bubble opens the chat with your message.

To use this feature, toggle Enable proactive messaging.

Message Template

This is the text shown in the proactive bubble above the launcher. If the visitor clicks the bubble to open the chat, this text will appear as the first message from the assistant.

Triggers

Configure when the proactive bubble should appear:

  • Time on page: Show the bubble after the visitor has been on the page for a specific number of seconds.

  • Scroll depth: Show the bubble after the visitor scrolls down a certain percentage of the page (e.g., 50%).

  • Custom events: Trigger the bubble when a user interacts with specific elements on your site. You can add multiple events based on:

    • Hover: When the user hovers over an element.
    • Click: When the user clicks an element.
    • Focus: When the user focuses on an input field.

    For custom events, provide the CSS selector of the target element (e.g., #pricing-button or .cta-link).

By default, proactive messages are set to Show only once per session to prevent annoying visitors with repeated popups. You can disable this if you want the bubble to trigger multiple times.

Allowed Domains

For security, the widget will only load on domains you explicitly authorize.

  1. Enter your website domain (e.g., example.com).
  2. Click Add Domain.
  3. The widget will now function on that domain and any of its subdomains.

Embed Code

Once you have configured your widget and added your allowed domains, click Generate token to create your unique embed code.

Copy this code snippet and paste it into the <head> or <body> of your website's HTML.

Tracking Integrations

The Tracking tab allows you to connect your chat widget to external analytics platforms.

  • Google Analytics (GA4): Enter your Measurement ID (e.g., G-XXXXXXXXXX) to send chat events to GA4.
  • Meta Pixel: Enter your Pixel ID to send chat events to Facebook/Meta.
  • PostHog: Enter your PostHog API Key and Host URL to track widget interactions.

When enabled, the widget automatically fires events for actions like opening the widget, starting a conversation, and completing a goal.

Was this page helpful?