Log inStart free trialSee your front desk

Help · Website

Add an Amfion front desk to a website

One line of code puts the chat on every page of a business’s site. This page has the code, where it goes on the common website builders, and how to check it works, for owners and for the people who build their sites.

The code

Copy it from Amfion, or start here.

The exact code for a business is in Amfion under Channels → Website chat & booking page, with its own name where the examples say your-business. An AI assistant connected to Amfion can fetch it too (see Claude or ChatGPT and Codex).

Chat bubble on every page (the usual choice):

<script defer src="https://your-business.amfionhq.com/embed.js" data-tenant="your-business"></script>

In-page chat for a contact or booking page. It renders inside the div:

<div id="amfion-inline-chat"></div>
<script defer src="https://your-business.amfionhq.com/embed.js" data-tenant="your-business" data-mode="inline" data-target="#amfion-inline-chat" data-height="640" data-max-width="520px"></script>

Request form for a quote page, when the business uses Amfion’s request form (law firms do not have one):

<div id="amfion-request-form"></div>
<script defer src="https://your-business.amfionhq.com/embed.js" data-tenant="your-business" data-mode="form" data-target="#amfion-request-form"></script>

Optional attributes: data-color (the bubble’s color), data-position (bottom-right or bottom-left), data-offset-x and data-offset-y (pixels from the corner), and data-initial-message (text placed in the chat box when it opens). Add each script once: loading it twice shows two bubbles.

Where it goes

On the common website builders.

WordPress

The theme’s footer (Appearance → Theme File Editor → footer.php, just before </body>), or the footer box of a header-and-footer code plugin.

Squarespace

Settings → Developer tools (or Advanced) → Code Injection → Footer. Code injection needs a paid plan.

Wix

Settings → Custom code → Add custom code, placed in Body - end, on all pages. Needs a premium plan and a connected domain.

Webflow

Site settings → Custom code → Footer code, then publish. Needs a paid site plan.

Shopify

Online Store → Themes → Edit code → theme.liquid, just before </body>.

Next.js

In app/layout.tsx (or pages/_app.tsx), render next/script with the same src and data-* attributes and strategy="afterInteractive", once.

Other React apps

Add the script tag to index.html, not inside a component, so it loads once.

Plain HTML

The shared footer or layout template every page uses, just before </body>.

For Next.js:

import Script from 'next/script';

// In the root layout, once:
<Script src="https://your-business.amfionhq.com/embed.js" data-tenant="your-business" strategy="afterInteractive" />

Builders rename their menus now and then; when a step above does not match, follow the builder’s own help for adding code to the end of every page.

Strict sites

A Content-Security-Policy needs two entries.

Check it

Five things to confirm.

  1. The right business opens

    Open the site. The bubble appears and opens a chat with the business’s name, the same business as its Amfion page.

  2. It answers from the business

    Ask something the business answers on its site, such as its hours or a price. The answer should match.

  3. It books

    Ask to book a service. It offers real times, or asks for the details it needs first.

  4. No errors

    The browser console shows no [Amfion] error and no Content-Security-Policy violation.

  5. Amfion counts it

    In Amfion, the setup checklist marks the website as connected once a visitor starts a chat on it. That only counts when the site’s address matches the website in the business profile.

A booking made on the live site is a real booking. To try a booking without filling the calendar, the owner can use the preview in Amfion. More about the widget and its options: the chat widget.