Skip to content
intoCHAT

Bubble integration

Add an AI chatbot to your Bubble app

Train an agent on your app's public pages, help docs and FAQs, then add it to every page through Bubble's custom header and body settings. No plugin needed, and you can test it in the Playground first.

Create your agent free

Last updated:

How intoCHAT works on Bubble

Bubble lets you add your own HTML to every page of an app from the Settings tab. intoCHAT uses that: one script tag adds a chat bubble to the corner of each page. The agent answers from what you give it, such as your public pages, help documents and Q&A pairs, and says so when it doesn't know. The bubble sits in a fixed corner on top of your page, separate from your Bubble elements and workflows.

Install intoCHAT on Bubble

  1. Create and train your agent

    Sign up for intoCHAT, create an agent and add knowledge on the Knowledge tab: your app's public pages, help documents, or text and Q&A pairs. Pages behind a login can't be crawled, so upload or paste that content instead.

  2. Copy the script tag

    Open the Share tab and copy the code under Bubble Chat. It already contains your agent ID.

  3. Open the custom headers and body settings

    In the Bubble editor, open the Settings tab, go to SEO / metatags and find the custom headers and body section.

  4. Paste it into the body field

    Paste the script into the body field, not the header field. Code there is added to the body of every page in your app.

  5. Deploy and check

    Deploy your app to live and open it in a browser. The chat bubble appears in the bottom corner, with the colors and position you set on the Appearance tab.

The code to paste into Bubble

<script src="https://www.intochat.ai/api/embed.js" data-chatbot-id="YOUR_AGENT_ID"></script>

Use the body field, not the header field. The script adds the chat bubble to the page body as soon as it runs, so it has to load inside the body.

What the agent does in your Bubble app

  • Calls your app's API

    Custom API actions let the agent call an HTTP endpoint during a chat, with bearer token, API key or custom header auth. You choose which response fields the model sees.

  • Runs functions on your page

    Client-side actions run JavaScript functions you register on the page the visitor is using, so the agent can trigger something your page already does.

  • Learns from your docs

    Upload PDF, Word or Markdown files, add help pages by URL, or write Q&A pairs. Q&A answers take priority over other sources.

  • Stays grounded in your content

    Built-in rules keep answers tied to your sources and resist prompt injection. When the answer isn't in your content, the agent says it doesn't know instead of guessing.

  • Collects leads in the chat

    A short form inside the conversation asks for an email address or phone number, on rules you set. Every new lead is emailed to you and up to five colleagues.

  • Matches your app's look

    Set the bubble and header colors, avatar, launcher icon and position, or import your logo and colors from your website address.

Frequently asked questions

Does intoCHAT slow down my Bubble app?

The script is a single file that loads inside the page body. The chat window runs in its own iframe served by intoCHAT, so its code stays separate from your app's elements and workflows.

Why doesn't the chat bubble appear in my Bubble app?

Check that the script is in the body field, not the header field, because it needs the page body to exist when it runs. If you are looking at the live app, make sure you deployed the change, and check that the agent ID matches the one on the Share tab.

Do I need a Bubble plugin for intoCHAT?

No. intoCHAT installs with one script tag in Bubble's custom body field, so there is no plugin to install or update. Colors, position, welcome message and knowledge are all managed in intoCHAT.

Can I show the chat inside a page instead of as a bubble?

Yes. Add an HTML element to the page and paste the iframe code from the Share tab, which shows the chat at the size and place you choose. Use either the iframe or the bubble script on a page, not both, so visitors don't see two chats.

Do I need to edit my Bubble app when I change the agent?

No. The script only carries your agent ID. Colors, position, welcome message, suggested questions and knowledge load from intoCHAT each time a page opens, so your changes appear without a new deployment.

How does the chat look on phones?

On screens up to 768 pixels wide, the chat opens full screen and the page stops scrolling while it is open. When the user closes it, they are back where they were on the page.

See it answer from your own website

Paste your website address and chat with an agent built from your pages. It takes about a minute.

Create your agent free

Free plan, no credit card needed.