# 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.

:::note[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.
   :::

   ![Drupal admin menu with Structure expanded and Block layout highlighted](/images/pbx/drupal9-path.png)

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

   ![Block layout page listing regions with the Place block button beside Footer Top](/images/pbx/drupal9-footer.png)

4. Create a custom block:

   
   ![Cloud Voice, custom block editor with the Body field set to Source view and the Live Chat snippet pasted in](/images/pbx/drupal9-add-block-pce.png)

   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.
   :::

   ![Block configuration page with Footer Top selected in the Region drop-down](/images/pbx/drupal9-block-region.png)

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.

![Cloud Voice, live website showing the chat widget docked in the bottom-right corner](/images/pbx/drupal9-website.png)