# Customize Your Chat Widget | onmsg > Control your widget URL: https://onmsg.app/guide/how-to-customize-your-chat-widget/ Last-Modified: 2026-09-08 Guide # Customize Your Chat Widget Control your widget's placement and offsets, colours for widget, header, messages and inputs, fonts and sizes, launcher icons and teaser images, and framing. Published September 8, 2026 · 4 min read ![A chat widget with visible style controls for colour, font and placement](/images/featured/modern-3d-illustration-of-a-chat-widget-with-visib.webp) ## Start with why it matters A chat widget that looks like a chat widget gets ignored. One that looks like part of your site gets opened. That is most of the argument for spending twenty minutes on customization, and the Website Chat & Widget Customization [/features/website-chat-widget/ →](/features/website-chat-widget/) settings exist to make those twenty minutes enough. Work in the order below. Each stage builds on the last, and the early ones do most of the visible work. ![A before-and-after styling panel showing a default widget beside a fully branded one](/images/content/before-and-after-widget-styling-panel-showing-a-de.webp) ## 1\. Colour You can set colours for the widget, the header, the messages, the inputs and the controls. Take them from your existing site rather than approximating: pull the real hex values from your stylesheet or brand guide. Two things to check as you go. Your own message bubbles and the visitor’s should be clearly distinguishable, a small difference in tone is not enough on a phone in daylight. And check contrast on the text sitting inside every coloured element you change, particularly the header and the send button. A brand colour that works as a background for white text on a large button may fail behind small text. ## 2\. Typography Set font families and sizes for the different parts of the widget. Matching your site’s body font is usually the single change that makes the widget stop looking third-party. Keep message text at a comfortable reading size. Chat is often read one-handed on a small screen, and shrinking the font to fit more messages in view is a false economy. ## 3\. Placement and framing Choose left or right placement and set offsets from the page edges. Offsets matter more than they sound: cookie banners, back-to-top buttons and sticky footers all fight for the same corner, and a few pixels of offset is the difference between a launcher people can tap and one they cannot. Then the framing, border radius, padding, borders and shadows. If your site uses generous rounding and soft shadows, a square, hard-edged widget will read as foreign no matter how well you matched the colours. ## 4\. The closed state ![Launcher icon, teaser image and unread indicator options for a chat widget](/images/content/modern-3d-illustration-of-launcher-icon-teaser-ima.webp) Most visitors only ever see the widget closed, which makes the launcher, the teaser and the unread indicator disproportionately important. Custom launcher icons, teaser images and unread indicators are all configurable. The element that matters most is the teaser text: write it as an offer rather than a greeting. “Ask about lead times” gives someone a reason to tap. “Hi there” does not. ## 5\. The words the system says Header title and subtitle, teaser text and configurable system messages all carry your tone. System messages in particular are worth a pass. They are what visitors read when something goes wrong or nobody is available, which is exactly when tone matters most. ## 6\. Test it properly Check the widget on a real phone, not just a narrow browser window. Then check it on your busiest pages rather than the homepage alone, since a long page with a sticky element is where placement problems appear. Finally, open it and send a message as a visitor would. Styling issues that are invisible in a settings preview tend to become obvious in a live conversation. ## When the controls run out The built-in settings cover most brand work. For the last stretch, a specific font weight, an exact spacing, a shadow that matches your cards, custom CSS is available for the general widget, the teaser and the messages. Using custom CSS to match your brand [/guide/using-custom-css-to-match-your-brand/ →](/guide/using-custom-css-to-match-your-brand/) covers that, including keeping the rules responsive. ## Choosing colours that survive contact with a phone Brand palettes are usually designed for large surfaces. A chat widget is small, sits on top of a page it does not control, and gets read in daylight on a phone. A few adjustments help. **Use your darkest brand colour for text, not your brightest.** The colour that works on a large button rarely works behind 14px message text. **Give the two message sides real separation.** Your replies and the visitor’s should be distinguishable at a glance. A subtle tonal difference is not enough once someone is scrolling. **Watch the send button.** It sits inside the input area, so its background and the input’s background need to differ clearly. **Check the offline state.** Widgets often look considered when online and unfinished when offline, because nobody previews that state. Test on an actual phone rather than a resized browser window. Screen brightness and viewing angle change what passes. ## A short pre-launch check Before you consider the widget done, walk through five things. Load your busiest page and confirm the launcher does not collide with anything sticky. Open the widget and read the teaser as a stranger, does it give a reason to tap? Send a message and check the input stays visible with the keyboard open. Look at the widget out of hours and confirm the offline state reads deliberately. Finally, ask a colleague who has not seen it to open it and tell you what they think it is for. That last one catches more real problems than any amount of colour matching. Once the look is right, set business hours and after-hours behaviour [/guide/setting-business-hours-and-after-hours-behaviour/ →](/guide/setting-business-hours-and-after-hours-behaviour/) so the widget is honest about when someone is actually there. ## Learn more about Website Chat & Widget Customization An embeddable chat widget you install with a script snippet, then customize to match your site: colours, fonts, placement, hours, and custom CSS. Read the feature page [/features/website-chat-widget/ →](/features/website-chat-widget/) FAQ ## Questions people ask about this ### Can I move the widget to the left side? Yes. Placement is left or right, with configurable offsets from the page edges so the launcher clears anything else pinned to that corner, like a cookie banner or a back-to-top button. ### Can I change the launcher icon? Yes. Custom launcher icons are supported, along with teaser images and unread indicators, so the closed state can carry as much of your brand as the open panel. ### Can I match my site's fonts? Yes. Font families and sizes are configurable for different parts of the widget. If your brand font is not loading inside the widget, custom CSS is the usual fix. ## Related guides ### Setting Business Hours, Timezone and After-Hours Behaviour Set business hours and timezone, choose configurable after-hours behaviour, enable offline message intake, and pair it with By-availability flow branching. Read guide [Setting Business Hours, Timezone and After-Hours Behaviour →](/guide/setting-business-hours-and-after-hours-behaviour/) ### Using Custom CSS to Match the Widget to Your Brand Use custom CSS for the widget, teaser and messages when the visual controls aren't enough. When to use CSS versus the built-in controls, and keeping it responsive. Read guide [Using Custom CSS to Match the Widget to Your Brand →](/guide/using-custom-css-to-match-your-brand/) ## Want to try this on your own site? No credit card required. Start free [https://chat.onmsg.app →](https://chat.onmsg.app)