Customize the chat widget
Summary
Section titled “Summary”You change how the KonversAI chat widget looks and what it says on the Customer entry points screen in the KonversAI console. Select Settings in the left sidebar, then select Entry-points, then select the Chat tab. Each chat entry point has its own form with the sections Size and Colors, Texts visible to the end-user, Logo images and Proactive teaser. A live preview sits beside the form. This page is about the look and the wording only. To copy the embed code and put the widget on your website, read Install the widget on your website.
Who can do this
Section titled “Who can do this”In the KonversAI console, you need a role with tenant settings access. A Tenant Admin always has this access. Look for Entry-points under Settings in the left sidebar of the console. A missing Entry-points item means you do not have this access. The Settings parent item is not the test: KonversAI shows Settings when any one item under it is visible, for example AI tools or Cost & contract. Ask a Tenant Admin to change your role. A person who can open Settings > Entry-points but cannot change tenant settings sees the form, and KonversAI refuses the save.
Before you start
Section titled “Before you start”Sign in to the KonversAI console and select your tenant. The screen is at Settings > Entry-points in the left sidebar. The page heading is Customer entry points. The sidebar label and the page heading are different words for the same screen.
The Customer entry points screen always shows four tabs: Chat, Email, Voice and Meta. No feature flag hides a tab. Every tenant has the Chat tab and its full form. When your tenant does not have the voice feature, the Voice tab opens a placeholder card. The card carries the heading Voice engagement configs and the text Voice is under active development and will be available soon.
Create the chat entry point first. A new tenant has no chat entry point. Select the + button below the list, type a name in Config name, then select Create config. The full form with Size and Colors, Texts visible to the end-user, Logo images and Proactive teaser is on the saved entry point in the list.
Your customers see a change 1 to 2 minutes after you save. You do not change the embed code on your website when you change the look.
- Select Settings in the left sidebar of the KonversAI console, then select Entry-points. The page Customer entry points opens.
- Select the Chat tab, then find your chat entry point in the list. The preview of the widget is at the left of the form.
- Type a name in Config name. The maximum length is 255 characters. Only your team reads this name. The console tells you: Use this name to keep track of your entry points. It is not visible to the end-user and its not part of the conversation.
- Optional: type guidance for the assistant in Conversation initial context. KonversAI adds this text to the assistant context when a customer starts a conversation from this entry point. Use it to tell the assistant where the conversation starts. Customers do not see this text.
- Open Size and Colors. Select Small, Medium or Large in Closed launcher size. This is the size of the chat button before the customer opens the chat. Medium is the default.
- Set the six colours in Size and Colors: Primary color (default
#059669), Text on primary (default#ffffff), User message bubble (default#d1d5db), User message text (default#1a1a1a), Response message bubble (default#059669) and Response message text (default#ffffff). Each colour has a colour picker and a text box. The text box holds a maximum of 20 characters. Watch the preview as you change a value. - Open Texts visible to the end-user. Type the four texts on the Default language tab. Title in the top of chat widget is the widget header, with a maximum of 100 characters; leave it empty to use your tenant name. Bubble label is the text on the closed chat button, with a maximum of 100 characters; leave it empty to show only the logo. Welcome message is the first message the customer reads when the chat opens; KonversAI does not put this message into the conversation. Placeholder text in the input field is the hint in the message box, with a maximum of 120 characters; leave it empty to use the built-in default Type your message….
- Optional: add a language override. Select the + button at the right of the tab row in Texts visible to the end-user. The window Add language override opens. Choose the language in the Language list, then select Add language. Select Cancel to close the window and add nothing.
- Type the texts for that language on the new tab. The new tab shows the flag and the language code, for example 🇳🇴 NO. The console tells you: Editing language override for NO. Empty values fall back to default language fields. Only the four texts in Texts visible to the end-user and Teaser message have a language override. Colours, Closed launcher size and the logos are the same in every language.
- Open Logo images. Bubble icon is the logo in the closed chat button, and Chat widget icon is the logo in the widget header. Select the + button to choose an image, or select Remove to take the image away. A field with no image shows No image. Leave Chat widget icon empty to use the KonversAI default.
- Open Proactive teaser. This section shows a small speech bubble above the chat button that invites the visitor to chat. Select Enable proactive teaser bubble to switch the teaser on. The other three fields stay locked until you switch the teaser on.
- Type the teaser text in Teaser message. Leave it empty to use your Welcome message. Type a number from 0 to 120 in Delay before showing (seconds). The default is 3. Choose a logo in Teaser logo; leave it empty to show no circle above the teaser.
- Select Save. KonversAI answers: Settings saved. End-users will see the changes after a minute or two. In the window where you create a new entry point, the button is Create config, and KonversAI answers Config created.
- Select Test this widget to open a demo page with your widget. The demo page uses the same assistant and the same knowledge base as your website.
Where do I change the colours of the chat widget?
Section titled “Where do I change the colours of the chat widget?”Select Settings in the left sidebar of the KonversAI console, then select Entry-points. The page Customer entry points opens. Select the Chat tab, find your chat entry point, then open Size and Colors. The section has six colour fields: Primary color, Text on primary, User message bubble, User message text, Response message bubble and Response message text. Each field has a colour picker and a text box for a colour value. Select Save when you finish. KonversAI answers Settings saved. End-users will see the changes after a minute or two.
What is the difference between Primary color and Response message bubble?
Section titled “What is the difference between Primary color and Response message bubble?”Both are colour fields in Size and Colors on a chat entry point, at
Settings > Entry-points on the Chat tab in the KonversAI console.
Primary color is the main brand colour of the widget. The chat button and
the widget header use Primary color, and Text on primary is the colour
of the text on top of it. Response message bubble is the colour of the
bubble that holds an assistant answer, and Response message text is the
text colour inside that bubble. Both start at #059669, so a change to
Primary color alone leaves the answer bubbles at the old colour.
How do I change the text on the chat button?
Section titled “How do I change the text on the chat button?”Open Settings > Entry-points in the left sidebar of the KonversAI console, select the Chat tab, find your chat entry point, then open Texts visible to the end-user. Type your text in Bubble label. The maximum length is 100 characters. Leave Bubble label empty to show only the logo on the button. The logo comes from Bubble icon in the Logo images section of the same form. Select Save when you finish.
How do I give the widget texts in a second language?
Section titled “How do I give the widget texts in a second language?”Open Settings > Entry-points in the left sidebar of the KonversAI console, select the Chat tab, find your chat entry point, then open Texts visible to the end-user. Select the + button at the right of the tab row. The window Add language override opens. Choose the language in the Language list, then select Add language. The list holds English (en), Norwegian (no), Swedish (sv), Danish (da), German (de), Dutch (nl), French (fr), Spanish (es), Polish (pl), Chinese (zh) and Japanese (ja). KonversAI adds a tab with the flag and the code, for example 🇸🇪 SV. Type the texts on that tab, then select Save. An empty field on a language tab falls back to the same field on the Default language tab.
Which fields have a language override?
Section titled “Which fields have a language override?”Five fields have a language override on a chat entry point at Settings >
Entry-points on the Chat tab in the KonversAI console: Title in the
top of chat widget, Bubble label, Welcome message, Placeholder text
in the input field and Teaser message. The window Add language
override names them as headerTitle, bubbleText, welcomeMessage,
inputPlaceholder and proactiveBubbleText. Nothing else has a language
override. The six colours in Size and Colors, the value in Closed
launcher size, the images in Logo images, and Teaser logo are the
same for every language.
The teaser bubble fields are grey and I cannot type. Why?
Section titled “The teaser bubble fields are grey and I cannot type. Why?”Teaser message, Delay before showing (seconds) and Teaser logo stay locked until you switch the teaser on. Open Settings > Entry-points in the left sidebar of the KonversAI console, select the Chat tab, find your chat entry point, then open Proactive teaser. Select Enable proactive teaser bubble. The three fields then accept a value. The teaser is a small speech bubble above the chat button. A visitor who closes the teaser, or who opens the chat, does not see the teaser again in that browser session.
I saved my changes but the widget on my website looks the same. What do I do?
Section titled “I saved my changes but the widget on my website looks the same. What do I do?”Wait 1 to 2 minutes, then load your page again. KonversAI tells you Settings
saved. End-users will see the changes after a minute or two. when the save
succeeds, and the widget reads the new look on the next page load. Your browser
cache can also hold the old look, so make a hard reload of the page. You do not
change the embed code on your website when you change the look. If the widget
still looks the same, check that you changed the entry point whose
data-tenant-key value is in the snippet on that page. Read
Install the widget on your website to find
the snippet.
KonversAI says “Config name is required.” What went wrong?
Section titled “KonversAI says “Config name is required.” What went wrong?”The Config name box is empty. Config name is the first field on a chat entry point at Settings > Entry-points on the Chat tab in the KonversAI console. Type a name, then select Save again. The maximum length is 255 characters. The name is for your team only. Customers never read the name, and KonversAI does not put the name into the conversation.
Can I change the welcome message without changing the first assistant answer?
Section titled “Can I change the welcome message without changing the first assistant answer?”Yes. Welcome message in Texts visible to the end-user is a screen text only. KonversAI shows it when the customer opens the chat widget, and does not put it into the conversation. The assistant does not read it and does not answer it. To guide the assistant instead, type your text in Conversation initial context at the top of the same form, at Settings > Entry-points on the Chat tab. KonversAI adds that text to the assistant context when a customer starts a conversation from this entry point.
Last reviewed . Tell us when a step no longer matches the product.