Customize widget colors and position

Widget Updated Jun 8, 2026

The widget reads styling from two places: your dashboard (the defaults for every page) and data-* attributes on the <script> tag (per-page overrides).

Dashboard defaults

Open your site in the dashboard and set:

Accent color — the bubble and header background.
Foreground color — the text on the accent.
Position — bottom-right (default) or bottom-left.
Greeting — first message the bot sends.

Save and reload your page. Cached widget scripts pick up new styles within a minute.

Per-page overrides

If one landing page needs a different look, override on the embed tag:

<script src="https://247ch.at/w.js"
        data-site="YOUR_SITE_ID"
        data-accent="#7c3aed"
        data-position="bottom-left"
        data-greeting="Hi! Need help picking a plan?"></script>

Supported attributes: data-accent, data-fg, data-position, data-greeting, data-hide-on (CSS selector — page won't show the widget if it matches).