Customizing the Chat Widget
Every appearance setting for your bot (brand color, corners, feedback, position, icon, header, and welcome message) with a live preview as you edit.
On this page
- How editing works
- Appearance (shared by every channel)
- Brand color
- Corners
- Collect feedback
- Header logo
- Footer text
- Bot Widget customization
- Position and icon
- Size
- Header text
- Welcome message
- Controlling where the widget appears
- Common questions
- Do I need to update my embed code after changing settings?
- Why isn't my widget showing the new settings?
- Can I give the widget a different color from the Page Embed or Chat Link?
- Can I style the widget differently on different sites?
- The widget is enabled but not appearing on my site
Your chat widget should look like it belongs on your site, not like it was bolted on. This article walks through every appearance setting for your bot so you can match it to your brand in a few minutes.
All of these settings live in your HelpJet dashboard: open your bot and click Deploy in the sidebar (under Channels). The page has two kinds of settings:
- The Appearance card at the top is shared by every channel. Your brand color, corner style, feedback control, logo, and footer are set once here and apply to the Bot Widget, the Page Embed, and the Chat Link alike.
- Each channel's tab below has a Customization card for the few things that are specific to it. For the Bot Widget that means position, icon, chat window width, header text, and welcome message.
How editing works
Every change updates the Live preview on the Bot Widget tab instantly, so you can experiment freely; nothing reaches your visitors until you save.
- Changes are staged, not live. An Unsaved changes indicator appears in the sticky header at the top of the page.
- Click Save settings (top right) to publish your changes. You'll see All changes saved when everything is stored.
- If you try to leave the page with unsaved edits, your browser warns you first.
You never need to re-paste the embed code after changing appearance settings; the widget picks up saved changes automatically.
Appearance (shared by every channel)
Setting | What it does | Default |
|---|---|---|
Brand color | The one color your bot is themed from: pick a preset, use the color picker, or type a hex value | Indigo ( |
Chat window corners | Corner rounding on the chat panel: None, Small, Medium, Large, or Full. Also sets the Page Embed container corners | Medium |
Launcher button corners | Corner rounding on the Bot Widget's floating button: None, Small, Medium, Large, or Full | Medium |
Collect feedback | Shows thumbs up / thumbs down on each bot answer so visitors can rate it | On |
Header logo | A small logo (ideally 32×32px) shown in the chat header | None (coming soon) |
Footer text | The Powered by HelpJet line under the chat; locked, see below | Powered by HelpJet |
Brand color
Brand color is the single highest-impact setting. It colors the launcher bubble, the chat header, the send button, and your visitors' own message bubbles, and it tints links and buttons inside the bot's answers. One color, every channel.
You don't need to pick matching text colors. HelpJet works out the rest from your brand color: a dark brand color gets white text on it, a light one (a yellow, say, or a pastel) gets dark text, and links are darkened as far as needed to stay readable. The two swatches under the picker show the result: Your message is how a visitor's bubble will look, and Link in a reply is how a link in an answer will look. If you pick a light color, a note tells you text on it will be dark.
Corners
Chat window corners and Launcher button corners each accept None, Small, Medium, Large, or Full. They're independent, so a fully round launcher bubble with a softly rounded chat panel is a common combination. The chat window setting applies to the panel on every channel and also rounds the Page Embed's container to match.
Collect feedback
Collect feedback adds a thumbs up / thumbs down prompt after the bot answers, so visitors can rate their experience. Leave it on; the ratings show up alongside conversations in your Activity tab and are the fastest way to find answers that need better training. See Reviewing Conversations.
Header logo
Header logo will show your own logo in the chat header (ideally 32×32px). This field is currently locked; it's a premium feature coming soon.
Footer text
Every chat window shows a small Powered by HelpJet line beneath the message input. This branding is part of all standard plans, so the Footer text field is shown locked.
Removing the branding requires the Remove "Powered by HelpJet" add-on, available on the Pro plan. Once your organization has the add-on, the branding disappears across the widget, Page Embed, and Chat Link. See Add-ons, Credits & White-labeling for pricing and setup.
Bot Widget customization
On the Bot Widget tab, the Customization card is split into two columns: settings on the left, a Live preview on the right.
Setting | What it does | Default |
|---|---|---|
Widget position | Which bottom corner of the page the chat bubble sits in: Left or Right | Right |
Widget icon | The icon inside the closed chat bubble: nine options to pick from | Speech bubble |
Chat window width | How wide the open chat panel can get, from 300 to 800 pixels | 420 |
Header text | The title shown at the top of the open chat window | Your bot's name (set at creation) |
Welcome message | The first message visitors see when they open the widget | "Hi! I'm [bot name]. How can I help you today?" |
Position and icon
Widget position moves the bubble between the bottom-left and bottom-right corner. Bottom-right is what most visitors expect; switch to Left if a cart button or scroll-to-top arrow already lives in the right corner.
The Widget icon picker offers nine options: two speech-bubble styles, a stacked-conversations icon, a question mark, a robot, headphones, a life ring, a heart, and a circuit-style AI icon. Match the icon to your bot's job: headphones or a life ring for support, a question mark for help centers, a robot when you want to signal an AI upfront, and speech bubbles as the neutral default.
Size
Chat window width caps how wide the open chat panel grows, between 300 and 800 pixels. The default of 420 suits most sites; go wider if your bot tends to give long, detailed answers, narrower if the widget competes with important page content.
Header text
Header text is your bot's public-facing name at the top of the chat window. It starts out as the bot name you chose at creation, but it doesn't have to stay that way; "Support" or "Ask us anything" often works better than an internal label. The title sits on the left of the header, in white or dark text depending on your brand color.
Welcome message
Welcome message is the first thing visitors read when they open the widget; it sets expectations for what the bot can do. Every bot starts with "Hi! I'm [bot name]. How can I help you today?" (the new-bot wizard shows a generic "Hi there! How can I help you today?" placeholder before the bot exists). A good welcome message names the bot's scope: "Hi! I can answer questions about orders, shipping, and returns."
Controlling where the widget appears
Below the Customization card, the Bot Widget tab also holds display rules that show or hide the widget on specific pages of your site. That's a separate topic; see Widget Display Rules.
Common questions
Do I need to update my embed code after changing settings?
No. Click Save settings and the widget on your site picks up the changes automatically, usually within a minute or two, depending on caching.
Why isn't my widget showing the new settings?
First check the sticky header on the Deploy page: if it says Unsaved changes, your edits haven't been published yet. If it says All changes saved, hard-refresh your site in a private/incognito window to rule out caching.
Can I give the widget a different color from the Page Embed or Chat Link?
No. One bot has one brand color, shared by every channel, so your bot looks the same wherever it appears. If you need different looks, create a separate bot for each (or use Duplicate Bot in General Settings to copy an existing setup).
Can I style the widget differently on different sites?
Not per-site; one bot has one style. Use separate bots for different sites.
The widget is enabled but not appearing on my site
Appearance settings aren't the culprit; check the Enabled toggle at the top of the Bot Widget tab, your bot's status in General Settings, and the troubleshooting steps in Deploying Your Bot.
Was this article helpful?