Install guide

Add LiveCall to your website

It’s one line of code, pasted once. Follow the steps for your website builder, or let your AI assistant add it for you.

Step-by-step guides Install with AI

Your LiveCall code

Paste it once, site-wide, just before the closing </body> tag. It loads on every page and adds the call button to the corner of your site.

HTML
<script async src="https://joinlivecall.com/widget.js" data-key="YOUR_WIDGET_KEY"></script>

Your own code, with your widget key already in it, is in your dashboard under Install. No account yet? Start a free trial.

Step-by-step guides

Pick where your website is built.

Shopify

  1. In your Shopify admin, go to Online Store → Themes.
  2. Next to your current theme, click ⋯ → Edit code.
  3. In the Layout folder, open theme.liquid.
  4. Paste your LiveCall code on a new line just above </body>.
  5. Click Save, then open your store to check.

If you switch or update your theme later, add the code to the new theme too.

WordPress

  1. In your WordPress dashboard, go to Plugins → Add Plugin.
  2. Search for WPCode, then click Install Now → Activate.
  3. Go to Code Snippets → Header & Footer.
  4. Paste your LiveCall code into the Footer box.
  5. Click Save Changes.

WPCode is free. On WordPress.com, installing plugins needs a paid plan.

Wix

  1. In your Wix dashboard, go to Settings → Custom Code (under Development & integrations).
  2. Click + Add Custom Code.
  3. Paste your LiveCall code and name it LiveCall.
  4. Under Add Code to Pages, choose All pages → Load code once.
  5. Under Place Code in, choose Body - end, then click Apply.

Wix only runs custom code on a published site with a connected domain, which needs a Premium plan.

Squarespace

  1. Go to Website → Pages and scroll to the bottom of the list.
  2. Click Custom Code → Code Injection. On older dashboards it’s under Website Tools, or Settings → Advanced.
  3. Paste your LiveCall code into the Footer box.
  4. Click Save, then open your live site to check.

Code Injection needs a Core, Plus or Advanced plan (or an older Business or Commerce plan).

Webflow

  1. Open your site’s Site settings → Custom code.
  2. Paste your LiveCall code into Footer code.
  3. Click Save changes.
  4. Publish your site. Custom code only runs on the published site.

Custom code needs a paid Webflow site plan (or a paid Workspace plan).

Framer

  1. In the Framer editor, open Site Settings → Custom Code.
  2. Add a code block, paste your LiveCall code and set the placement to End of <body>. Older editors have an End of <body> tag box under General instead.
  3. Click Save.
  4. Click Publish (or Update) at the top right.

Custom code needs a paid Framer site plan, and it doesn’t run in the editor preview.

Google Tag Manager

  1. In Google Tag Manager, open your container and go to Tags → New.
  2. Click Tag Configuration → Custom HTML and paste your LiveCall code.
  3. Click Triggering → All Pages.
  4. Name the tag LiveCall and click Save.
  5. Click Submit → Publish.

Use this if Google Tag Manager already loads on every page of your site.

Plain HTML / other

  1. Open the template or file that every page shares, such as a layout, a footer include or index.html.
  2. Paste your LiveCall code just before </body>.
  3. Save, then upload or deploy your site.
  4. Using another website builder? Look for a setting called Custom code, Code injection, Footer code or Tracking code, and paste it there for all pages.

Next.js / React

  1. Next.js App Router: open app/layout.tsx and add import Script from 'next/script'.
  2. Inside <body>, after {children}, add <Script src="https://joinlivecall.com/widget.js" data-key="YOUR_WIDGET_KEY" strategy="afterInteractive" />
  3. Next.js Pages Router: add the same <Script> to pages/_app.tsx, after <Component {...pageProps} />.
  4. React, Vue or other Vite apps: paste your LiveCall code into index.html, just before </body>.
  5. Deploy, then open your live site to check.
app/layout.tsx or pages/_app.tsx
// app/layout.tsx (App Router) or pages/_app.tsx (Pages Router)
import Script from 'next/script';

// Inside <body>, after {children} (in _app.tsx: after <Component {...pageProps} />):
<Script src="https://joinlivecall.com/widget.js" data-key="YOUR_WIDGET_KEY" strategy="afterInteractive" />

Add it once in the root layout, not in a page. Don’t install, download or bundle the script.

Install with AI

Using Claude, ChatGPT, Cursor, Lovable, Bolt, Replit or another AI tool? It can add LiveCall for you.

Option 1: Copy this prompt

Paste it into your AI tool. Replace YOUR_WIDGET_KEY with your key first, or copy the prompt from your dashboard’s Install page, where your key is already filled in.

Prompt
Add the LiveCall video call button to my website.

LiveCall shows a “Video call me now” button on every page. It needs exactly this one line of code, loaded on every page, just before the closing </body> tag:

<script async src="https://joinlivecall.com/widget.js" data-key="YOUR_WIDGET_KEY"></script>

Please:
1. Work out how my site is built (plain HTML, a framework like Next.js, React, Vue or Astro, WordPress, Shopify, Wix, Squarespace, Webflow, Framer, or something else). Ask me if you can’t tell.
2. If you can edit the code, add the line once, site-wide, in the shared layout or template (for example app/layout.tsx, index.html or theme.liquid), so it loads on every page. Don’t change the line, don’t download or bundle the script, and don’t add it twice. In Next.js, use next/script with strategy="afterInteractive" and keep the data-key attribute.
3. If my site is on a website builder you can’t edit directly, give me short click-by-click steps for its site-wide custom code setting (footer or end of body). On WordPress, use the Footer box of the free WPCode plugin.
4. If the site sets a Content-Security-Policy, allow https://joinlivecall.com in script-src, connect-src and img-src, https://*.daily.co and wss://*.daily.co in connect-src, and https://*.daily.co in frame-src.
5. Tell me how to check it worked: after I publish, the button appears in the bottom corner of my site, and the Install page in my LiveCall dashboard shows “Seen on” with my website.

Step-by-step guides: https://joinlivecall.com/install-guide

Option 2: Connect the LiveCall MCP server

MCP is how AI assistants connect to other services, like Stripe’s MCP server. Once LiveCall is connected, your assistant can look up the right steps for your site and check that the button is live. No sign-in or API key needed.

MCP server URL
https://joinlivecall.com/mcp

Claude (claude.ai and Claude Desktop)

  1. Open Settings → Connectors.
  2. Click Add custom connector.
  3. Name it LiveCall and paste https://joinlivecall.com/mcp as the URL.
  4. Click Add.

Claude Code

Run this in your project folder:

Terminal
claude mcp add --transport http livecall https://joinlivecall.com/mcp

Cursor

Add to Cursor

Or add this to .cursor/mcp.json in your project (or ~/.cursor/mcp.json for every project):

mcp.json
{
  "mcpServers": {
    "livecall": {
      "url": "https://joinlivecall.com/mcp"
    }
  }
}

VS Code

Install in VS Code

Or add this to .vscode/mcp.json in your project, then use Copilot Chat in Agent mode:

.vscode/mcp.json
{
  "servers": {
    "livecall": {
      "type": "http",
      "url": "https://joinlivecall.com/mcp"
    }
  }
}

Any other assistant that supports MCP: add a remote MCP server (Streamable HTTP) named livecall with the URL https://joinlivecall.com/mcp.

Then ask your assistant

Message
Add LiveCall to my website. My widget key is YOUR_WIDGET_KEY.

Your widget key starts with lk_live_. Find it in your dashboard under Install.

Check it works

  1. Open your website in a new browser tab. The LiveCall button appears in the bottom corner.
  2. Open the Install page in your LiveCall dashboard. It shows “Seen on yoursite.com” once the button has loaded on your live site.
  3. While you’re Live in the dashboard, click the button on your site to place a test call.

Troubleshooting

The button doesn’t show

  • Check Allowed websites on the Install page of your dashboard. It must include your site (for example https://www.yoursite.com or *.yoursite.com), or *.
  • Publish your site after adding the code. Website builders don’t run custom code in the editor or preview.
  • Put the code in the site-wide footer or end of body, not on a single page.
  • Clear your site’s cache (caching plugin, Cloudflare), then reload. A private window helps.
  • If your widget is set to “Hide the widget completely” when nobody is available, the button only shows while someone on your team is Live.

Your site has a strict Content-Security-Policy

Add these sources to your policy so the button and the video call can load:

Content-Security-Policy
script-src https://joinlivecall.com
connect-src https://joinlivecall.com https://*.daily.co wss://*.daily.co
img-src https://joinlivecall.com
frame-src https://*.daily.co

Also add your booking link’s site to frame-src (for example https://calendly.com).

Still stuck? Contact us and we’ll help you set it up.

For developers

Optional attributes on the script tag:

  • data-position="bottom-left" puts the button on the left.
  • data-color="#7c3aed" sets the button color.
  • data-cta="Talk to a jeweler" and data-greeting="…" change the text.
  • data-collapsed starts as the small button.
  • data-mode="inline" data-container="#id" shows it inside your page instead of floating.

Open the widget from your own button, prefill the form, or send events to analytics:

HTML
<script>
  window.LiveCall = window.LiveCall || { q: [] };
  LiveCall.q.push(['identify', { name: 'Jane', email: 'jane@example.com' }]);
  LiveCall.q.push(['on', 'call:created', function (e) { /* e.g. gtag('event', 'live_call') */ }]);
</script>
<button onclick="LiveCall.open()">Talk to us live</button>

Methods: open(), identify({…}), hide(), show(), on(event, fn). Events: ready, status, call:created, call:claimed, call:connected, call:ended, call:missed, message:sent.

The script finds its own tag, so it also works when added by Google Tag Manager, next/script or another loader. AI tools can read this guide as plain text at /llms.txt.