DocsWidget Design

Widget Design

Colors, logo, position, hero image, dark mode and quick replies — all in one place under Dashboard → Design, with a live preview and no new code embed.

Where to customize the design

All widget options live in the Dashboard under Design. There you change the look of the web chat widget you embedded via snippet — the code line on your site stays unchanged. Saving publishes the change instantly; re-embedding is never required.

Auto-branding during onboarding. When you first set things up, Alpheris crawls your domain and detects your brand color automatically (detected_primary_color). As long as you don't override the primary color yourself, this detected color is used as the default. Everything can be fine-tuned afterward in the Design area.

Presets

Every widget is based on a preset that defines the base theme. There are four presets — a light and a dark variant per style:

Preset	Value	Character
Modern light	`modern`	White panel, soft shadows, accent color — default
Modern dark	`modern_dark`	Dark panel, light text
Enterprise light	`enterprise`	Pared-down, businesslike style
Enterprise dark	`enterprise_dark`	Enterprise style on a dark background

The preset only defines the starting point. Individual colors (panel, bot, user, input and button colors) can also be freely overridden — see the next section.

Colors

The most important setting is the primary color (primary_color, default #0ea5e9). It sets the accent for the bubble, buttons and highlights. For finer tuning, you can additionally set the following color groups individually:

Background & text — panel background and global text color
Bot bubble — background and text of the AI replies
User bubble — background and text of the customer messages
Input field — background and text of the text field
Send button — background and text
Chips / quick replies — background and text of the suggestion buttons

You enter colors as hex values. If you leave a detail color empty, the widget derives it sensibly from the preset and primary color.

Logo & Avatar

You can upload your own logo, which appears in the header of the chat panel. The avatar accompanies the bot replies and is an emoji by default (💬); you can replace it with a different emoji or an image.

Logo branding is available on all plans — including the Basic plan. It is not tied to any particular plan or preset.

Position & Size

The widget is anchored in a bottom corner of the screen. You choose the side and the size of the bubble:

Option	Values	Default
Position	`right` (bottom right) / `left` (bottom left)	bottom right
Bubble size	`small` / `medium` / `large`	large

Other corners (top left/right) or a free pixel offset are not currently supported — the widget always anchors to the bottom left or bottom right.

Hero Image

In the welcome area of the widget (the "Home" view, before the chat starts) you can upload a hero image. It serves as a banner above the welcome text and quick replies and gives the widget your brand look right away. Additionally, you can set a welcome title and subtitle.

The full welcome/home view with a hero image belongs to the modern layout (modern / modern_dark). In the Enterprise preset the presentation is deliberately pared down.

Dark Mode

In addition to the dark presets, there is a standalone dark mode switch that works independently of the preset. You control how the widget adapts to the visitor's theme:

Mode	Value	Behavior
Automatic	`auto`	Follows the visitor's system/browser setting (default)
Always dark	`on`	Dark mode forced
Always light	`off`	Dark mode off

In the preview you can toggle dark mode directly to check both variants — the live preview uses the force_dark parameter for this.

Quick Replies

Quick replies are pre-written suggestion buttons the visitor can tap in the welcome view instead of typing themselves — for example "Shipping & delivery time" or "Returns". They lower the barrier to entry and steer toward common concerns.

The quick selection can be shown or hidden per widget (show_quick_selection).
You maintain your own suggestions as categories with a label and associated text/payload.
If no custom quick replies are set, Alpheris proposes sensible default suggestions.

Keep quick replies short and concrete. Three to six well-chosen suggestions work better than a long list.

"Powered by Alpheris" notice

By default the widget shows a subtle "Powered by Alpheris" notice. Whether you're allowed to hide it depends on your plan:

Plan	Notice hideable?
Free / Basic	No — the notice always stays active
Business	Only with the branding add-on (€11/month)
Enterprise	Yes — already included

In the Design area you'll find the show_powered_by switch. If you lack the permission, it is locked and the notice remains enforced server-side — even if the switch were manipulated client-side, it is re-enabled on save.

You activate the branding add-on on the Business plan via billing. More on this under Plans & Billing.

Live Preview & Saving

Open Dashboard → Design

On the right, the real widget runs as a preview with your current settings.

Change colors, logo, position & more

Every change is rendered in the preview immediately — including dark mode toggling.

Save

The change is published live. It appears on your website without re-embedding the snippet.

If you don't see a change on your site right away, it's usually due to the browser or CDN cache. A hard reload (Ctrl/Cmd + Shift + R) shows the current state. The embed snippet stays unchanged:

HTML

<!-- Alpheris Chat Widget -->
<script src="https://alpheris.com/widget.js" data-alpheris-key="INSTALL_ID" crossorigin="anonymous" async></script>
<!-- End Alpheris Chat Widget -->

The exact embedding is explained on the Widget Code page; you'll find your personal INSTALL_ID in the Dashboard.