Add Ultimo Bots to any website

The code

<div id="chat-widget-container" data-user-id="AGENT_ID"></div>
<script src="https://robert-kloepsch.github.io/ultimo-bots-widget/dist/bundle.js" defer></script>

Replace AGENT_ID with your agent's ID. The easiest way is to copy the ready code from the portal, which already contains it. The copied code also carries a small credit link to ultimo-bots.com; keep it as it is. The container needs exactly the id chat-widget-container, and one page carries one agent.

Find your agent ID

1. Open your agent

   Sign in at portal.ultimo-bots.com and open your agent. The code is always made for the agent selected at the top of the dashboard.

2. Open the Website widget card

   Go to Deploy → Channels and click Set up on the Website widget card.

3. Copy the code

   Under Copy the widget code, click Copy code. The ID is the value of data-user-id.

Step by step for your stack

Plain HTML

Paste the two lines just before </body> on every page, or once in the shared footer include that every page uses.

Astro

Put the two lines at the end of <body> in your main layout (for example src/layouts/Layout.astro) and use that layout on every page. Add is:inline to the script so Astro leaves it as it is:

<div id="chat-widget-container" data-user-id="AGENT_ID"></div>
<script is:inline src="https://robert-kloepsch.github.io/ultimo-bots-widget/dist/bundle.js" defer></script>

Next.js

App Router: in app/layout.tsx, render the container inside <body> and load the script with next/script:

import Script from "next/script";

// app/layout.tsx
<body>
  {children}
  <div id="chat-widget-container" data-user-id="AGENT_ID"></div>
  <Script
    src="https://robert-kloepsch.github.io/ultimo-bots-widget/dist/bundle.js"
    strategy="afterInteractive"
  />
</body>

Pages Router: render the same two elements in pages/_app.js, next to <Component {...pageProps} />.

React, Vue and Svelte (Vite)

Put the two lines into index.html just before </body>; in SvelteKit that is src/app.html. The bubble stays across route changes. Do not add the code inside a component that mounts per page: the widget starts once, so a container that is removed on a route change takes the chat with it.

Lovable, Bolt and v0

Ask the builder in plain words, with your code pasted in. For example:

Then publish or redeploy the project and check the bubble on the live URL.

Website builders

Squarespace, Framer, GoDaddy, Jimdo, Duda, Carrd, Tilda, IONOS and others: the Channels screen has a guide for each one, with your code ready to copy. See Channels.

Inline chat or chat link

For a chat embedded in a page instead of a bubble, copy the code from the Website iframe card and paste it where the chat should appear:

<iframe
  src="https://chat.ultimo-bots.com/AGENT_ID"
  style="width: 100%; height: 600px; border: none;"
  allow="microphone"
></iframe>

The hosted chat page https://chat.ultimo-bots.com/AGENT_ID (the Chat link card) works without any code, for e-mails, QR codes and social bios.

Let an AI client set it up

Connect the Ultimo Bots MCP server in Claude, ChatGPT, Codex or another MCP client: https://mcp.ultimo-bots.com/mcp (Streamable HTTP, OAuth). On the consent page in the portal you choose the workspace, which agents the client may use and its permissions, then click Allow connection. The client can then create an agent, add website pages and FAQs as knowledge, read conversations and insights, and fetch the embed code. You can revoke a connection any time with Revoke access under MCP connections, in the sidebar next to Agents and Workspaces when no agent is open.

Check that it works

Open the live site in a private window. The chat bubble appears in the lower corner within a few seconds.

Next steps