Magento Integration Guide

Complete guide to integrate CallMeBack with Magento

Setup time: 10-15 minutes

Difficulty: Intermediate

Compatible versions: Magento 2.x

Integrate CallMeBack with your Magento store to capture leads from product pages, checkout abandonment, and customer inquiries. Magento powers over 250,000 e-commerce stores worldwide.

Prerequisites

A CallMeBack account - Sign up here
Your CallMeBack integration code from your dashboard
Magento admin access
Magento 2.x installation
Basic understanding of Magento theming
FTP/SFTP access (for advanced methods)

Integration Methods

Theme Integration

15 minutes Intermediate

Add CallMeBack to your Magento theme for comprehensive e-commerce lead capture. This provides the best integration with Magento's features.

Locate Theme Files

Find your active Magento theme files for modification.

Navigate to app/design/frontend/[Vendor]/[Theme]/
Or use app/design/frontend/Magento/luma/ for default theme
Create Magento_Theme/layout/ directory if it doesn't exist
Create default_head_blocks.xml file

Important Note

Always work with a custom theme or create theme inheritance to prevent losing changes during Magento updates.

Create Layout XML

Add CallMeBack using Magento's layout XML system.

Create or edit Magento_Theme/layout/default_head_blocks.xml
Add CallMeBack block to the head section
Save the file
Deploy static content if needed

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="https://widget.callmebackbutton.com/widget.js" />
        <script>
            require(['jquery'], function($) {
                $(document).ready(function() {
                    if (typeof CallMeBackWidget !== 'undefined') {
                        CallMeBackWidget.init({
                            account: 'YOUR_ACCOUNT_ID',
                            platform: 'magento',
                            ecommerce: true
                        });
                    } else {
                        var script = document.createElement('script');
                        script.src = 'https://widget.callmebackbutton.com/widget.js';
                        script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
                        script.setAttribute('data-magento', 'true');
                        script.setAttribute('data-ecommerce', 'true');
                        document.head.appendChild(script);
                    }
                });
            });
        </script>
    </head>
</page>

Important Note

Using Magento's RequireJS ensures proper loading order and compatibility with Magento's JavaScript framework.

Clear Cache and Deploy

Clear Magento cache and deploy static content for changes to take effect.

Run: php bin/magento cache:clean
Run: php bin/magento cache:flush
Run: php bin/magento setup:static-content:deploy
Test your store frontend

Important Note

Magento requires cache clearing and static content deployment after layout changes.

Admin Configuration

10 minutes Easy

Use Magento admin to add CallMeBack through content configuration. Quick but limited flexibility.

Access Content Configuration

Navigate to Magento admin content settings.

Log into Magento admin panel
Go to Content → Configuration
Select your store view
Click Edit next to your theme

Add HTML Head Content

Insert CallMeBack code in the HTML Head section.

Scroll to HTML Head section
In Scripts and Style Sheets field, add your code
Click Save Configuration
Clear cache

<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-magento', 'true');
  script.setAttribute('data-ecommerce', 'true');
  document.head.appendChild(script);
})();
</script>

Important Note

This method is simpler but provides less control over when and how CallMeBack loads.

Custom Module

25 minutes Advanced

Create a custom Magento module for CallMeBack integration. Best for developers who want full control and extensibility.

Create Module Structure

Set up the basic Magento module file structure.

Create directory: app/code/YourVendor/CallMeBack/
Create registration.php
Create etc/module.xml
Create etc/frontend/events.xml

<?php
// app/code/YourVendor/CallMeBack/registration.php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'YourVendor_CallMeBack',
    __DIR__
);

Important Note

Replace 'YourVendor' with your actual vendor name or company name.

Create Module Configuration

Configure the module with proper dependencies and version.

<?xml version="1.0"?>
<!-- app/code/YourVendor/CallMeBack/etc/module.xml -->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="YourVendor_CallMeBack" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Theme"/>
        </sequence>
    </module>
</config>

Important Note

The sequence ensures this module loads after Magento_Theme module.

Create Observer

Create an observer to inject CallMeBack into all pages.

<?php
// app/code/YourVendor/CallMeBack/Observer/AddCallMeBackScript.php

namespace YourVendor\CallMeBack\Observer;

use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\View\Page\Config;

class AddCallMeBackScript implements ObserverInterface
{
    protected $pageConfig;

    public function __construct(Config $pageConfig)
    {
        $this->pageConfig = $pageConfig;
    }

    public function execute(Observer $observer)
    {
        $this->pageConfig->addPageAsset('YourVendor_CallMeBack::js/callmeback.js');
    }
}

Important Note

This observer automatically adds CallMeBack to all frontend pages.

Enable and Test Module

Enable the module and verify it works correctly.

Run: php bin/magento module:enable YourVendor_CallMeBack
Run: php bin/magento setup:upgrade
Clear cache and deploy static content
Test on your store frontend

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
Magento admin access
Magento 2.x installation
Basic understanding of Magento theming
FTP/SFTP access (for advanced methods)

Integration Methods

Theme Integration

15 minutes Intermediate

Add CallMeBack to your Magento theme for comprehensive e-commerce lead capture. This provides the best integration with Magento's features.

Locate Theme Files

Find your active Magento theme files for modification.

Navigate to app/design/frontend/[Vendor]/[Theme]/
Or use app/design/frontend/Magento/luma/ for default theme
Create Magento_Theme/layout/ directory if it doesn't exist
Create default_head_blocks.xml file

Important Note

Always work with a custom theme or create theme inheritance to prevent losing changes during Magento updates.

Create Layout XML

Add CallMeBack using Magento's layout XML system.

Create or edit Magento_Theme/layout/default_head_blocks.xml
Add CallMeBack block to the head section
Save the file
Deploy static content if needed

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="https://widget.callmebackbutton.com/widget.js" />
        <script>
            require(['jquery'], function($) {
                $(document).ready(function() {
                    if (typeof CallMeBackWidget !== 'undefined') {
                        CallMeBackWidget.init({
                            account: 'YOUR_ACCOUNT_ID',
                            platform: 'magento',
                            ecommerce: true
                        });
                    } else {
                        var script = document.createElement('script');
                        script.src = 'https://widget.callmebackbutton.com/widget.js';
                        script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
                        script.setAttribute('data-magento', 'true');
                        script.setAttribute('data-ecommerce', 'true');
                        document.head.appendChild(script);
                    }
                });
            });
        </script>
    </head>
</page>

Important Note

Using Magento's RequireJS ensures proper loading order and compatibility with Magento's JavaScript framework.

Clear Cache and Deploy

Clear Magento cache and deploy static content for changes to take effect.

Run: php bin/magento cache:clean
Run: php bin/magento cache:flush
Run: php bin/magento setup:static-content:deploy
Test your store frontend

Important Note

Magento requires cache clearing and static content deployment after layout changes.

Admin Configuration

10 minutes Easy

Use Magento admin to add CallMeBack through content configuration. Quick but limited flexibility.

Access Content Configuration

Navigate to Magento admin content settings.

Log into Magento admin panel
Go to Content → Configuration
Select your store view
Click Edit next to your theme

Add HTML Head Content

Insert CallMeBack code in the HTML Head section.

Scroll to HTML Head section
In Scripts and Style Sheets field, add your code
Click Save Configuration
Clear cache

<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-magento', 'true');
  script.setAttribute('data-ecommerce', 'true');
  document.head.appendChild(script);
})();
</script>

Important Note

This method is simpler but provides less control over when and how CallMeBack loads.

Custom Module

25 minutes Advanced

Create a custom Magento module for CallMeBack integration. Best for developers who want full control and extensibility.

Create Module Structure

Set up the basic Magento module file structure.

Create directory: app/code/YourVendor/CallMeBack/
Create registration.php
Create etc/module.xml
Create etc/frontend/events.xml

<?php
// app/code/YourVendor/CallMeBack/registration.php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'YourVendor_CallMeBack',
    __DIR__
);

Important Note

Replace 'YourVendor' with your actual vendor name or company name.

Create Module Configuration

Configure the module with proper dependencies and version.

<?xml version="1.0"?>
<!-- app/code/YourVendor/CallMeBack/etc/module.xml -->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="YourVendor_CallMeBack" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Theme"/>
        </sequence>
    </module>
</config>

Important Note

The sequence ensures this module loads after Magento_Theme module.

Create Observer

Create an observer to inject CallMeBack into all pages.

<?php
// app/code/YourVendor/CallMeBack/Observer/AddCallMeBackScript.php

namespace YourVendor\CallMeBack\Observer;

use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\View\Page\Config;

class AddCallMeBackScript implements ObserverInterface
{
    protected $pageConfig;

    public function __construct(Config $pageConfig)
    {
        $this->pageConfig = $pageConfig;
    }

    public function execute(Observer $observer)
    {
        $this->pageConfig->addPageAsset('YourVendor_CallMeBack::js/callmeback.js');
    }
}

Important Note

This observer automatically adds CallMeBack to all frontend pages.

Enable and Test Module

Enable the module and verify it works correctly.

Run: php bin/magento module:enable YourVendor_CallMeBack
Run: php bin/magento setup:upgrade
Clear cache and deploy static content
Test on your store frontend

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

Magento Integration Guide

Prerequisites

Integration Methods

Theme Integration

Locate Theme Files

Important Note

Create Layout XML

Important Note

Clear Cache and Deploy

Important Note

Admin Configuration

Access Content Configuration

Add HTML Head Content

Important Note

Custom Module

Create Module Structure

Important Note

Create Module Configuration

Important Note

Create Observer

Important Note

Enable and Test Module

Troubleshooting

Still having issues?

Related Integrations

References & Official Documentation

Next Steps

Configure CallMeBack

Advanced Features

Need Help?

Magento Integration Guide

Prerequisites

Integration Methods

Theme Integration

Locate Theme Files

Important Note

Create Layout XML

Important Note

Clear Cache and Deploy

Important Note

Admin Configuration

Access Content Configuration

Add HTML Head Content

Important Note

Custom Module

Create Module Structure

Important Note

Create Module Configuration

Important Note

Create Observer

Important Note

Enable and Test Module

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!