Add your agent to your website

One line of code puts your fone.me agent on your website: visitors chat, call it by voice or carry on in WhatsApp or Telegram, and you answer from the app.

The short answer

One line of code puts a chat button in the corner of your site. Visitors chat with your agent, call it by voice, or carry on in WhatsApp or Telegram, and you see and answer every conversation in the fone.me app.

What you need first

  • Your fone.me link: sign in at fone.me or in the app and choose fone.me/yourname. It's free.
  • An agent that knows your business: tell it in the chat what you do, your hours, your prices and what people usually ask.
  • The fone.me app on your phone, to see and answer every conversation the button brings in.

Where the line goes

  • The line, with your link in place of yourname: <script src="https://www.fone.me/widget.js" data-agent="yourname"></script>
  • Any HTML site: Paste the line just before </body> on every page (or in the shared footer or layout file).
  • Next.js: In app/layout.tsx (or pages/_app.tsx), add <Script src="https://www.fone.me/widget.js" data-agent="yourname" strategy="afterInteractive" /> from next/script inside <body>.
  • React, Vite, Vue or Svelte: Paste the line just before </body> in index.html.
  • WordPress: Install a header and footer code plugin (for example WPCode), paste the line in its Footer box and save.
  • Shopify: Online Store → Themes → ⋯ → Edit code → layout/theme.liquid: paste the line just before </body> and save.
  • Wix: Settings → Custom Code → + Add Custom Code: paste the line, choose All pages and Body - end, then Apply. Wix needs a connected domain for this.
  • Squarespace: Pages → Custom Code → Code Injection: paste the line in Footer and save. Code injection needs a paid plan.
  • Webflow: Site settings → Custom code → Footer code: paste the line, save, then publish the site.
  • Framer: Site Settings → Custom Code: add the line at the end of <body>, then publish.

What your visitors get

  • A round chat button in the bottom-right corner of every page.
  • On a computer the chat opens in a panel; on a phone it fills the screen.
  • They can type, call your agent by voice, or continue in WhatsApp or Telegram.
  • Your agent answers from what you taught it, takes their name, number and booking requests, and tells you.

Building your site with Claude, Codex or Cursor

Copy the request above into the assistant that builds your site and it adds the line to every page. Assistants connected to fone.me (www.fone.me/mcp) can also get your exact line themselves, with the tool add_chat_to_website. You still set up your agent and answer your visitors in fone.me.

Questions

Is it free? Yes. Your agent, your first link and the chat button are free. Premium, a monthly subscription, adds your agent's own phone number and calling minutes.

Where do the conversations go? To your fone.me inbox, in the app and at fone.me, next to your other calls and messages. You can read them, answer yourself or let your agent carry on.

Will it slow down my site? The button is one small script. The chat itself loads only when a visitor opens it.

Can I move it or change its color? Yes. Add data-position="bottom-left" to put it on the left, and data-color="#111111" with your own color.

Keep reading