Chat Widget — HTML / Script Tag

The simplest way to add FutureBase chat to your website is with a single <script> tag. No build tools, no package manager, no framework required.

Quick start

Get your website ID

Find your website ID in the FutureBase dashboard under Settings.

Add the script tag

Paste the following before the closing </body> tag of your HTML page:

<script src="https://embed.futurebase.io/script/YOUR_WEBSITE_ID" defer></script>

Open your site

Refresh your page. The chat bubble should appear in the bottom-right corner.

Replace YOUR_WEBSITE_ID in the URL with your actual website ID from the FutureBase dashboard.

How it works

The script tag loads a small loader from embed.futurebase.io that:

Checks your website's chat status with the FutureBase API.
If enabled, injects the chat bubble and iframe into the page.
Loads asynchronously with defer so it never blocks page rendering or impact performance.

Your website ID is embedded directly in the script URL — no additional configuration attributes are required for basic usage.

Optional attributes

You can add data-* attributes to the script tag for additional configuration:

<script
  src="https://embed.futurebase.io/script/YOUR_WEBSITE_ID"
  data-futurebase-ignore-paths="/admin/*,/login,/signup"
  data-futurebase-external-user-id="user_12345"
  defer
></script>

Attribute	Description
`data-futurebase-ignore-paths`	Comma-separated pathname patterns where the chat bubble should be hidden. Supports trailing `*` wildcards.
`data-futurebase-external-user-id`	Associate conversations with a user ID from your system.

Content Security Policy (CSP)

If your site uses a Content Security Policy, add the following directives to allow the chat widget to load:

script-src https://embed.futurebase.io;
frame-src https://embed.futurebase.io;
connect-src https://embed.futurebase.io https://api.futurebase.io;

Full example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to my website</h1>
  <p>The FutureBase chat widget will appear in the bottom-right corner.</p>

  <script src="https://embed.futurebase.io/script/YOUR_WEBSITE_ID" defer></script>
</body>
</html>

Chat Widget — HTML / Script Tag

On this page