Help June 1, 2026 · 5 min read

Widget Installation Guide: WordPress, Shopify, Webflow & More

Add a live call button to your website in under five minutes. This guide covers installation for every major platform, plus troubleshooting for common issues.

Before You Start

You need two things:

A WebCallHub account. If you do not have one, sign up here.
Your Site ID. Find it in the WebCallHub dashboard under Settings → Widget → Site ID. It looks like site_abc123xyz.

The widget is a single script tag that works on any website. Here is the tag you will be adding:

<script src="https://webcallhub.com/embed/widget.js" data-site-id="YOUR_SITE_ID"></script>

Replace YOUR_SITE_ID with the value from your dashboard. That is the only required change.

WordPress

Option A: Manual (no plugin needed)

Go to Appearance → Theme File Editor (or Theme Editor in older versions).
Select your active theme, then open footer.php.
Paste the script tag just before the closing </body> tag.
Click Update File.

If your theme does not have a footer.php, use Appearance → Widgets and add a Custom HTML widget to the footer area with the script tag inside it.

Option B: Using a plugin

If you prefer not to edit theme files, install any "header/footer scripts" plugin (for example, WPCode or Insert Headers and Footers):

Go to Plugins → Add New, search for "WPCode", install and activate.
Go to Code Snippets → Header & Footer.
Paste the script tag into the Footer section.
Save.

If you use a page builder (Elementor, Divi, Beaver Builder), you can also add an HTML widget to your global footer template with the script tag.

Shopify

In your Shopify admin, go to Online Store → Themes.
Click Actions → Edit Code on your active theme.
Open theme.liquid under the Layout folder.
Find the closing </body> tag and paste the script tag directly above it.
Click Save.

The widget will appear on every page of your store, including product pages and checkout (unless your plan restricts checkout customization).

Webflow

Open your Webflow project and go to Project Settings.
Select the Custom Code tab.
Paste the script tag in the Footer Code field (the one labeled "before </body> tag").
Click Save Changes, then Publish your site.

The widget loads site-wide. If you want it on specific pages only, add the code in the page-level custom code settings instead of the project-level settings.

Squarespace

Go to Settings → Advanced → Code Injection.
Paste the script tag in the Footer field.
Click Save.

Code injection is available on Squarespace Business and Commerce plans. If you are on a Personal plan, you will need to upgrade to add custom scripts.

Wix

In the Wix dashboard, go to Settings → Custom Code (under Advanced).
Click + Add Custom Code.
Paste the script tag, name it "WebCallHub Widget".
Set placement to Body - end and apply to All pages.
Click Apply.

Custom code requires a Wix Premium plan. The widget will not appear in the Wix editor preview -- publish and view your live site to confirm it works.

Plain HTML / Any Other Site

Add the script tag before the closing </body> tag in every page where you want the widget:

<!DOCTYPE html>
<html>
<head>
  <title>Your Page</title>
</head>
<body>
  <!-- your page content -->

  <script src="https://webcallhub.com/embed/widget.js"
          data-site-id="YOUR_SITE_ID"></script>
</body>
</html>

If you use a static site generator (Hugo, Jekyll, Next.js, Gatsby), add the script tag to your base layout or _app.js / _document.js file.

Verifying the Installation

Open your website in a browser (not the CMS preview -- the live published version).
Look for the call button in the bottom-right corner of the page.
Click it. You should see a call dialog with a "Call Support" button.
If an agent is online in the dashboard, the call will connect. If no agents are online, the AI receptionist will answer (if enabled) or the visitor will see an offline message.

Troubleshooting

Widget not showing

Check the Site ID. Open your browser's developer console (F12 → Console tab). If you see "Invalid site ID", the data-site-id value does not match your account. Copy it again from the dashboard.
Check script placement. The tag must be inside the <body>, not inside <head>. Some CMS platforms have separate fields for header vs. footer code.
Disable ad blockers. Some ad blockers flag third-party scripts. Temporarily disable yours and reload.
Check for JavaScript errors. Open the browser console and look for red error messages. If another script on your page is throwing an uncaught error before the widget loads, it can block execution.

CORS errors in the console

If you see Access-Control-Allow-Origin errors, your domain may not be registered in your WebCallHub account. Go to Settings → Widget → Allowed Domains and add your website's domain (e.g., www.yoursite.com). Include both www and non-www versions if applicable.

Content Security Policy (CSP) blocking the widget

If your site uses a strict Content Security Policy, you need to allow the widget's origin. Add the following to your CSP header:

script-src 'self' https://webcallhub.com;
connect-src 'self' https://app.webcallhub.com wss://app.webcallhub.com;

The script-src directive allows the widget script to load. The connect-src directive allows the widget to make API calls and establish WebSocket connections for the call.

Widget loads but calls fail

Make sure your browser allows microphone access. The widget will request permission on the first call.
Check that you have at least one agent online in the dashboard, or that the AI receptionist is enabled for your site.
If you are behind a corporate firewall, WebRTC may be blocked. See our Call Quality Troubleshooting Guide for network requirements.

Widget appears on pages where you do not want it

If you added the script site-wide but want to hide it on specific pages, add this CSS to those pages:

#webcallhub-widget { display: none !important; }

Alternatively, move the script tag from your global footer to only the specific pages where you want it to appear.