Adding live chat to your website

Live chat is a chat window located in the corner of your website; visitors can message you directly from your site, and the messages are delivered to your CRM inbox. To set it up, all you need to do is add a single line of code to your site.

• Live Chat SettingsSetup Code, Appearance, and Security
• OverviewPlatform steps and instructions for your web administrator
• InboxReply to Chats

Installation

1. Copy the code — Go to the "Settings" > "Live Chat" page, open the "Install" tab, and click the "Copy Code" button on the "Widget Code" card.
2. Paste this into your site — Place the code on every page of your site, immediately before the closing </head> tag. If your site uses a shared template or style sheet, you only need to add it there once.
3. Check — Open your site; the chat initiator (bubble) should appear in the corner.

Administrators can also set up the software from the "Get Started in a Few Steps" section on the Overview page: The "Install on the Platform" button displays step-by-step instructions for WordPress, Shopify, Wix, Squarespace, Webflow, Google Tag Manager, Joomla, and "Other / Plain HTML." "Send instructions to your web administrator" sends the code and steps to the email address you provide; any replies will be forwarded to you.

If you want to chat without installing the widget, you can share the direct link to the chat page by selecting "Copy Link" from the "Chat Page" card on the Widget tab.

Appearance and Text

Any changes you make on the "Widget" tab will appear in the live preview on the right; when you're done, click the "Save Changes" button. Main cards:

• Home screen → Screen displayed when the widget opens: avatars, Help Center card, Requests section.
• Messages → "Welcome," "Anonymous Welcome" (when the visitor's name is unknown), and "Login" text.
• Background and Links → The color or image behind the welcome screen; shortcuts to be listed on the main screen.
• Chat screen → "Welcome message" (the first speech bubble in a new chat), placeholder text, "No agents available" and "Customer is in queue" texts.
• Pre-chat form / Post-chat form → Fields to be asked before the first message; a brief rating or feedback form to be displayed after the chat ends.
• Screens → Which tabs appear in the bottom navigation bar and the default screen.
• Launcher → Custom icon (JPG, PNG, or GIF smaller than 100 KB), position (Left or Right), and margins.
• Style → Light and dark logos, "Default widget theme" (Light, Dark, or System).

You can translate the text into other languages on the Localization page.

When no one is online

If no one from your team is online, the visitor will see the message “No agents available.” The chat remains open; if the visitor is not in the chat when you respond, your reply will be sent to them via email. This requires the visitor’s email address, so we recommend collecting it using the “Pre-chat form.”

In the "Timeouts" tab, you specify what happens to unanswered chats. Each rule is enabled with a separate key, and the duration is entered in minutes:

• Transfer to Another Agent (5 minutes after opening): If the agent does not respond, the customer is transferred to another available agent; in groups with manual assignment, the chat is placed in a queue.
• Mark chat as inactive (10 minutes): Inactive chats do not count toward the agent’s concurrent chat limit.
• Close chat (15 minutes): The customer can reopen the chat by typing a new message in the same chat.

The "Visitor Cleanup" option on the same tab determines how many days anonymous visitors who have never written to you will be retained (default: 30 days).

Trusted domain names

In the "Trusted Domains" field under the "Security" tab, enter the domain names where the widget can be loaded, separated by commas. Use the format *.example.com for all subdomains. If the field is left blank, the widget can be added to any site. Don’t forget to save your changes by clicking "Save Changes."

Verifying visitor identity

To securely match users logged in to your site with customer records in the CRM, you sign the visitor’s email address on your server using a secret key (HMAC-SHA256).

1. Retrieve the secret key — On the "Security" tab, under the "Authentication" card, click "Show secret key," then "Copy secret key." Store the key only on your server.
2. Generate the signature on the server — Use your private key to compute the HMAC-SHA256 hash of the message (which is the visitor’s email address), and output the result as hexadecimal text.
3. Add to page — Include the email and signature inside window.BeChatSettings before the widget code.
4. If you wish, make it mandatory — check the "Require authentication" box and click the "Save Changes" button.

Signing with Node.js:

const crypto = require('crypto');

const emailHash = crypto
  .createHmac('sha256', process.env.CANLI_SOHBET_GIZLI_ANAHTAR)
  .update(kullanici.email)
  .digest('hex');

PHP signature:

$emailHash = hash_hmac('sha256', $kullanici['email'], getenv('CANLI_SOHBET_GIZLI_ANAHTAR'));

On the page, before the widget code:

<script>
  window.BeChatSettings = {
    user: {
      email: "musteri@ornek.com",
      email_hash: "SUNUCUNUZDA_URETILEN_IMZA"
    }
  };
</script>
<!-- Ardından "Yükle" sekmesinden kopyaladığınız widget kodu -->

If the signature is valid, the visitor is linked to the customer record associated with that email (otherwise, a new record is created), and their email is considered verified; the "Email Verified" line in the customer panel displays "Yes." Any other fields you add to the same object are written to a customer attribute defined by the same key, if one exists. When “Require authentication” is enabled, user data without a valid signature is ignored, and the visitor continues anonymously.

Visitor's source

In the customer panel on the right side of the conversation, you can see where the visitor came from:

• Source: Landing page, Referrer, and UTM source, tool, campaign, term, and content values. These are recorded once during the first visit; subsequent navigation within the site and referrals from your own site do not change them.
• Location and language: Browser language and time zone. If the language or time zone is left blank in the user profile, it will be populated based on the visit; manually entered values will not be overwritten.
• Device: Browser, Operating System, Device, IP Address, and Session Country.

Related articles

• Website campaigns
• Meet BLE AI
• Customer Profile
• Overview of Channels