Buffaly Logo Buffaly

Website setup

Your chat. Your website. One snippet.

Paste your hosted chat URL, choose the presentation, and copy the code. There are no business credentials to put on your website.

You’ll need: the hosted chat URL from your staff workspace’s Chatbot settings → Add chat to your website section. No connected assistant yet? Start with the back-end setup.

1. Build your embed

Use the complete URL supplied by your operator or settings workspace. It contains your public assistant name—not a private API token.

Use your real URL with agent=…&embed=1. This builder does not contact it.

Where should chat appear?

Runs in your browser. No account creation, URL checks or configuration upload.

2. Put it on your site

For a floating button

Paste the generated script once in your site-wide footer or shared template, before </body>. Publish the website change through your normal workflow.

The launcher opens a responsive dialog, supports keyboard closing, and keeps the same iframe when you close and reopen it. It is separate from your website’s CSS.

For an inline window

Paste the iframe into a Custom HTML or Embed block where you want the conversation to appear. It fills the available width up to 440 pixels.

Use the published website to test. A CMS editor preview usually has a different origin from your actual website.

WordPress, other website builders and custom sites
Site typeInstall location
WordPressInline: a Custom HTML block on the page. Floating: your approved site-wide footer/template tool. Your role and plan must permit scripts or iframes.
Hosted website builderUse its Embed/Custom HTML block for inline chat or site-wide footer code for the launcher. Confirm that your plan preserves the markup.
Custom HTML or applicationUse the shared document template for the launcher, or place the iframe in a page component. Install the launcher once, not after every client-side navigation.
Content security policy and self-hosting

Allow your exact hosted chat origin in frame-src. For the floating option, allow https://buffa.ly in script-src. The launcher creates scoped styles; a nonce-based policy can pass the same authorized nonce on its script element when that nonce is also allowed by style-src.

If your policy requires hosting assets on your own site, download launcher v1, serve it as a static JavaScript asset, and replace only the snippet’s src. Keep your hosted chat URL unchanged. The gateway must also allow your website to frame it.

Keep the iframe’s strict-origin-when-cross-origin referrer policy so the gateway receives the embedding website’s origin. Do not add API keys or customer data to the embed URL.

Manual inline installation—no builder required

Replace the example destination and public assistant key with your supplied URL:

HTML
<iframe
  src="https://chat.example.com/public-chat/?agent=your-assistant&amp;embed=1&amp;lang=en"
  title="Chat with us" loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
  style="width:100%;max-width:440px;height:640px;border:0;border-radius:16px">
</iframe>

3. Test one complete conversation

  1. Open your actual allowed website. Open chat and check the welcome.
  2. Ask a question your assistant can answer. Check the answer and the same conversation in your staff Inbox.
  3. In the Inbox, select Take over. Wait for confirmation, then send a reply. Confirm it appears on the website.
  4. Send another visitor message. It should be saved without AI talking over staff.
  5. Select Return to AI, then send a new visitor message. AI should answer with the conversation history intact.
  6. Check a phone-size screen. Use the keyboard to open and close the floating chat, then reload the page in the same tab.

That checks the website and staff handoff. Verify each connected business action separately before offering it to visitors. See the full launch checklist.

Make the conversation sound like your business

  1. Sign in as a registered integration manager. Open Chatbot settings → Load current settings.
  2. Set your Welcome message and approved Agent instructions.
  3. Enter Allowed website origins, one exact HTTPS origin per line—for example https://www.example.com. Add the non-www version only if your website uses it. No paths, wildcards or trailing slash.
  4. Confirm Chatbot enabled. Keep the supplied connector and credential reference.
  5. Choose Validate settings, then Publish revision. Reload settings to confirm the saved values.

A useful welcome

“Hi! I can help you learn about our services, answer a question, or connect you with our team. What can I help you with?”

New conversations use the new revision. Existing conversations keep their settings, so start a new conversation to check an updated welcome. Settings validation checks configuration; it does not call your business API.

If something doesn’t look right

What you seeWhat to check
No floating buttonConfirm the CMS kept the script and the launcher asset loads. Check script/style CSP. Make sure it is installed once.
Blank or blocked windowCheck the gateway HTTPS URL, the site’s frame policy and the gateway’s framing policy. Try its hosted URL in a new tab to distinguish framing from availability.
Chat unavailable / origin deniedMatch the real website origin, registered public key and enabled state. Confirm the iframe referrer policy.
The old welcome appearsTest a new conversation after publishing; existing conversations retain their revision.
A staff reply cannot be sentConfirm the signed-in user is authorized for this application and takeover has completed.

Your operator can use the back-end troubleshooting table for the next check.