Home · Blog · Online chat for a website: widget in 5 minutes
Online chat for a website: widget in 5 minutes
Online chat on a website is not needed for the sake of “chatting”: the visitor asks a question while he is interested, and leaves if there is no answer. The CHBT widget is the same bot that works in Telegram, MAX and VK, only on your page: the script responds instantly, the person connects when needed, and the contact is saved even if you were sleeping. Below is how to install it in five minutes and what to include so that leads are not lost.
Step 1. Create a widget and get the embed code
Register at app.chbt.io, create a bot (one on the Free plan) and open the section in the project menu “Widget”. If the channel has not yet been created, there will be one button - “Create widget”. Clicked - a key appeared at the channel, and a block at the bottom of the page "Embed code":
<script src="https://app.chbt.io/w.js" data-key="YOUR_KEY" data-color="#6366f1" data-title="Chat" data-position="right"></script>One line before closing </body>. On Tilda, WordPress and Bitrix it is inserted through the standard setting “your own HTML code for all pages”, on a self-written website - directly into the template; There are no differences in the code for different platforms. No hosting or server is needed: the script is loaded from app.chbt.io, and the conversations go through a secure connection to your account.
The widget is isolated from the page layout: site styles do not break the chat window, and the chat window does not affect your site - you can put it on any theme without CSS edits. Color, title and position (right or left) are set in the settings and are picked up automatically - you don’t have to rewrite the code on the site.
Step 2. Customize the appearance and greeting
In the block "Appearance" four fields: window title, position, button color and agent name. The name and avatar are what the visitor will see in the chat header: “Anna” with a photo is more trustworthy than the faceless “Chat”. The link to the avatar can be taken from your own website.
Greetings — the first message that appears when the window opens. Don't write "Hello, how can we help you?" - it doesn't convey anything. It’s better to immediately indicate what can be done here: “I’ll advise you on prices and terms, I’ll make an appointment for measurements. Write a question or click the button.” Buttons and branches are configured already in the script - there is a separate trigger in the “flows” section “Opening a widget”, which is triggered as soon as a person opens the chat, even before the first message.
On the Free plan, the window will contain the signature “CHBT”. On Basic and Business, it is unchecked - the insertion code will update itself (parameter data-brand).
Step 3. Pre-chat form or “Leave contacts” button
There are two ways to get a contact from a widget, and they should not be enabled at the same time.
Pre-chat form (“Ask for contacts before starting a conversation”) shows the fields before the first message. For each of the three fields - name, email, phone - there is a “required” checkbox. This is a tough option: some visitors will close the window without filling out the form. It makes sense for B2B and long-cycle services where asking without contact makes no sense.
“Leave contacts” button in chat (block “Collect contacts”, enabled by default) - soft option: first a conversation, then a form, when the person decides. Whatever he enters, CHBT will check the format: email must be similar to email, the phone must have at least some numbers, and at least one of the two is required. A valid contact falls into the section “Contacts” with the tag “widget lead”, and in CRM The “Lead from website - Name” card will appear in the “New” column. Duplicates are not created: resending from the same session will update the contact, and will not open a second deal.
Tip: for an online store or delivery, leave only the button, and transfer the phone collection to the script - the “Data Collection” block with the “Phone” check will ask for the number at the right moment in the conversation, and not at the entrance.
Step 4. Transfer to the operator and “online” status
The bot closes the standard one, but the question is “can I get a discount if I take three?” must reach the person. There is a block for this in the script “Operator” (category “Actions”). Place it in the “Call a person” thread and on the “Another question” button after the FAQ. What happens when triggered:
- the conversation receives the “Operator” status and appears in the “Conversations” on the “Awaiting response” tab;
- everyone who has an open account receives a notification; if push is enabled in the browser (section “Account → Notifications”), it will arrive even when the tab is closed;
- the bot is silent and does not interfere with correspondence until the operator clicks “Return to bot” - then the flow continues;
- the operator sees what the visitor is typing, and the visitor sees what the operator is typing.
The “online” indicator in the widget header is honest: it lights up as long as someone on the team has an account CHBT open. Once everyone has left, the status changes. There is no need to manually “leave the line” - the widget itself understands whether someone is there.
Step 5. Business Hours and Offline Message
The chat shouldn’t be silent at night, but you can’t promise “we’ll answer in a minute.” Turn on in block "Working hours" check the “Show offline message outside business hours” checkbox and write the text: “We are offline until 10:00. Leave your question and phone number and we’ll call you back in the morning.” This text will replace the standard “we usually answer quickly” while there is no one in the office.
The script itself continues to work: the bot responds to buttons, collects contacts, and distributes requests to the CRM. If an offline conversation has reached the “Operator” block, it will simply wait until morning in the “Conversations” - nothing is lost. More subtle behavior by time of day is configured by the “Time” condition in the script: more about this in the article about answering machine, reception is the same for all channels.
Files: screenshots, contracts, layouts
There is a paperclip next to the input field in the widget. The visitor can send an image (JPG, PNG, GIF, WebP), PDF, Word or Excel document, text file or ZIP - up to 10 MB. The file appears in the operator’s “Conversations” with previews for pictures and a link for others. The operator can also send a file from the account: price list, contract, directions.
For service businesses, this is often the main argument for a widget: “send a photo of the breakdown” works much better in chat than “send by email.”
Proactive messages - be careful
The "Proactive messages" in the widget settings allows the bot to speak first: the widget itself will offer help at the right time, rather than waiting for the visitor to find the button. Rules are collected visually - button "+Add rule" opens a five-part form:
- When — immediately, after N seconds on the page, when scrolling to N%, after N seconds of inactivity, or when leaving the site (the cursor has moved to the top border of the window; this rule only works on the desktop).
- Where — on all pages or only where the URL contains, begins with, or is equal to a given value (several options through
|); a separate field for exception pages, such as cart and checkout. - Devices - everything, only desktop or only mobile.
- Action — a “bubble” with text next to the chat button, which does not interfere with reading the page, or immediately open a chat with a message. You can add up to three quick replies to the text: a click sends the button text as a message and opens a conversation.
- How often — once per visit, once every N days or every time. Beyond this, the widget itself pauses: no more than one impression per 30 seconds, no more than three per page view, and is silent if the chat is already open or the visitor wrote himself.
In order not to collect rules from scratch, there are three ready-made ones nearby: "Help in 20 seconds", “Are you leaving? Leave a question" (leaving the site, once every 7 days) and "On the pricing page" (after 5 seconds on pages with /price or /pricing). Each preset is a common rule; the texts in it can be rewritten to suit your needs. For those who are accustomed to configs, there is “Advanced: JSON” under the list, but it is not needed for typical tasks.
The working minimum is one bubble rule on the pricing page: “Select a plan for your volume?” It’s not worth opening a chat on every page after 5 seconds: it’s annoying and hurts conversions more than it helps. The second reasonable rule is to “leave the site” by opening a chat and asking to leave a question: it works once and only on the desktop, so it’s almost never superfluous.
What is included in the free plan and when will it last?
The request “chat on a site for free” usually means one of two things: either “free forever for a small site” or “free to try and then we’ll decide.” The free plan CHBT covers both flows, but with clear boundaries - it is better to know them before installation than to discover them on the 31st conversation.
What is available on Free without restrictions on functions. The entire widget: appearance, greeting, pre-chat form and “Leave contacts” button, working hours with an offline message, files in both directions, proactive messages, list of allowed domains, JS API. flow in “Steps” mode with all blocks - “Message”, “Data collection”, “Condition”, “Operator”. Sections “Dialogs”, “Contacts” with CSV and “CRM” upload. Notifications by email and push in the browser. Plus other channels of the same bot - Telegram, MAX and VKontakte - in one project.
Where are the borders?
- Signature "CHBT" in the chat window. Can only be removed on Basic and higher.
- 30 conversations per month. A conversation is a unique visitor who has written at least one message to the chat in a calendar month. It is considered for the entire project, together with Telegram and MAX, if they are connected. When the limit is exhausted, correspondence with visitors who have already written this month continues as usual, and the bot responds to new ones with a short message about the limit instead of a script, and their messages do not appear in “Conversations” - until the first day of the next month, when the counter is reset, or until the transition to a paid plan. The “N out of 30” counter is on the “Overview” page of the bot.
- One operator. The account is opened by the account owner; You cannot invite a second person to “Access” on Free. This is enough for one manager or the business owner himself, but not for a shift of three people.
- Without AI agent and broadcasts, editor - only “Steps” without a visual “Canvas”. For a widget with a button script and transmission to the operator, these functions are not needed.
When Free lasts a long time. A service site with five to twenty requests per month: dentistry in a small town, lawyer, equipment repair, local B2B. Landing page where chat is needed as a backup path to the lead next to the form. Seasonal project for two months. Testing the hypothesis “do they even write to the chat?” - in one month you will see the real number of requests, and the decision on the plan will become obvious. How many people wrote to the bot is shown by the “N out of 30” counter (it is common to all channels of the project). The line “Widget on the site” in the “By Channels” block of the “Analytics” section counts more broadly: its conversations for 30 days also include those who opened the chat window, but did not write anything.
When the limit ends on the tenth day. An online store or delivery with live traffic, a site with several thousand visitors a day, any situation where three or more new people write to the chat per day. Here the Free plan is only for the first days for setup. Basic for 650 ₽ per bot per month removes the conversation limit and signature, opens a team of operators, Canvas, mailing lists and an AI agent - if the questions are of the same type, it will take the first line, as described in the article about AI consultant on the site. The transition takes a minute in the “Payment” section; the widget code on the site does not need to be changed.
What to check before starting
- Open the site from a phone or browser where you have not logged in, and write to the chat - the message should appear in “Conversations”.
- Click “Leave contacts” with a test email - check the card in CRM and the letter about a new lead (included in “Account → Notifications”).
- Go to the “Operator” block and answer from your account - the answer should come to the widget.
- Close your account and make sure that the offline message appears in the widget header.
The free plan gives 30 conversations per month per bot - this is enough to understand how many questions actually come from the site. Next, Basic removes the limits and signature. The same script that answers on the site connects to Telegram and MAX — just insert the bot token in the “Channels” section; requests from all channels will be in the same “Conversations” and one CRM.
“Support” templateTemplate "Autoresponder FAQ"Plans