Configuring 3CX Live Chat for Drupal

Introduction

The 3CX Live chat software allows you to answer calls and messages from website visitors directly from 3CX. Read more about the Live Chat solution.

Step 1: Obtain your Code Snippet

During the 3CX Live Chat set-up process, you may have copied the code snippet. If not, you can obtain it as follows:

  1. Log into your 3CX Admin Console.
  2. Go to Voice & Chat, find your “Live Chat” and click on the information icon. Make sure to add your site URL to the “Your Website” field in the Live Chat settings. You can enter multiple website URLs, separated by commas.
  3. Copy the HTML code, save it to a notepad and proceed to step 2.

Step 2: Add the 3CX Live Chat Code Snippet

The free Drupal cloud hosting demo does not allow the injection of code snippets necessary for full customization. To access features requiring custom code injection, you must either install Drupal locally or use a hosting service that provides administrative access.

  1. Log in to the Drupal Admin Interface
  2. Open the Block Layout Section (Structure → Block layout): URL shortcut: /admin/structure/block (This is where you manage blocks — small content units that can be placed in various regions of your Drupal site.)
  3. Choose a Region (e.g., Footer): Scroll through the list of regions (these vary by theme — e.g., Header, Footer Top, Content Bottom, etc.).Click the “Place block” button next to the region.
  4. Create a Custom Block: In the popup that opens:
  • Click the gray “+ Add custom block” button at the top (or sometimes called "Add content block")
  • Choose block type: Basic block
  1. Add the Live Chat Code snippet, where you’ll now see the custom block creation screen with a text editor.
  2. In the Body field:
  • Click the “Source” button in the toolbar (This switches the editor to raw HTML mode)
  • Under the editor, find “Text format” and Select Full HTML (This is important!)
  • If you use Basic HTML or Filtered HTML, Drupal will strip out your <script> tag, and the widget will not load.
  • Paste your chat code obtained from the Webclient into the textarea
  1. Click “Save and Configure”.
  2. Hide the Block Title where under “Block title”, uncheck the option: “Display title”
  3. Place and Save the Block
  • After saving the block, you’ll return to the region selection
  • Choose the region (Footer, for example) and click Save block
  • Then click Save block layout at the bottom of the page
  1. Done! Your 3CX Livechat snippet is ready!

See also

Last Updated

This document was last updated on 10 September 2026

https://www.3cx.com/docs/drupal-live-chat/