Static Sites Integration Guide

Complete guide to integrate CallMeBack with Static Sites

Setup time: 5 minutes

Difficulty: Easy

Compatible versions: All HTML/CSS/JS sites

Integrate CallMeBack with any static website built with HTML, CSS, and JavaScript. Perfect for custom-built sites, GitHub Pages, Netlify, Vercel, and other static hosting platforms.

Prerequisites

A CallMeBack account - Sign up here
Your CallMeBack integration code from your dashboard
Access to your website's HTML files
Basic understanding of HTML structure
FTP access or file manager (for hosted sites)

Integration Methods

HTML Head Integration

3 minutes Easy

Add CallMeBack directly to your HTML head section for site-wide integration.

Locate HTML Head Section

Find the head section in your main HTML template or index file.

Open your main HTML file (usually index.html)
Locate the <head> section
Find the closing </head> tag

Important Note

For multi-page sites, you may need to add this to multiple HTML files or a shared template.

Add CallMeBack Code

Insert the CallMeBack integration code just before the closing head tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Website</title>
  
  <!-- Your existing head content -->
  
  <!-- 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-static', 'true');
    document.head.appendChild(script);
  })();
  </script>
</head>

Important Note

Replace 'YOUR_ACCOUNT_ID' with your actual CallMeBack account ID from your dashboard.

Upload and Test

Upload your updated files and verify the integration works.

Save your HTML file
Upload to your web server via FTP or file manager
Clear browser cache and visit your site
Look for the CallMeBack widget
Test the callback form functionality

JavaScript Module

8 minutes Intermediate

Load CallMeBack as a JavaScript module for modern JavaScript applications.

Create CallMeBack Module

Create a dedicated JavaScript module for CallMeBack integration.

Create a new file called callmeback.js
Add the CallMeBack initialization code
Export the module for use in your application

// callmeback.js
class CallMeBackIntegration {
  constructor(accountId) {
    this.accountId = accountId;
    this.initialized = false;
  }

  async init() {
    if (this.initialized) return;
    
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = 'https://widget.callmebackbutton.com/widget.js';
      script.setAttribute('data-account', this.accountId);
      script.setAttribute('data-static', 'true');
      
      script.onload = () => {
        this.initialized = true;
        resolve();
      };
      
      script.onerror = () => {
        reject(new Error('Failed to load CallMeBack widget'));
      };
      
      document.head.appendChild(script);
    });
  }
}

export default CallMeBackIntegration;

Import and Initialize

Import the module in your main JavaScript file and initialize it.

// main.js
import CallMeBackIntegration from './callmeback.js';

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', async () => {
  const callmeback = new CallMeBackIntegration('YOUR_ACCOUNT_ID');
  
  try {
    await callmeback.init();
    console.log('CallMeBack widget loaded successfully');
  } catch (error) {
    console.error('Failed to load CallMeBack:', error);
  }
});

Important Note

This approach provides better error handling and integration with modern JavaScript applications.

Asynchronous Loading

5 minutes Easy

Load CallMeBack asynchronously to improve page performance.

Add Async Script

Implement asynchronous loading to prevent blocking page render.

<!-- Place this anywhere in your HTML body -->
<script>
(function() {
  // Create script element
  var script = document.createElement('script');
  script.src = 'https://widget.callmebackbutton.com/widget.js';
  script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
  script.setAttribute('data-static', 'true');
  script.async = true;
  
  // Add error handling
  script.onerror = function() {
    console.warn('CallMeBack widget failed to load');
  };
  
  // Load when DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() {
      document.head.appendChild(script);
    });
  } else {
    document.head.appendChild(script);
  }
})();
</script>

Important Note

Asynchronous loading prevents the CallMeBack script from blocking page rendering, improving user experience.

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
Access to your website's HTML files
Basic understanding of HTML structure
FTP access or file manager (for hosted sites)

Integration Methods

HTML Head Integration

3 minutes Easy

Add CallMeBack directly to your HTML head section for site-wide integration.

Locate HTML Head Section

Find the head section in your main HTML template or index file.

Open your main HTML file (usually index.html)
Locate the <head> section
Find the closing </head> tag

Important Note

For multi-page sites, you may need to add this to multiple HTML files or a shared template.

Add CallMeBack Code

Insert the CallMeBack integration code just before the closing head tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Website</title>
  
  <!-- Your existing head content -->
  
  <!-- 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-static', 'true');
    document.head.appendChild(script);
  })();
  </script>
</head>

Important Note

Replace 'YOUR_ACCOUNT_ID' with your actual CallMeBack account ID from your dashboard.

Upload and Test

Upload your updated files and verify the integration works.

Save your HTML file
Upload to your web server via FTP or file manager
Clear browser cache and visit your site
Look for the CallMeBack widget
Test the callback form functionality

JavaScript Module

8 minutes Intermediate

Load CallMeBack as a JavaScript module for modern JavaScript applications.

Create CallMeBack Module

Create a dedicated JavaScript module for CallMeBack integration.

Create a new file called callmeback.js
Add the CallMeBack initialization code
Export the module for use in your application

// callmeback.js
class CallMeBackIntegration {
  constructor(accountId) {
    this.accountId = accountId;
    this.initialized = false;
  }

  async init() {
    if (this.initialized) return;
    
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = 'https://widget.callmebackbutton.com/widget.js';
      script.setAttribute('data-account', this.accountId);
      script.setAttribute('data-static', 'true');
      
      script.onload = () => {
        this.initialized = true;
        resolve();
      };
      
      script.onerror = () => {
        reject(new Error('Failed to load CallMeBack widget'));
      };
      
      document.head.appendChild(script);
    });
  }
}

export default CallMeBackIntegration;

Import and Initialize

Import the module in your main JavaScript file and initialize it.

// main.js
import CallMeBackIntegration from './callmeback.js';

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', async () => {
  const callmeback = new CallMeBackIntegration('YOUR_ACCOUNT_ID');
  
  try {
    await callmeback.init();
    console.log('CallMeBack widget loaded successfully');
  } catch (error) {
    console.error('Failed to load CallMeBack:', error);
  }
});

Important Note

This approach provides better error handling and integration with modern JavaScript applications.

Asynchronous Loading

5 minutes Easy

Load CallMeBack asynchronously to improve page performance.

Add Async Script

Implement asynchronous loading to prevent blocking page render.

<!-- Place this anywhere in your HTML body -->
<script>
(function() {
  // Create script element
  var script = document.createElement('script');
  script.src = 'https://widget.callmebackbutton.com/widget.js';
  script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
  script.setAttribute('data-static', 'true');
  script.async = true;
  
  // Add error handling
  script.onerror = function() {
    console.warn('CallMeBack widget failed to load');
  };
  
  // Load when DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() {
      document.head.appendChild(script);
    });
  } else {
    document.head.appendChild(script);
  }
})();
</script>

Important Note

Asynchronous loading prevents the CallMeBack script from blocking page rendering, improving user experience.

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

Static Sites Integration Guide

Prerequisites

Integration Methods

HTML Head Integration

Locate HTML Head Section

Important Note

Add CallMeBack Code

Important Note

Upload and Test

JavaScript Module

Create CallMeBack Module

Import and Initialize

Important Note

Asynchronous Loading

Add Async Script

Important Note

Troubleshooting

Still having issues?

Related Integrations

References & Official Documentation

Next Steps

Configure CallMeBack

Advanced Features

Need Help?

Static Sites Integration Guide

Prerequisites

Integration Methods

HTML Head Integration

Locate HTML Head Section

Important Note

Add CallMeBack Code

Important Note

Upload and Test

JavaScript Module

Create CallMeBack Module

Import and Initialize

Important Note

Asynchronous Loading

Add Async Script

Important Note

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!