Your Talkative Chat Widget is the customer-facing window into your digital contact experience, the interactive panel visitors use to start live chats, video calls, or other interactions on your website.
With Talkative’s Widget Editor, you can fully customise how your widget looks, behaves, and responds, from branding and language to advanced features like forms, nudges, and visibility rules.
After designing your widget, ensure the script is added to your website to make it live, follow this guide.
▶️ Navigation Video
Watch how to navigate, design and customise your chat widget from start to finish.
🎨 Creating Your Initial Chat Widget
Step 1: Chat Widgets Wizard
In Talkative, left side menu go to Chat Widgets. If it’s your first widget you will be presented with the onboarding wizard.
- Click Create Widget.
- Enter your Widget Name.
- Under Theme Options, set your brand colours using the colour picker or HEX codes.
- In the Welcome Area, customise the welcome message, select queue and decide whether to request the customer’s name and email before starting a chat.
- Click Create Widget to save your basic design.
- Copy the embed script shown on the widget page to install it on your website.
Keep customising: Click Open Widget Editor or View in Widget Editor to make further changes like cards, nudges, forms, and rules.
🧩 Further Customising Your Chat Widget
Welcome Cards
Create engaging welcome screens that greet customers when they open the widget.
- Click Add Segment and select your media type (e.g. image, text, video).
- Use drag-and-drop to rearrange the order of segments.
- Edit the text, button labels, and button actions to match your brand.
Nudges
Nudges help attract attention to your chat widget by prompting visitors to engage.
Click Add Nudge +.
- Choose between:
- Basic Nudge – a subtle pop-up that doesn’t interrupt browsing.
- Modal Nudge – a larger prompt displayed in the centre of the screen.
- Choose where the nudge appears and when it reappears after dismissal.
Language Strings
Adjust all default text shown in your widget, including system messages like “Waiting for agent” or “Type your message.”
- In the left menu, open Language Strings.
- Select a section (e.g. “Welcome Card Phrases”).
- Edit any phrase to match your tone of voice or preferred language.
💬 Example: Change “Waiting for agent” → “Connecting you now”
Chat Button
You can change how your widget button appears on your website.
- Adjust size, colour, and shape.
- Upload your own icon or logo.
- Set its position on the page (bottom-right by default).
Data Collection Forms
Collect customer details before an interaction begins:
- In the editor, select Data Collection Forms.
- Add fields (e.g. name, phone number, product type).
- Toggle Required for mandatory inputs.
👁️ Widget Visibility Editor
The Visibility Editor is one of the most powerful tools in the Chat Widget Editor, it controls when, where, and how your widget appears to website visitors.
Think of it as your widget’s logic builder. Using rules and conditions, you can decide exactly which version of the widget shows up under specific circumstances, for example:
- Only display the online card when agents are available.
- Show a different message when the queue is closed or after hours.
- Hide the chat option during checkout or certain site pages.
This flexibility ensures customers always see the right widget at the right time, improving both user experience and agent efficiency.
🤓 Advanced Widget Settings
Video
You will find a range of settings to configure the Video Chat feature of your Chat Widget
- Enable or Disable controls.
- Set Auto-Start Features.
- Add Quality of Service tools like remote equipment checks prior to starting the interaction.
Wait Messages
Here you can configure what your customer sees if they are being held in a queue:
- Add messages based on queue time or queue position.
- Add Email deflection, loop messages, set a maximum queue position number and an offline message.
- Add a video to keep your waiting customers entertained.
Config
- Rename your widget config.
- Enable Query String Matching to use the query string in the URL to match card rules.
Theme
Make some extra tweaks to your theme like:
- Add buttons to the header like full screen mode and minimise
- Change the Avatar display rules.
- Adjust the widget positioning.
- Change or add custom fonts to better suit your company branding.
Chat
Here you can adjust features within your interactions like:
- Enabling transcript requests, feedback, file uploads, translations and notifications.
- Change what happens when links are shared and clicked.
- Allow customers to share feedback on AI responses.
- Give customers the option to share video notes.
Privacy
In your privacy settings you can:
- Add your company Privacy Policy to the widget.
- Enable Typing indicators or allow your agents to see what the customer is typing before they hit send.
- Enable site journey visibility so your agents can see what pages the customer viewed before starting the chat.
Screen
Make some adjustments to how your widget appears on customers screens:
- Adjust the size of the widget.
- Change the auto-fullscreen behaviours.
Feedback
Feedback is vital to an evolving Customer Experience. Here you can:
- Determine when the customer can interact with the feedback buttons in the widget header
- Determine if and when a customer is invited to provide feedback after the interaction has ended
- Change the feedback form.
Analytics
The chat widget tracks a number of events that occur during lifecycle of an interaction. These events can be passed through to Google Analytics or a custom tracking platform. You can configure that here.
Co-browse
Fine-tune how the widget behaves during co-browsing sessions. e.g., minimise automatically or adjust styles while sharing screens.
API Actions
An API action is similar to the action you assign to a welcome card button. The main difference is that these actions are triggered via the chat widget's JavaScript API.
Admin
Here you will find a few extra tweaks you can make:
- Removing or changing the branding at the bottom of your widget.
- Hide the Chat Button from customer view.
- Enabling Telemetry in case a customer experiences issues with the Talkative Widget.
- Adjusting notification types and how nudges appear when all standby cards are hidden.
❓FAQ’s: Chat Widget Editor
What do I need to check before going live?
Before going live make sure that you have checked the following:
- Any queues referenced in in the widget have suitable business hours, groups and agents assigned to them.
- Visibility rules have been configured correctly so the right cards show on the right pages.
- Any chat bots have been published and referenced as a queue.
- The correct widget script has been added to your website.
Why is my widget not showing?
There are some common reasons for the chat widget to not appear on your website. Use the list below to check all the common reasons. If this does not resolve your issue, please contact support with the location you are deployment the script, the name of the queue you are targeting, a copy of the script you have deployed, and how you are deploying it (directly, via GTM etc).
Company is Offline | If your company is set to offline, your chat scripts will not appear. The setting for this can be found in your Company Manager, located in the Settings submenu. |
Out of Business Hours | Each queue is bound to business hours. If you are outside business hours, your queue widget will not load. Your business hours can be configured by locating the Business Hours menu item located in the Settings submenu. Please note, every company has a time zone set, please check that the time zone is set correctly too. If you have multiple business hour settings, you may need to visit the queue page to check to see which business hours are assigned to the queue you are trying to access. |
No Agents Available | Depending upon your configuration, if there are no agents available, the chat widget will not appear. This could be due to all agents being offline, or already at capacity (depending upon your distributor). If you are a standalone customer, you can view your Supervisor Dashboard to see the current status of all users, including their current work capacity and load. |
Queue Cap Hit | Twilio and Mitel distributors have the option to set up a queue cap. This cap will prevent the queue from growing larger than the specified amount. When hit, this will force the chat widget to hide until the queue numbers reduce. This limit can be configured in your Distributor Configuration page. Twilio customer can disable this limit entirely, where Mitel customers can simply set a large queue limit which is unlikely to be hit, for example 9999. |
Incorrect Session State | During development and testing, it is likely that you may start and stop several sessions and potentially change queue and company UUIDs to different development, staging and production values. Sometimes, a remnant of previous sessions can be left behind which causes the customer scripts to enter an unknown session state. Try loading your website in a new incognito/private browser session or by clearing all session data and cookies. It is generally best to do this from within your developer console. |
Invalid Configuration Data | ECSv1 is configured by passing attributes to the talkative engage element on your website page. If these values are improperly formatted or incorrect, it can cause your script to fail. Please check your developer console for errors or contact support for assistance in making these changes. |
How do I share a widget with a colleague for testing?
To share your widget for testing, you can navigate to the widget config area, then click “Share Config: Widget Name”.
This will generate a URL that you can share with your colleagues, allowing them to see how the widget works without needed a Talkative Account Holder account
Please note that the generated link remains active for a duration of 30 days from its creation.
My widget is displaying an old version of my chat bot, how do I update this?
If your widget is showing an old version of your chat bot, please make sure that the chatbot referenced in the chat widget config has been recently published. Please see here for more information on how to publish.
Can I create custom feedback forms?
While you can create custom feedback forms, we recommend sticking with the default created forms as you can generate better reports using data from the default form. If you use a bespoke feedback form, the data collected from that will only appear in the interaction data and cannot be reported on.
Can I have transparent elements in my chat widget?
The Talkative widget allows transparency to be added to certain widget elements. The elements that support transparency are:
- Chat buttons
- Card backgrounds
- Queue action backgrounds
Adjusting Transparency
Transparency is achieved through hexadecimal values.
For example, to change #428ccc to be fully transparent, add 00 to the end to become #428ccc00 when editing theme settings.
Transparency can be specified in % terms. A full list of transparency values can be found here: https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
Please be mindful of accessibility when creating transparent elements.
Can custom CSS be added to the widget?
The Talkative widget editor allows a number of design customisation options.
However, there are some limitations to what can be configured and customised. For example, while you can specify custom fonts to be used within the widget, you are not able to choose different fonts for different CSS classes/selectors.
One potential solution that has been requested is to support a "custom CSS" entry within the widget editor admin section. While this may seem like a relatively trivial addition to the platform, it introduces a number of limitations. To support custom CSS on a per-organisation basis, we'd need to guarantee stability of selectors and ids between versions. This in turn would greatly reduce the extent to which new features and functionality can be introduced into the platform, without potentially introducing breaking changes to custom CSS implementations.
As a Talkative user, it is possible for you implement custom CSS on your own, by applying CSS to the widget elements in the shadow DOM. However, we are not able to assist with any support or maintenance with any custom CSS that you have implemented on your own website.
How do I configure the chat button to start a chat, not open the widget?
In the widget editor, navigate to the “Chat Button” settings. Scroll down to the “Advanced” section.
Click the three dots next to “Advanced” and click “Show Custom Button Action”.
Then select “Start an Interaction” from the “Button Action” dropdown
Handling Single Page Applications (SPA)
How to handle URL rules within SPA with the Talkative widget rules.
Talkative's widget supports SPA websites.
However, you will need to use card-based URL rules, rather than the primary URL rules.
To recap, primary URL rules are used to control which widget containers fire on different URLs.
Card-based rules dictate when Cards will show up - where a Card is a component inside of a container.
Primary URL rules are set here - but for SPAs, they will not work reliably.
Setting Card-Based URL Rules
Card-based URL rules are set within the visibility section of the Standby Phase
You can use a ruleset to have multiple rules trigger the standby card.
In this example, the Card will fire on every page, apart from URLs that contain /support
Can I add a custom icon for my chat widget?
You can build your own icon using any stack you wish, and register event listeners to trigger our API to toggle the visibility of the widget UI.
Once you have created your icon, you would just register an event listener and call this code when the button is clicked.
However, you should first check to make sure the widget has loaded correctly and that there are queues available for the cards configured for your widget. In addition to this, you will likely want to hide the icon when the UI is active, and show it again when the UI becomes inactive.
We have created a heavily commented example application which illustrates a potential implementation method you might use to accomplish this. You can find this example here: https://github.com/talkative-tech/widget-examples/tree/main/custom-widget-icon
This example can be cloned from the GitHub repository and installed and tested locally by updated the config UUID to point to your own. Full instructions can be found in the repository.
Can I show a different widget config if a customer has logged into our portal?
You may need to show different versions of the Talkative widget to logged-in users and non-logged-in users. For example, you may want to show an updated widget with a chatbot option to logged-in users only.
As the URL often doesn't change when a user logs in, you will need to work with your web developer to add a function to your website that can distinguish between logged-in and non-logged-in users. This function can then be used to trigger the display of different Talkative widgets based on the user's login status.
Once you have this functionality on your website, you can create separate widget configurations to load for logged-in and non-logged-in users. This can be achieved using visibility rules on the widget editor.
I’ve saved over my widget and need to revert back!
In the Chat Widget Editor, click on the menu in the top left and select Chat Widget Settings
You will then have a list of the older versions of your widget which you can edit and reinstate.
Widget Versioning
Widget versioning for our new customer scripts allows you to make changes, show them to your team on your live website, and publish them to all your website visitors whenever you're ready.
Version Types
There's three types of versions:
Live
This is the version on your webiste. This is what all your customers will see. You cannot make changes to this version without creating a draft, so as to not make surprise updates.
Old
This is a version that has been live on your website in the past. You can publish it to rollback to it. You are not allowed to make changes to it, to ensure that you always have a working version to go back to
Draft
This is a widget version that has never been live on your website. This means that it will be editable, and you will be able to share it.
Making changes to your website
To make changes to your website, you'll need to create a new draft based on your live version.
Minimum requirements
Widget versioning in its basic form should work with any version of the customer scripts. However, for an enhanced user experience, we commend versions 0.9 and above. The preview feature will require a script import update. You can send off a support ticket for more assistance.