Drupal Integration Guide

Complete guide to integrate CallMeBack with Drupal

Setup time: 10-15 minutes

Difficulty: Intermediate

Compatible versions: Drupal 8.x, 9.x, 10.x

Integrate CallMeBack with your Drupal website to capture leads from contact forms, webforms, and custom forms. Drupal powers over 1 million websites worldwide and offers powerful content management capabilities.

Prerequisites

A CallMeBack account - Sign up here
Your CallMeBack integration code from your dashboard
Drupal admin access (Administrator role)
Drupal 8.x, 9.x, or 10.x installation
Basic understanding of Drupal modules (for custom module method)

Integration Methods

Custom Module

15 minutes Intermediate

Create a custom Drupal module for CallMeBack integration. This is the most maintainable and Drupal-friendly approach.

Create Module Directory

Set up the basic module structure in your Drupal installation.

Navigate to /modules/custom in your Drupal root directory
Create a new directory called callmeback_integration
Create the module info file callmeback_integration.info.yml

name: 'CallMeBack Integration'
type: module
description: 'Integrates CallMeBack lead capture widget with Drupal'
package: Custom
core_version_requirement: ^8 || ^9 || ^10
version: '1.0.0'
dependencies:
  - drupal:system

Important Note

The info.yml file defines your module and its dependencies. Make sure indentation is correct as YAML is sensitive to spacing.

Create Module Files

Add the main module files to handle CallMeBack integration.

Create callmeback_integration.module file
Create callmeback_integration.libraries.yml file
Create js/callmeback.js file in your module directory

<?php

/**
 * @file
 * CallMeBack Integration module.
 */

use Drupal\Core\Routing\RouteMatchInterface;

/**
 * Implements hook_help().
 */
function callmeback_integration_help($route_name, RouteMatchInterface $route_match) {
  switch ($route_name) {
    case 'help.page.callmeback_integration':
      return '<p>' . t('CallMeBack integration for capturing leads.') . '</p>';
  }
}

/**
 * Implements hook_page_attachments().
 */
function callmeback_integration_page_attachments(array &$attachments) {
  $attachments['#attached']['library'][] = 'callmeback_integration/callmeback';
}

Important Note

The hook_page_attachments() function ensures the CallMeBack script loads on every page.

Create Library Definition

Define the JavaScript library that will load CallMeBack on your site.

callmeback:
  js:
    js/callmeback.js: {}
  dependencies:
    - core/drupal
    - core/jquery

Important Note

Libraries in Drupal handle JavaScript and CSS loading efficiently. This ensures proper loading order and caching.

Add JavaScript File

Create the JavaScript file that initializes CallMeBack.

(function ($, Drupal, drupalSettings) {
  'use strict';

  Drupal.behaviors.callmebackIntegration = {
    attach: function (context, settings) {
      // Use once() to ensure the script only runs once per element
      $(context).find('body').once('callmeback').each(function() {
        // Load CallMeBack script dynamically
        var script = document.createElement('script');
        script.src = 'https://widget.callmebackbutton.com/widget.js';
        script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
        script.setAttribute('data-drupal', 'true');
        document.head.appendChild(script);
      });
    }
  };

})(jQuery, Drupal, drupalSettings);

Important Note

Replace 'YOUR_ACCOUNT_ID' with your actual CallMeBack account ID. The data-drupal attribute helps optimize for Drupal-specific features.

Enable and Test Module

Activate the module and verify the integration works.

Go to Extend in your Drupal admin
Find 'CallMeBack Integration' and check the checkbox
Click Install
Clear cache via Configuration → Performance → Clear all caches
Visit your site to verify the widget appears

Important Note

Always clear cache after enabling new modules. Check browser console for any JavaScript errors.

Theme Integration

10 minutes Easy

Add CallMeBack directly to your theme template. Quick setup but less maintainable.

Access Theme Files

Navigate to your active theme's template files.

Go to /themes/custom/your-theme or your theme directory
Create or edit templates/html.html.twig
If the file doesn't exist, copy it from core templates

Important Note

Always work with a custom theme or create a sub-theme to prevent losing changes during theme updates.

Add CallMeBack Code

Insert the CallMeBack integration code into your theme template.

{# templates/html.html.twig #}
<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token }}">
    <js-placeholder token="{{ placeholder_token }}">
    
    {# CallMeBack Integration #}
    <script>
    (function() {
      var script = document.createElement('script');
      script.src = 'https://widget.callmebackbutton.com/widget.js';
      script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
      script.setAttribute('data-drupal', 'true');
      document.head.appendChild(script);
    })();
    </script>
  </head>
  <body{{ attributes }}>
    <a href="#main-content" class="visually-hidden focusable">{{ 'Skip to main content'|t }}</a>
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token }}">
  </body>
</html>

Important Note

Replace 'YOUR_ACCOUNT_ID' with your actual account ID. This method requires re-adding code after theme updates.

Clear Cache and Test

Clear Drupal cache and verify the integration.

Go to Configuration → Performance
Click Clear all caches
Visit your website to test the integration
Check browser console for any errors

Custom Block

12 minutes Intermediate

Create a custom block with CallMeBack code for flexible placement.

Create Custom Block

Use Drupal's block system to add CallMeBack.

Go to Structure → Block layout
Click Custom block library
Click Add custom block
Choose Basic block

Add Block Content

Configure the block with CallMeBack integration code.

Set block description: 'CallMeBack Integration'
In the body field, switch to 'Full HTML' text format
Add the CallMeBack script in the body
Save the block

<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://widget.callmebackbutton.com/widget.js';
  script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
  script.setAttribute('data-drupal', 'true');
  document.head.appendChild(script);
})();
</script>

Important Note

This method allows you to place CallMeBack on specific pages or regions.

Place Block

Position the block in your site layout.

Return to Structure → Block layout
Find your 'CallMeBack Integration' block
Place it in a region (e.g., Header, Footer)
Configure visibility settings as needed
Save the layout

Troubleshooting

Still having issues?

Can't find the answer you're looking for? Our support team is here to help with your integration.

Contact Support

Related Integrations

References & Official Documentation

Next Steps

Configure CallMeBack

Set up your business hours and timezone
Configure callback phone numbers
Set up email notifications
Add team members to your account

Advanced Features

Set up custom form templates
Configure lead scoring rules
Integrate with your CRM
Set up automated workflows

Need Help?

Our support team is here to help you with your integration.

Contact Support

Prerequisites

A CallMeBack account - Sign up here
Your CallMeBack integration code from your dashboard
Drupal admin access (Administrator role)
Drupal 8.x, 9.x, or 10.x installation
Basic understanding of Drupal modules (for custom module method)

Integration Methods

Custom Module

15 minutes Intermediate

Create a custom Drupal module for CallMeBack integration. This is the most maintainable and Drupal-friendly approach.

Create Module Directory

Set up the basic module structure in your Drupal installation.

Navigate to /modules/custom in your Drupal root directory
Create a new directory called callmeback_integration
Create the module info file callmeback_integration.info.yml

name: 'CallMeBack Integration'
type: module
description: 'Integrates CallMeBack lead capture widget with Drupal'
package: Custom
core_version_requirement: ^8 || ^9 || ^10
version: '1.0.0'
dependencies:
  - drupal:system

Important Note

The info.yml file defines your module and its dependencies. Make sure indentation is correct as YAML is sensitive to spacing.

Create Module Files

Add the main module files to handle CallMeBack integration.

Create callmeback_integration.module file
Create callmeback_integration.libraries.yml file
Create js/callmeback.js file in your module directory

<?php

/**
 * @file
 * CallMeBack Integration module.
 */

use Drupal\Core\Routing\RouteMatchInterface;

/**
 * Implements hook_help().
 */
function callmeback_integration_help($route_name, RouteMatchInterface $route_match) {
  switch ($route_name) {
    case 'help.page.callmeback_integration':
      return '<p>' . t('CallMeBack integration for capturing leads.') . '</p>';
  }
}

/**
 * Implements hook_page_attachments().
 */
function callmeback_integration_page_attachments(array &$attachments) {
  $attachments['#attached']['library'][] = 'callmeback_integration/callmeback';
}

Important Note

The hook_page_attachments() function ensures the CallMeBack script loads on every page.

Create Library Definition

Define the JavaScript library that will load CallMeBack on your site.

callmeback:
  js:
    js/callmeback.js: {}
  dependencies:
    - core/drupal
    - core/jquery

Important Note

Libraries in Drupal handle JavaScript and CSS loading efficiently. This ensures proper loading order and caching.

Add JavaScript File

Create the JavaScript file that initializes CallMeBack.

(function ($, Drupal, drupalSettings) {
  'use strict';

  Drupal.behaviors.callmebackIntegration = {
    attach: function (context, settings) {
      // Use once() to ensure the script only runs once per element
      $(context).find('body').once('callmeback').each(function() {
        // Load CallMeBack script dynamically
        var script = document.createElement('script');
        script.src = 'https://widget.callmebackbutton.com/widget.js';
        script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
        script.setAttribute('data-drupal', 'true');
        document.head.appendChild(script);
      });
    }
  };

})(jQuery, Drupal, drupalSettings);

Important Note

Replace 'YOUR_ACCOUNT_ID' with your actual CallMeBack account ID. The data-drupal attribute helps optimize for Drupal-specific features.

Enable and Test Module

Activate the module and verify the integration works.

Go to Extend in your Drupal admin
Find 'CallMeBack Integration' and check the checkbox
Click Install
Clear cache via Configuration → Performance → Clear all caches
Visit your site to verify the widget appears

Important Note

Always clear cache after enabling new modules. Check browser console for any JavaScript errors.

Custom Block

12 minutes Intermediate

Create a custom block with CallMeBack code for flexible placement.

Create Custom Block

Use Drupal's block system to add CallMeBack.

Go to Structure → Block layout
Click Custom block library
Click Add custom block
Choose Basic block

Add Block Content

Configure the block with CallMeBack integration code.

Set block description: 'CallMeBack Integration'
In the body field, switch to 'Full HTML' text format
Add the CallMeBack script in the body
Save the block

<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://widget.callmebackbutton.com/widget.js';
  script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
  script.setAttribute('data-drupal', 'true');
  document.head.appendChild(script);
})();
</script>

Important Note

This method allows you to place CallMeBack on specific pages or regions.

Place Block

Position the block in your site layout.

Return to Structure → Block layout
Find your 'CallMeBack Integration' block
Place it in a region (e.g., Header, Footer)
Configure visibility settings as needed
Save the layout

Troubleshooting

Still having issues?

Can't find the answer you're looking for? Our support team is here to help with your integration.

Contact Support

References & Official Documentation

Next Steps

Configure CallMeBack

Set up your business hours and timezone
Configure callback phone numbers
Set up email notifications
Add team members to your account

Advanced Features

Set up custom form templates
Configure lead scoring rules
Integrate with your CRM
Set up automated workflows

Drupal Integration Guide

Prerequisites

Integration Methods

Custom Module

Create Module Directory

Important Note

Create Module Files

Important Note

Create Library Definition

Important Note

Add JavaScript File

Important Note

Enable and Test Module

Important Note

Theme Integration

Access Theme Files

Important Note

Add CallMeBack Code

Important Note

Clear Cache and Test

Custom Block

Create Custom Block

Add Block Content

Important Note

Place Block

Troubleshooting

Still having issues?

Related Integrations

References & Official Documentation

Next Steps

Configure CallMeBack

Advanced Features

Need Help?

Drupal Integration Guide

Prerequisites

Integration Methods

Custom Module

Create Module Directory

Important Note

Create Module Files

Important Note

Create Library Definition

Important Note

Add JavaScript File

Important Note

Enable and Test Module

Important Note

Theme Integration

Access Theme Files

Important Note

Add CallMeBack Code

Important Note

Clear Cache and Test

Custom Block

Create Custom Block

Add Block Content

Important Note

Place Block

Troubleshooting

Still having issues?

Related Integrations

References & Official Documentation

Next Steps

Configure CallMeBack

Advanced Features

Need Help?

Setup a Demo

Thank you for scheduling a demo!

Request a Call Back

Thank you for your request!

Join Our Waitlist

Welcome to the waitlist!