How to add FieldStone to your website

What you'll add

FieldStone gives you a small chat widget you can drop onto your website. Visitors can ask questions, and it can capture leads and booking requests straight into FieldStone — no developer needed.

It's a single script tag. It loads in its own isolated bubble, so it won't fight with your site's styles. This guide walks you through getting set up, pasting it in, and testing it.

Getting set up

Do this on a computer, not your phone — you'll be copying a snippet between two browser tabs.

Open two tabsKeep this tutorial open in one tab, and open your FieldStone settings in another, so you can copy between them.
Generate your keyIn the settings tab, generate an SDK key. You'll get a Business ID and a ready-made snippet with both values filled in. The key is shown once — copy it then.
Set your hoursIn your settings, set your business hours and the services you offer. That's how the widget knows when you're booking and which real time slots to offer — without it, it can't answer “are you open Saturday?” or schedule a visit.
Keep the docs handyThe developer docs are FieldStone's full reference for the chat widget — every option in one place (colors, position, what it can answer). You don't need them to finish this tutorial; they're there if you, or whoever helps with your site, wants to customize it further later.

Open Settings → SDK Developer docs

Add it to your site

Pick your platform for the click-by-click steps. On anything else, Any site has the raw snippet.

How to add FieldStone to WordPress

Before you start: Works on self-hosted WordPress. On WordPress.com, custom scripts need a Business or Commerce plan.

Paste the snippet so it loads on every page, just before the closing </body> tag:

A header/footer plugin — WPCode, Insert Headers and Footers, or Code SnippetsPaste the snippet into the footer/body box. In WPCode: Code Snippets → Add Snippet → Add Your Custom Code → HTML Snippet → paste → Auto Insert → Site Wide Footer → Active → Save. Safest for most sites, and it survives theme updates.
Appearance → Theme File Editor → footer.phpPaste just before </body>. Use a child theme so an update doesn't overwrite it — or add it in functions.php with an add_action('wp_footer', ...) that prints the two tags.
One page onlyAdd a Custom HTML block in the block editor and paste the snippet there instead.

Watch out: Paste in a code/HTML view, never the Classic editor's Visual tab — it mangles <script> tags. And if a caching or speed plugin (WP Rocket, Autoptimize, LiteSpeed) is active, exclude sdk.js and the inline init from JS minify/defer/combine, then purge the cache before testing.

<script src="https://pub-cc5ed544ca014859991114c0d7808ed7.r2.dev/v1/sdk.js"></script>
<script>
  FieldStone.init({
    businessId: "YOUR_BUSINESS_ID",
    apiKey: "YOUR_API_KEY",
  });
</script>

Want it pre-filled with your Business ID and key? Generate a key in Settings — it builds the snippet for you.

Open Settings → SDK

Rather have an assistant guide you?

Copy this prompt into Claude, ChatGPT, or any coding assistant — it has everything needed to add the widget to WordPress, or to get you unstuck if it's not showing up. Swap in your Business ID and key first.

I'm adding the FieldStone chat widget to my WordPress site and I want you to walk me through it step by step. You can't access my site, so give me exact, click-by-click instructions and tell me how to confirm each step worked. If I say a previous attempt didn't work, use the troubleshooting section to diagnose it.

WHAT I'M INSTALLING
FieldStone is a chat "bubble" for my website. It's two HTML tags: a <script src> that loads a small SDK bundle from a CDN, and an inline <script> that calls FieldStone.init({...}) to mount the bubble. It renders in an isolated shadow DOM, so it won't clash with my theme's styles. No…

Test it

Open your published site in a private window — not the editor preview. The chat bubble should appear in the corner. Tap it, then actually put it through its paces: here's how to talk to it, what to ask, and where to look if it doesn't show up.

How to talk to it

Type and sendWrite a message in the box and press Enter. It answers in plain language, right there in the bubble — there are no menus to dig through.
Talk like you would to a personWhole sentences beat keywords. “I'd like an estimate for a kitchen remodel next Tuesday morning” gets you further than just “estimate”.
Ask to bookSay you want to book and it walks you through it — shows a calendar and open times, takes your name and number, then asks you to confirm. A confirmation text lands on that number.
Or just speakIf you turned on voice, hold the mic button and talk. It types out what it heard and replies the same way as a typed message.

What to ask

Try a few of these to see it answer the way a customer would — and to watch the booking flow kick in:

“What services do you offer?”
“What areas do you serve?”
“Are you booking this week?”
“Roughly what does a job cost?”
“Can I get an estimate for next Tuesday?”
“I need my gutters cleaned — how soon can someone come out?”

What it knows comes from your FieldStone account — your services, hours, and assistant name — plus anything you add to the snippet's context option (pricing, policies, special instructions). If an answer is off, that's where you fix it — not on the website.

If it doesn't show up

Check the console firstOpen your browser console and type window.FieldStone. If it prints undefined, the script isn't loading — the snippet is in the wrong place, or a cache or optimizer stripped it. If it prints an object, the script loaded and the problem is the key or the Business ID.
No bubble and sdk.js missing from the Network taban optimizer or security plugin stripped it. View source (Ctrl+U), search “fieldstone”, then purge every cache and retest in a private window.
“FieldStone is not defined”a caching plugin deferred, delayed, or reordered the scripts. Add sdk.js to its JS exclusions and purge.
Works on some pages onlythe snippet is page-scoped. Move it to a site-wide footer method.
Disappeared after a theme updateit was in the parent theme. Move it to a header/footer plugin or a child theme.
No bubble, and no errors in the consoleThe snippet isn't on the page. View source and search “fieldstone”. If it isn't there, it went into the wrong box or the site wasn't republished.
Bubble appears but never repliesThe key is wrong or revoked. Regenerate it in Settings → SDK and update the snippet.
Still nothing?Clear any site or CDN cache and reload. Make sure the snippet wasn't pasted into a visual or rich-text editor, and that minify and defer are off for it. Private browsers with strong tracking protection can also hide it.

That's it — set up your key, paste the snippet, and the bubble shows up on your site, ready to answer questions and capture leads.