Enable Live Chat on a Drupal Website

Once you have generated the Cloud Voice Live Chat code snippet, you can embed it in a Drupal site. The snippet renders a chat widget in the lower-right corner of your pages, giving visitors a direct line to your agents.

The steps below apply to Drupal 9.

Before you begin

Have the Live Chat code snippet ready. The snippet is a short block of HTML (HyperText Markup Language, the code that builds web pages) that you copy from Cloud Voice when you set up Live Chat. Keep it on your clipboard or in a text file so you can paste it during step 4.

Add the widget to your Drupal site

1. Sign in to the admin panel of your Drupal site.

2. In the top navigation bar, choose Structure > Block layout.

   Note

   In Drupal, a “block” is a piece of content, and “Block layout” controls which blocks appear in each region (header, footer, sidebar, and so on) of your site theme. You will place the chat widget as a new block here.

   

3. Scroll to the bottom of the page and select Place block next to Footer Top.

   

4. Create a custom block:

   

   1. Click Add custom block.

   2. In the Block description field, type a brief label for the block (for example, Live Chat widget). This name is for your reference only and is not shown to visitors.

   3. In the Body field, click Source, then paste the code snippet.

      Note

      The Body field is a rich-text (WYSIWYG, “what you see is what you get”) editor. Clicking Source switches it to raw HTML view. You must paste the snippet in Source view, otherwise the editor treats the code as plain text and the widget will not work.

   4. From the Text format drop-down list, select Full HTML.

      Caution

      Full HTML is required. Drupal’s other text formats strip out <script> tags for security, which would remove the Live Chat code and stop the widget from loading. If the widget never appears, check that this block is set to Full HTML.

   5. Click Save.

5. Scroll to the bottom of the page and select Footer Top from the Region drop-down list.

   Tip

   The chat widget floats in the lower-right corner on its own, so the exact region does not change where it appears. What matters is that you pick a region (such as Footer Top) that is present on every page, so the widget loads across the whole site.

   

6. Click Save block.

Result

Open your Drupal site and confirm the Live Chat widget now appears in the lower-right corner. Visitors can click it to start a real-time conversation with your agents.