Customizing the Chat Widget

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.

The settings live in two places in your HelpJet dashboard, both in your bot's sidebar:

• The Appearance page (under Configuration) holds the look shared by every channel. Your brand color, corner style, answer ratings, and footer are set once here and apply to the Bot Widget, the Page Embed, and the Chat Link alike. A live preview of the widget sits next to the controls.
• The Deploy page (under Channels) has a tab per channel, and each tab's Customization card holds the few things that are specific to that channel. For the Bot Widget that means position, icon, chat window width, header text, and welcome message.

How editing works

Both pages work the same way: every change updates the Live preview instantly, so you can experiment freely, and nothing reaches your visitors until you save.

• Changes are staged, not live. An Unsaved changes indicator appears at the top of the page while edits are pending, with a Discard button next to it that puts everything back to the last save.
• On the Appearance page, click Save changes (top right). On the Deploy page, click Save settings; the header reads All changes saved when everything is stored. Cmd+S (Mac) or Ctrl+S (Windows) saves too.
• Each page saves only its own settings, so an edit on one page never overwrites a change you made on the other.
• If you click a link to another page while you have unsaved edits, HelpJet asks Save your changes before leaving? and offers Save and leave, Discard and leave, or Stay. Closing the tab or refreshing gets your browser's own warning.

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)

Open your bot and click Appearance in the sidebar, under Configuration. The page has four sections.

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 have three ways to set it:

• Presets. Five named swatches: Indigo, Sky, Emerald, Violet, and Red. Click one to use it.
• Color picker. The dotted swatch at the end of the row opens your browser's color picker.
• Hex value. Type into the hex field. A full six-digit value (such as #4f46e5) is applied as soon as you finish typing it; a three-digit shorthand (such as #abc) is applied when you press Enter or leave the field. Anything else shows That isn't a hex color and leaves your brand color as it was, so a half-typed value never becomes your color.

A custom color you have chosen stays visible as its own selected swatch next to the presets, so you can see at a glance that you are not on a preset.

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; if you pick a color so close to mid-gray that no text reads well on it, a note suggests a darker or lighter shade.

Corners

Chat window and Launcher button each offer None, Small, Medium, Large, or Full, shown as small shapes so you can see the rounding before you pick it. 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.

Answer ratings

Let visitors rate answers adds a thumbs up / thumbs down prompt after the bot answers, on every channel, 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.

Branding

Every chat window shows a small Powered by HelpJet line beneath the message input. The Branding section shows the current footer line for reference; it isn't editable, because the branding is part of all standard plans.

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, and the footer line here reads Hidden. The note under the footer line tells you where to go for your plan. See Add-ons, Credits & White-labeling for pricing and setup.

Header logo will show your own logo in the chat header. It reads Coming soon on Pro for now.

Live preview

The right-hand column shows the Bot Widget as visitors will see it, using the widget's saved position, icon, header text, and welcome message, and it follows every edit on the page before you save. You can type into it to test your bot. The Page Embed and Chat Link use the same look; set their text on the Deploy page.

Bot Widget customization

On the Deploy page, open the Bot Widget tab. The Customization card is split into two columns: settings on the left, a Live preview on the right. Its description reminds you that the brand color, corners, and footer are set on the Appearance page, with a link to get there.

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. They are labeled Saves instantly because each rule is stored as you add or change it, separately from the Save settings button. That's a separate topic; see Widget Display Rules.

Common questions

Do I need to update my embed code after changing settings?

No. Save on the Appearance page or the Deploy page 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 top of the page you edited: if it says Unsaved changes, your edits haven't been published yet. Once the Deploy page says All changes saved (or the Appearance page's Save changes button is grayed out), 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. On the Bot Widget tab, check the badge next to the switch at the top: it should read On or Live, not Off or On after save (which means you switched it on but haven't saved). Then check your bot's status in General Settings and the troubleshooting steps in Deploying Your Bot.