Magento Integration Guide

Complete guide to integrate MyFormConnect with Magento

Setup time: 10-15 minutes

Difficulty: Intermediate

Compatible versions: Magento 2.x

Integrate MyFormConnect 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 MyFormConnect account - Sign up here
Your MyFormConnect 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 MyFormConnect 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 MyFormConnect using Magento's layout XML system.

Create or edit Magento_Theme/layout/default_head_blocks.xml
Add MyFormConnect 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 MyFormConnect 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 MyFormConnect 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 MyFormConnect loads.

Custom Module

25 minutes Advanced

Create a custom Magento module for MyFormConnect 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/MyFormConnect/
Create registration.php
Create etc/module.xml
Create etc/frontend/events.xml

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

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'YourVendor_MyFormConnect',
    __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/MyFormConnect/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_MyFormConnect" 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 MyFormConnect into all pages.

<?php
// app/code/YourVendor/MyFormConnect/Observer/AddMyFormConnectScript.php

namespace YourVendor\MyFormConnect\Observer;

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

class AddMyFormConnectScript implements ObserverInterface
{
    protected $pageConfig;

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

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

Important Note

This observer automatically adds MyFormConnect to all frontend pages.

Enable and Test Module

Enable the module and verify it works correctly.

Run: php bin/magento module:enable YourVendor_MyFormConnect
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 MyFormConnect

Set up your timezone
Configure lead notifications
Set up advanced spam detection
Add team members to your account

Advanced Features

Use our custom form templates
Try AI Insights for Leads
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 MyFormConnect account - Sign up here
Your MyFormConnect 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 MyFormConnect 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 MyFormConnect using Magento's layout XML system.

Create or edit Magento_Theme/layout/default_head_blocks.xml
Add MyFormConnect 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 MyFormConnect 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 MyFormConnect 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 MyFormConnect loads.

Custom Module

25 minutes Advanced

Create a custom Magento module for MyFormConnect 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/MyFormConnect/
Create registration.php
Create etc/module.xml
Create etc/frontend/events.xml

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

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'YourVendor_MyFormConnect',
    __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/MyFormConnect/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_MyFormConnect" 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 MyFormConnect into all pages.

<?php
// app/code/YourVendor/MyFormConnect/Observer/AddMyFormConnectScript.php

namespace YourVendor\MyFormConnect\Observer;

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

class AddMyFormConnectScript implements ObserverInterface
{
    protected $pageConfig;

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

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

Important Note

This observer automatically adds MyFormConnect to all frontend pages.

Enable and Test Module

Enable the module and verify it works correctly.

Run: php bin/magento module:enable YourVendor_MyFormConnect
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 MyFormConnect

Set up your timezone
Configure lead notifications
Set up advanced spam detection
Add team members to your account

Advanced Features

Use our custom form templates
Try AI Insights for Leads
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 MyFormConnect

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 MyFormConnect

Advanced Features

Need Help?

MyFormConnect - Request Demo

Thank you for scheduling a demo!

MyFormConnect - Any issues?

Thank you for your request!

MyFormConnect - Tailored Solution