Connecting an Online Chat to a Website via Bitrix24
The Bitrix24 online chat is a widget that is installed on any website and directs visitor messages to Bitrix24 open channels. It works regardless of the website platform: WordPress, 1C-Bitrix, custom-built — it is enough to insert the JS code.
How It Works
A website visitor clicks the chat widget → a dialog window opens → the message goes to the Bitrix24 open channel → the operator replies → the reply is displayed to the visitor on the website in real time.
Technically: the widget uses WebSocket to connect to Bitrix24 servers. Chat history is saved in the visitor's browser session (LocalStorage) and in Bitrix24.
Getting the Widget Code
Bitrix24 → CRM → Contact Center → Online Chat → "Create" → configure the appearance → copy the embed code.
The code looks approximately like this:
<script>
(function(w,d,u){
var s=d.createElement('script');
s.async=true;
s.src=u+'?'+(Date.now()/60000|0);
var h=d.getElementsByTagName('script')[0];
h.parentNode.insertBefore(s,h);
})(window,document,'https://yourcompany.bitrix24.ru/upload/crm/site_button/loader_X_XXXXXXXX.js');
</script>
This code is inserted before the closing </body> tag on every page where the chat is needed.
Installation on Different Website Types
WordPress / WooCommerce. Insert the code via the "Insert Headers and Footers" plugin or in functions.php of the active theme using the wp_footer hook.
1C-Bitrix. In the admin panel → Settings → Enabled Modules → insert in the site template's footer.php. Or through site structure management → components → HTML block.
React/Vue SPA. Add to index.html or initialize the script in the root application component via useEffect (React), checking that the DOM is ready.
Shopify / Tilda / Wix. Through the "Custom Code" or "HTML Block" section in the respective builders.
CRM Binding
When configuring the chat, specify:
- Open Channel — which channel the chat is linked to (sales, support).
- Lead creation — automatically on the first message.
-
Source — for example, "Website" or "Online Chat". Set in the lead's
SOURCE_IDfield.
If the visitor filled in a form with name/phone (when the pre-form mode is enabled) — the data automatically goes into the lead fields.
Identifying Returning Visitors
Bitrix24 identifies website visitors by the cookie BITRIX_SM_SALE_UID. If the visitor has already been on the site and chatted — history is preserved on their next visit. If the user is logged into the Bitrix24 portal (an employee) — the chat displays the corporate interface, not the client-facing one.
Common Issues
Widget doesn't appear on the site. Check: the code is inserted correctly (not truncated), there are no conflicts with the site's Content Security Policy (CSP). The CSP must allow scripts from *.bitrix24.ru and WebSocket connections.
Chat appears, but messages won't send. An ad blocker or corporate firewall is blocking the WebSocket connection to Bitrix24 servers.
Widget slows down page loading. The widget script loads asynchronously and should not affect LCP. If it does — check whether the code is inserted synchronously in <head>. Use async/defer attributes.
Mobile version: chat overlaps content. Configure the widget position (lower right/left corner) and offsets in the Bitrix24 widget settings. Separate bottom-edge offsets can be set for mobile.