Webflow Integration Guide

Complete guide to integrate CallMeBack with Webflow

Setup time: 5-10 minutes

Difficulty: Easy

Compatible versions: All Webflow plans

Integrate CallMeBack with your Webflow website to capture leads from contact forms and custom interactions. Webflow powers over 3.5 million websites with its visual development platform.

Prerequisites

A CallMeBack account - Sign up here
Your CallMeBack integration code from your dashboard
Webflow site admin access
Published Webflow site (any plan)
Basic understanding of Webflow's interface

Integration Methods

Site-wide Custom Code

5 minutes Easy

Use Webflow's Custom Code feature to add CallMeBack across your entire site. This is the recommended method for most users.

Access Site Settings

Navigate to your Webflow site settings to add custom code.

Open your Webflow project
Click the Settings gear icon (top-left)
Go to Custom Code tab
You'll see Head Code and Footer Code sections

Important Note

Custom Code is available on all Webflow plans, including the free plan.

Add CallMeBack to Head Code

Insert your CallMeBack integration code in the Head Code section.

Click in the Head Code text area
Paste your CallMeBack integration code
Click Save Changes
Publish your site for changes to take effect

<!-- CallMeBack Integration for Webflow -->
<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-webflow', 'true');
  document.head.appendChild(script);
})();
</script>

Important Note

The data-webflow attribute helps optimize the widget for Webflow-specific features and responsive design.

Publish and Test

Publish your site and verify the CallMeBack integration works correctly.

Click Publish (top-right corner)
Visit your live website
Look for the CallMeBack widget
Test the callback form functionality
Check your CallMeBack dashboard for submissions

Important Note

Changes only appear on the published site, not in the Webflow designer preview.

Page-Specific Integration

8 minutes Easy

Add CallMeBack to specific pages using Webflow's page-level custom code settings.

Select Target Page

Choose the specific page where you want to add CallMeBack.

In the Webflow designer, select your target page
Click the Settings gear icon
Go to SEO tab
Scroll down to find custom code sections

Add Page-Level Code

Insert CallMeBack code in the page's custom code section.

Paste your code in Inside <head> tag
Click Save Changes
Repeat for other pages as needed
Publish your site

<script>
(function() {
  // Only load if not already loaded
  if (!window.callmebackWebflowLoaded) {
    var script = document.createElement('script');
    script.src = 'https://widget.callmebackbutton.com/widget.js';
    script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
    script.setAttribute('data-webflow', 'true');
    document.head.appendChild(script);
    window.callmebackWebflowLoaded = true;
  }
})();
</script>

Important Note

This method gives you control over which pages show the CallMeBack widget.

HTML Embed Element

10 minutes Intermediate

Use Webflow's HTML Embed element for advanced placement control within page layouts.

Add HTML Embed Element

Insert an HTML Embed element in your Webflow layout.

Drag an HTML Embed element from the Add panel
Position it where you want CallMeBack to initialize
Click the element to open the code editor

Configure Embed Code

Add CallMeBack initialization code to the embed element.

<script>
(function() {
  // Initialize CallMeBack with advanced options
  if (!window.callmebackEmbedLoaded) {
    var script = document.createElement('script');
    script.src = 'https://widget.callmebackbutton.com/widget.js';
    script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
    script.setAttribute('data-webflow', 'true');
    script.setAttribute('data-trigger-element', 'embed');
    document.head.appendChild(script);
    window.callmebackEmbedLoaded = true;
  }
})();
</script>

<div style="height: 1px; visibility: hidden;"><!-- CallMeBack Embed --></div>

Important Note

The invisible div ensures the embed has content while CallMeBack creates its own UI.

Style and Position

Configure the embed element's styling and position.

Set the embed width to 100% and height to auto
Position the element appropriately in your layout
The embed itself will be invisible
Save and publish your site

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
Webflow site admin access
Published Webflow site (any plan)
Basic understanding of Webflow's interface

Integration Methods

Site-wide Custom Code

5 minutes Easy

Use Webflow's Custom Code feature to add CallMeBack across your entire site. This is the recommended method for most users.

Access Site Settings

Navigate to your Webflow site settings to add custom code.

Open your Webflow project
Click the Settings gear icon (top-left)
Go to Custom Code tab
You'll see Head Code and Footer Code sections

Important Note

Custom Code is available on all Webflow plans, including the free plan.

Add CallMeBack to Head Code

Insert your CallMeBack integration code in the Head Code section.

Click in the Head Code text area
Paste your CallMeBack integration code
Click Save Changes
Publish your site for changes to take effect

<!-- CallMeBack Integration for Webflow -->
<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-webflow', 'true');
  document.head.appendChild(script);
})();
</script>

Important Note

The data-webflow attribute helps optimize the widget for Webflow-specific features and responsive design.

Publish and Test

Publish your site and verify the CallMeBack integration works correctly.

Click Publish (top-right corner)
Visit your live website
Look for the CallMeBack widget
Test the callback form functionality
Check your CallMeBack dashboard for submissions

Important Note

Changes only appear on the published site, not in the Webflow designer preview.

Page-Specific Integration

8 minutes Easy

Add CallMeBack to specific pages using Webflow's page-level custom code settings.

Select Target Page

Choose the specific page where you want to add CallMeBack.

In the Webflow designer, select your target page
Click the Settings gear icon
Go to SEO tab
Scroll down to find custom code sections

Add Page-Level Code

Insert CallMeBack code in the page's custom code section.

Paste your code in Inside <head> tag
Click Save Changes
Repeat for other pages as needed
Publish your site

<script>
(function() {
  // Only load if not already loaded
  if (!window.callmebackWebflowLoaded) {
    var script = document.createElement('script');
    script.src = 'https://widget.callmebackbutton.com/widget.js';
    script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
    script.setAttribute('data-webflow', 'true');
    document.head.appendChild(script);
    window.callmebackWebflowLoaded = true;
  }
})();
</script>

Important Note

This method gives you control over which pages show the CallMeBack widget.

HTML Embed Element

10 minutes Intermediate

Use Webflow's HTML Embed element for advanced placement control within page layouts.

Add HTML Embed Element

Insert an HTML Embed element in your Webflow layout.

Drag an HTML Embed element from the Add panel
Position it where you want CallMeBack to initialize
Click the element to open the code editor

Configure Embed Code

Add CallMeBack initialization code to the embed element.

<script>
(function() {
  // Initialize CallMeBack with advanced options
  if (!window.callmebackEmbedLoaded) {
    var script = document.createElement('script');
    script.src = 'https://widget.callmebackbutton.com/widget.js';
    script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
    script.setAttribute('data-webflow', 'true');
    script.setAttribute('data-trigger-element', 'embed');
    document.head.appendChild(script);
    window.callmebackEmbedLoaded = true;
  }
})();
</script>

<div style="height: 1px; visibility: hidden;"><!-- CallMeBack Embed --></div>

Important Note

The invisible div ensures the embed has content while CallMeBack creates its own UI.

Style and Position

Configure the embed element's styling and position.

Set the embed width to 100% and height to auto
Position the element appropriately in your layout
The embed itself will be invisible
Save and publish your site

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

Webflow Integration Guide

Prerequisites

Integration Methods

Site-wide Custom Code

Access Site Settings

Important Note

Add CallMeBack to Head Code

Important Note

Publish and Test

Important Note

Page-Specific Integration

Select Target Page

Add Page-Level Code

Important Note

HTML Embed Element

Add HTML Embed Element

Configure Embed Code

Important Note

Style and Position

Troubleshooting

Still having issues?

Related Integrations

References & Official Documentation

Next Steps

Configure CallMeBack

Advanced Features

Need Help?

Webflow Integration Guide

Prerequisites

Integration Methods

Site-wide Custom Code

Access Site Settings

Important Note

Add CallMeBack to Head Code

Important Note

Publish and Test

Important Note

Page-Specific Integration

Select Target Page

Add Page-Level Code

Important Note

HTML Embed Element

Add HTML Embed Element

Configure Embed Code

Important Note

Style and Position

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!