Change the widget's look and launcher
Set your brand colour, light or dark mode, header, window size, font and the launcher button visitors click, with a live preview as you go.
On this page
The Style tab controls how the chat widget looks on your website: its colours, the chat window and the launcher button visitors click to open it. A live preview next to the settings shows every change before you publish it.
#Style the widget
-
Go to Settings Chat widget Style .
-
Pick a starting point under Theme. Each preset sets the colour, launcher style and mode in one click, and you can fine-tune everything after.
-
Set your Brand colour. Pick a preset swatch or enter your own hex value.
-
Choose how the chat window looks under Chat window, then style the button under Launcher and place it under Placement.
-
Check the live preview. Use the Open and Closed switch to see the chat and the launcher, and the desktop and mobile buttons to see both screen sizes.
-
Click Save changes at the top of the page.
#Theme presets
| Preset | What it sets |
|---|---|
| Arctic | Pengo cyan, the Frost launcher, the Arctic home screen, light mode |
| Midnight | Dark slate, Dark launcher, dark mode |
| Sunset | Orange, Gradient launcher, light mode |
| Forest | Green, Solid launcher with the Pengo icon, light mode |
| Mono | Slate, Fluid launcher, square corners, light mode |
| Bubblegum | Pink, Gradient launcher with the Wave icon, light mode |
Every preset other than Arctic turns the Arctic home screen off. You can change the home screen style later in the Home screen tab.
#Colour and chat window
| Setting | Options | Notes |
|---|---|---|
| Brand colour | Any hex colour | Default is #00A8E0. If white text is hard to read on it, bubbles and buttons use a slightly deeper shade. |
| Mode | Light, Dark, Auto | Auto follows the visitor’s device setting. |
| Header | Brand colour, Neutral | Brand colour fills the header and home screen with your colour. Neutral is a plain header with colour accents. |
| Size on desktop | Compact, Standard, Tall | 360 × 560, 380 × 640 and 400 × 720 pixels. On phones the chat is always full-screen. |
| Font | Visitor’s system font, Inter, Plus Jakarta Sans, DM Sans | The system font loads nothing extra. |
#Launcher
The launcher is the round button on your website that opens the chat.
| Setting | Options | Notes |
|---|---|---|
| Style | Solid, Gradient, Fluid, Dark, Frost, Image | Fluid is white with a brand-colour icon. Frost is a frosty white button with the full-colour Pengo mark. Image fills the button with your own picture. |
| Icon | Pengo, Message, Bubble, Conversation, Help, Wave, Support, Penguin | Not shown for the Frost and Image styles. |
| Launcher image | Upload | Image style only. Square PNG, JPEG or WebP, up to 512 KB. |
| Label | Up to 30 characters | Optional text beside the icon, like “Chat with us”. Phones show the icon only. |
| Size | Small, Medium, Large | 48, 60 and 68 pixels across. |
| Shape | Round, Square |
#Placement
| Setting | Options | Notes |
|---|---|---|
| Position | Bottom right, Bottom left, Top right, Top left | Default is bottom right. |
| From the side (px) | 0 to 120 | Default 20. |
| From the bottom (px) or From the top (px) | 0 to 120 | Default 20. The label follows the position you picked. |
Placement also holds Hide on phones and Show on these pages only. They’re covered in Visibility and branding.
#Attention
These settings help visitors notice the launcher without getting in the way.
| Setting | What it does |
|---|---|
| Tooltip | A short label beside the launcher. Set the Tooltip text (default “Chat with us!”) and Show it after: Right away, 2 seconds, 5 seconds or 10 seconds. |
| Unread badge | A count on the launcher when a reply arrives while the chat is closed. |
| Launcher animations | Motion on the launcher and popups. Visitors who prefer reduced motion never see it. |
| Pulse on new message | Draws the eye when a reply arrives. |
#When changes go live
The preview updates as you type, but nothing changes on your website until you click Save changes. A dot on a tab means it has unsaved changes, and Discard puts everything back to what’s saved.
After you save, visitors get the new look the next time a page loads. It can take up to a minute to reach everyone. If you don’t see it, reload your site and check the installation.
Common questions
Do my changes go live straight away?
Not until you click Save changes. The live preview updates as you edit, but visitors only get the new look after you save, the next time a page loads. It can take up to a minute to reach every visitor.
Can I use my own image as the launcher?
Yes. Pick the Image launcher style and upload a square PNG, JPEG or WebP up to 512 KB.
Why does my brand colour look slightly darker in message bubbles?
When white text would be hard to read on your colour, Pengo uses a slightly deeper shade behind text. Everything else keeps your exact colour, and the Style tab shows you both.
Was this guide helpful?
Your answer helps us improve it.
Sorry about that. or contact support, and we'll fix the guide.