Configure the chat widget
Last updated
Was this helpful?
Last updated
Was this helpful?
Was this helpful?
The Website Chat Widget allows you to engage with visitors on your website, capture leads, and offer instant support directly from your Zaapi inbox.
This guide will walk you through creating, configuring, and installing your new chat widget.
First, you need to create the widget from your Zaapi settings.
Navigate to Settings in the main menu.
Select Integrations.
Scroll down to the "Discover" section and find the Website Chat Widget card.
Click the + Create button to begin the setup process.
After creating the widget, you will be taken to the configuration page. This page has four main tabs: Appearance, Content & language, Settings, and Install.
A. Appearance Tab
This tab controls the visual style and placement of your chat widget on your website.
Widget design: Choose how the minimized widget appears.
Bubble: A circular icon (default).
Bar: A rectangular bar with a short message.
Color theme: Select a colour that matches your brand's identity. The selected colour will be applied to the widget's header and buttons. You can further customise the colour by entering your brand hex code.
Alignment position: Choose whether the widget should appear on the Left or Right side of your website.
B. Content & language Tab
This tab allows you to control all the text displayed in the widget and set up multiple languages.
Select language: The widget can automatically display in the visitor's browser language. Click into the language box to select all the languages you want to support.
Important: You must provide text for all the required fields for every language you select. You will see a "This field is required" notification for any missing translations.
Pop-up message: A proactive message that appears to visitors after a set time.
Style: Choose between Message (a customisable text pop-up), Ice-breaker (a list of clickable questions), or None.
Delay: Set the number of seconds before the pop-up appears.
Pro-tip: Trigger Automations with Ice-breakers You can connect your ice-breakers to specific automations using the Flow Builder. When a visitor clicks an ice-breaker, it can automatically trigger a flow to answer common questions or qualify leads.
To set this up:
Go to the Automations > Flow Builder section.
Create a new flow and choose the trigger When a customer sends a message.
Set the channel to Chat Widget.
Add a condition to filter by Message content.
Set the filter text to be an exact match to your ice-breaker question.
Home screen: This is the main view of the widget when a visitor opens it.
Header: Set the Title and optional Subtitle.
Go to chat customization: Customise the Title, Reply time message, and Button label.
Other communication channels: Click + Add channels to offer alternative contact methods like Facebook, Instagram, WhatsApp, Line, Email, or a Phone Number.
External links: Click + Add external links to direct users to useful pages.
For each link, you must provide a Link label (the text that will be displayed) for each language, and the destination URL.
C. Settings Tab
This tab contains functional settings for data collection, customization, and the widget's behaviour.
Widget settings:
Widget name: The name that will appear at the top of the widget when starting a new chat. This will be visible to customers, so ensure this is set accurately.
Data collection:
Enable Collect data before chat starts to ask visitors for their contact details. A form will be shown before they can send a message. It's good practice here to ask for a customers contact details so that you can contact them again after the chat has ended on the website.
Form header: Customise the Title and Subtitle of the data collection form.
Details to request from visitors: Choose which fields to show (Name, Email, Phone number) and toggle whether they are Required.
Extra fields: Add up to 3 custom fields to collect more specific information.
Any extra information added will be created as a "Note" in the notes are of the customer information. You can ask any further qualifying questions here, for example "What is your membership number?" or "How many orders did you complete?" to gather extra information.
Additional customization:
Show home screen: If toggled off, visitors will go straight to the chat conversation view instead of seeing the home screen first.
Disable the chat widget on mobile: Enable this to hide the widget from visitors on mobile devices.
Hide "Powered by Zaapi" on the widget: Remove the Zaapi branding (this feature is only available on the Advanced plan).
Chat avatar:
Choose what picture customers see in the chat header.
Show logo: Displays your business logo at all times.
Show agent: Displays the profile picture of the agent handling the conversation.
After your widget is fully configured and saved, the final step is to add it to your website.
Navigate to the Install tab.
Under "1. Copy this code", click the Copy code button. This will copy the unique JavaScript snippet for your widget.
Paste this code snippet into your website's HTML source code just before the closing </body> tag. This will ensure the widget loads on every page of your site.
Publish the changes to your website. The chat widget should now be live!
Need help? For detailed, platform-specific instructions, use the step-by-step guides linked at the bottom of the Install page for services like Shopify, WordPress, Webflow, and more.