Install Fielded

One script tag adds the chat widget to any web page. No build step. No npm install.

Paste before </body> 
<script src="https://fielded.net/widget/loader.js?key=FIELDED_API_KEY" defer></script>

Replace FIELDED_API_KEY with your app's key — sign up free to get one.

🤖 Installing with an AI coding agent?

If you're using Replit Agent, Cursor, Claude, Copilot, or similar — copy the prompt below and paste it into the chat. Your agent will fetch the install instructions from /install.md and apply them to your codebase.

Install the Fielded support chat widget into this codebase. Fetch the install instructions in markdown from this URL and follow them: https://fielded.net/install.md It's a single <script> tag that goes before </body>. Use the framework-specific section that matches this project. Use FIELDED_API_KEY as a placeholder — I will fill it in after signup.
View raw markdown

Framework-specific instructions

1. Open your HTML file

Find index.html (or your theme's footer template) and locate the closing </body> tag.

2. Paste the snippet from the top of this page right before </body>.

That's it — no build step, no dependencies.

1. Open app/views/layouts/application.html.erb

This layout wraps every page, so the widget loads everywhere. Use a more specific layout if you only want it on certain sections.

2. Paste before </body>
app/views/layouts/application.html.erb 
  <script src="https://fielded.net/widget/loader.js?key=FIELDED_API_KEY" defer></script>
</body>
Option A — index.html (simplest)

For Vite, edit index.html at the project root. For Create React App, edit public/index.html. Paste the snippet before </body>.

Option B — load from a component

Use a useEffect in your root component to inject the script at runtime.

src/App.tsx 
import { useEffect } from "react";

useEffect(() => {
  const s = document.createElement("script");
  s.src = "https://fielded.net/widget/loader.js?key=FIELDED_API_KEY";
  s.defer = true;
  document.body.appendChild(s);
}, []);
Use Next.js's built-in <Script> component

In app/layout.tsx (App Router) or pages/_app.tsx (Pages Router):

app/layout.tsx 
import Script from "next/script";

<Script src="https://fielded.net/widget/loader.js?key=FIELDED_API_KEY" strategy="afterInteractive" />
Use a "header/footer code" plugin or your theme's footer.php

Install a plugin like Insert Headers and Footers, paste the snippet from the top of this page into the "Scripts in Footer" box, and save. Or, in your theme editor, open footer.php and paste it before the closing </body>.

Verifying it works

  1. Restart your dev server if needed.
  2. Reload any page in your app.
  3. You should see a chat bubble in the bottom-right corner. Click it.

FAQ

Yes — it's designed to. The key in the loader URL is a publishable identifier, the same kind of token Intercom calls an app_id, Stripe calls a pk_live_… key, or Segment calls a "write key." It tells Fielded which app is loading the widget, nothing more.

It does not grant access to read conversations, list customers, impersonate agents, or change settings. Anyone who visits your site can already see it in their browser devtools the moment the widget loads.

Two things, both server-side only:

  • Your HMAC secret — used to sign a signed-in user's identity so the widget trusts "this really is alice@acme.com." If it leaks, someone could impersonate your users in chat. Find it on your /agents/installation page after signing in.
  • Agent passwords and session cookies — same as any web app.

They'd mostly be starting anonymous conversations against your inbox — annoying, not catastrophic. The right defense is the domain allowlist on your app's settings page (which restricts which origins the widget will boot on), not key secrecy.

Pure ergonomics, not secrecy. Putting it in an env var lets you point staging at one app and production at another without touching your layout file.

A small JavaScript file (under 30 KB) that injects the chat bubble and connects to Fielded over WebSockets when opened. It does not load third-party trackers, doesn't read other cookies on your site, and only sends data the visitor types into the chat.

Identity verification (optional)

If your app already knows who the visitor is (signed-in users), you can pass their identity to Fielded so they aren't asked again — they'll see a "Chatting as: …" badge instead of a name/email form, and conversations land in your inbox already tagged with the right user.

This requires computing an HMAC signature server-side. After signing up, visit /agents/installation for your HMAC secret. Full framework recipes (including a complete Node/Express + React SPA pattern for Replit-style apps) are in the raw markdown install doc — the same doc your AI coding agent fetches when you use the prompt above.