# Customizable Website Chat Widget | onmsg

> Embed a customizable chat widget with a one-line snippet. Control colours, fonts, placement, launcher, teaser, business hours, after-hours behaviour, and custom CSS.

URL: https://onmsg.app/features/website-chat-widget/

# A website chat widget that matches your brand

Last updated: September 8, 2026

An embeddable chat widget you install with a script snippet, then customize to match your site: colours, fonts, placement, hours, and custom CSS.

-   One-line script snippet installation
-   Colours, fonts, placement, launcher, teaser, radius, padding and shadow controls
-   Business hours, timezone and configurable after-hours behaviour

Start free

[https://chat.onmsg.app →](https://chat.onmsg.app)

 

See what's in each plan

[/pricing/ →](/pricing/)

No credit card required

![A branded website chat widget open in the corner of a clean website layout](/images/misc/modern-3d-illustration-of-a-branded-website-chat-w.webp)

-   Grounding controls, not guesswork
-   11 flow step types, no code
-   Shared inbox with handoff
-   Start on the free plan

## The part your visitors actually see

Everything else in onmsg happens behind the glass. The widget is the glass. It is the small launcher in the corner of your site, the teaser that appears beside it, the panel that opens when someone taps, and the messages inside. Get it wrong and the rest of the product never gets used, because nobody opens a chat that looks like it belongs to a different company.

Installation is a script snippet, one line you add to your site directly or push through a tag manager. That is deliberately unglamorous. There is no plugin to install or keep in step with a CMS release, so the same snippet works on a hand-built site, a page builder, or a framework you wrote yourself.

![A widget styling panel with colour swatches, font pickers, placement toggles and radius controls](/images/misc/modern-3d-illustration-of-a-widget-styling-panel-w.webp)

### Common problems this solves

**“The chat widget clashes with our site.”** Set colours for the widget, header, messages, inputs and controls, pick font families and sizes for different parts, and adjust border radius, padding, borders and shadows. When that still isn’t enough, add custom CSS for the widget, the teaser and the messages.

**“It covers our cookie banner.”** Choose left or right placement and set offsets from the page edges so the launcher sits where it does not fight anything else.

**“People message at 11pm and get nothing.”** Set business hours and a timezone, choose the after-hours behaviour, and let offline message intake collect the enquiry. Flows can branch with By availability so the offline conversation is written for someone who knows they are waiting until morning.

**“We need it gone for a week.”** The live/paused site setting hides the widget without a deploy.

## Customization, in the order people usually do it

Start with colour and type, since that is what makes the widget read as yours: widget, header, message, input and control colours, then font families and sizes. Next the framing, border radius, padding, borders and shadows, which is what makes it feel like part of the page rather than a floating box.

Then the invitation. The launcher icon, the teaser text and teaser image, and the unread indicator decide whether anyone opens the thing at all. Write the teaser as an offer rather than a greeting: “Ask about lead times” outperforms “Hi there” nearly everywhere.

Finally the words the system says on your behalf. Header title and subtitle and the configurable system messages set the tone for everything that follows, including the ones your visitor reads when something goes wrong.

## Availability is a design decision

A chat widget that is always visible but rarely answered trains people not to use it. Business hours, timezone and after-hours behaviour let you be explicit instead: online now, or here is what happens next. Combined with the 

Visual Bot Flow Builder

[/features/visual-bot-flow-builder/ →](/features/visual-bot-flow-builder/)

’s By availability step, the offline path can collect a proper enquiry and set an expectation you can meet.

For the detail, see 

how to customize your chat widget

[/guide/how-to-customize-your-chat-widget/ →](/guide/how-to-customize-your-chat-widget/)

, 

setting business hours and after-hours behaviour

[/guide/setting-business-hours-and-after-hours-behaviour/ →](/guide/setting-business-hours-and-after-hours-behaviour/)

, and 

using custom CSS to match your brand

[/guide/using-custom-css-to-match-your-brand/ →](/guide/using-custom-css-to-match-your-brand/)

.

## When the widget needs more attention than it usually gets

Three moments are worth spending real time on, because each one changes how many people open the chat at all.

**Launch.** Get colour, type and placement right before anything else. A widget that reads as third-party gets ignored regardless of how good the answers behind it are.

**A site redesign.** Placement offsets and colours are relative to a page that just changed. Re-check both, particularly against any new sticky element competing for the same corner.

**A seasonal push.** The teaser is the most under-used lever on the whole widget. “Ask about delivery before the 20th” during a busy month outperforms a permanent “Hi there” by a wide margin, and it takes a minute to change.

## Getting the closed state right

Most visitors never open the widget, which makes the closed state disproportionately important.

The launcher needs to be obviously tappable and clear of anything else pinned to that corner. The teaser needs to give a reason rather than a greeting. The unread indicator needs to be visible without being alarming.

And the offline version of all three needs the same care as the online one. A widget that looks considered during business hours and unfinished at 9pm is telling evening visitors something you did not mean to say, which is exactly when the highest-intent enquiries tend to arrive.

If you run more than one site, 

Multi-Site & API

[/features/multi-site-api/ →](/features/multi-site-api/)

 keeps each one’s widget configuration separate.

Product tour

## Chat Widget in the product

Clearly labelled example views of the screens involved.

![A chat launcher icon and teaser bubble in the bottom corner of a website viewport](/images/misc/modern-3d-illustration-of-a-chat-launcher-icon-and.webp)

Custom launcher icons, teaser text and teaser images.

![Widget placement controls showing left and right positions with edge offset sliders](/images/misc/modern-3d-illustration-of-widget-placement-control.webp)

Left or right placement with offsets from the page edges.

![A business hours and timezone settings panel with an after-hours behaviour selector](/images/misc/modern-3d-illustration-of-a-business-hours-and-tim.webp)

Business hours, timezone and after-hours behaviour.

![Custom CSS being applied to a chat widget, teaser and message bubbles](/images/misc/modern-3d-illustration-of-custom-css-being-applied.webp)

Custom CSS for the widget, teaser and messages.

Why onmsg

## Why teams use onmsg for chat widget

An embeddable chat widget you install with a script snippet, then customize to match your site: colours, fonts, placement, hours, and custom CSS.

### It looks like your site, not ours

Set colours for the widget, header, messages, inputs and controls, choose font families and sizes for different parts, and adjust border radius, padding, borders and shadows until it stops looking bolted on.

### Installed with a script snippet

Add one snippet to your site, directly or through a tag manager. It works anywhere you can place a script tag, which is most places, and there is no plugin to keep updated.

### Hours the widget respects

Set business hours and a timezone, then choose what happens outside them. Pair it with By availability branching so the offline path collects details instead of promising a reply nobody is there to give.

### Custom CSS when you need the last 5%

The visual controls cover most brand work. When they don't, add custom CSS for the general widget, the teaser and the messages and finish the job properly.

### A pause switch that isn't a code change

The live/paused site setting hides the widget when you need it gone, during a migration, a campaign, or a week when nobody can answer.

### Details that make it feel considered

Header title and subtitle, teaser text, configurable system messages, custom launcher icons, teaser images and unread indicators. Small things, but they are the difference between a widget people open and one they ignore.

## Widget control compared to a standard drop-in chat

| Capability | Typical website chat tool | onmsg |
| --- | --- | --- |
| Installation | Script snippet or platform-specific plugin | One script snippet, anywhere you can add a script tag |
| Colour control | Single accent colour | Widget, header, messages, inputs and controls |
| Typography | Fixed | Font families and sizes for different parts of the widget |
| Placement | Bottom right, fixed | Left or right with configurable offsets from the page edges |
| Availability handling | Generic offline notice | Business hours, timezone and configurable after-hours behaviour |
| Fine styling | Not available | Custom CSS for the widget, teaser and messages |

Questions

## Chat Widget FAQs

### How do I install the widget on my website?

You add a script snippet to your site, a single line you can paste into your header directly or deploy through a tag manager. There is no native CMS plugin involved; the snippet works anywhere you can add a script tag.

### Can I move the widget to the left side?

Yes. Placement is left or right, with configurable offsets from the page edges so it sits clear of anything else you have pinned to the corner.

### What exactly can I restyle?

Colours for the widget, header, messages, inputs and controls; font families and sizes for different parts; header title and subtitle; teaser text and configurable system messages; custom launcher icons, teaser images and unread indicators; and border radius, padding, borders and shadows.

### What if the visual controls don't go far enough?

Add custom CSS for the general widget, the teaser and the messages. Keep the rules responsive and check the result on a small screen, the widget has to work on a phone as well as a monitor.

### How do business hours work?

You set your business hours and timezone, then choose the after-hours behaviour. Flows can also branch with the By availability step so the offline path differs from the online one, and offline message intake keeps the enquiry in retained history.

### Can I hide the widget temporarily?

Yes. The live/paused site setting hides the widget without touching your website code, which is useful during a migration or a stretch when nobody can answer.

### Can visitors send files or images?

Image and file messaging is present in the product, and offline message intake lets a visitor leave details when your team is unavailable.

### Does the widget work on mobile?

Yes. Keep any custom CSS you add responsive and test it at a small viewport, since custom rules are the usual reason a widget misbehaves on a phone.

## Related features

### Visual Bot Flow Builder

A drag-and-drop builder for website conversations, with 11 step types for greeting, capturing enquiries, branching, and handing off.

Read more

[Visual Bot Flow Builder →](/features/visual-bot-flow-builder/)

### Grounded AI Agent & Knowledge Base

An AI agent that answers from your own knowledge base, with grounding modes, configurable refusals, and handoff to a person.

Read more

[Grounded AI Agent & Knowledge Base →](/features/grounded-ai-agent/)

### Multi-Site & API

One workspace organized around sites, with per-site configuration and a site-scoped API to ask the AI, read conversations, hand off, and manage knowledge.

Read more

[Multi-Site & API →](/features/multi-site-api/)

![](/images/hero/modern-3d-illustration-of-one-script-snippet-insta.webp)

No credit card required

## Ready to set up chat widget?

An embeddable chat widget you install with a script snippet, then customize to match your site: colours, fonts, placement, hours, and custom CSS. Start on the free plan and configure it on your own site.

Start free

[https://chat.onmsg.app →](https://chat.onmsg.app)

 

Compare plans

[/pricing/ →](/pricing/)

-   Free plan available
-   Installs with a script snippet
-   Your content, your controls