How to add a click-to-call button to WordPress, Wix, Webflow, Shopify or any website

Adding a browser Call button takes one script tag. You paste it once, and from then on the label, placement, colours and routing are changed in the CallCeptor dashboard, not in your site's code.

Before you start

• A CallCeptor account. The free plan is enough to test on a staging site.
• Your website registered in the dashboard. Each website gets its own site key, and a key only works on the domain it was registered for.
• The install snippet, copied from the Integrate page of the dashboard.

The snippet

It looks like this; copy the exact version from your dashboard, which has your key filled in. Paste it just before the closing </body> tag, or in the header with async left in place.

<script src="https://callceptor.com/callceptor-sdk.js" data-site-key="YOUR_SITE_KEY" async></script>

WordPress

1. Install a header and footer code plugin, or use your theme's "custom code" setting.
2. Paste the snippet into the footer section and save.
3. Clear any page cache plugin so the change shows up.

Wix

1. Open Settings, then Custom Code (needs a paid Wix plan with a connected domain).
2. Add the snippet, apply it to all pages, and place it in the body end.

Webflow

1. Open Site settings, then Custom code.
2. Paste the snippet into the Footer code box, save and publish.

Shopify

1. Open Online Store, Themes, then Edit code on your live theme.
2. Open theme.liquid and paste the snippet just before </body>.

Google Tag Manager

1. Create a tag of type Custom HTML and paste the snippet.
2. Set the trigger to All Pages, or only the pages that should show the button.
3. Preview, then publish the container.

React, Angular, Next.js or plain HTML

Add the script once to the page template (index.html, or the root layout in Next.js). Don't load it inside a component that mounts and unmounts. Page-based routing reads the URL at the moment of the click, so client-side route changes are handled.

Check that it works

1. Open your site in a private window and look for the button where you placed it.
2. Log in to the agent console in another browser and set yourself to Available.
3. Click Call, allow the microphone, and answer in the console.
4. Hang up and check that the call appears in the lead inbox with the right page.

Common problems

• No button: the page is on a domain the site key wasn't registered for, or a cache is serving the old page.
• Button shows, call fails: the microphone was blocked; reset the site permission in the browser's address bar.
• Call rings nobody: no agent is Available in that department, so the visitor is offered a callback, which is working as designed.

Next, set up routing for your desks: routing website calls by page.