Skip to content
intoCHAT

Framer integration

Add an AI chatbot to your Framer website

Train an agent on your Framer pages and documents, then add it to the whole site with one script in Custom Code. It looks like part of your design and answers from your own content.

Create your agent free

Last updated:

How intoCHAT works on Framer

Framer lets you add scripts to your whole site from the Custom Code settings. intoCHAT needs one script tag there, at the end of the body, and a chat bubble appears in the corner of every published page. The agent answers from what you give it, such as your Framer pages, PDFs and Q&A pairs, and says when it doesn't know. You design the chat in intoCHAT, so you can change colors, avatar or welcome message without republishing your Framer site.

Install intoCHAT on Framer

  1. Create and train your agent

    Sign up for intoCHAT, create an agent and add your Framer site's address on the Knowledge tab. intoCHAT finds up to 500 pages, renders JavaScript before reading them, and lets you pick which to include.

  2. Copy the script tag

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

  3. Add a script in Custom Code

    In Framer, open Project Settings and select the Custom Code tab. Click Add Script, give it a name such as intoCHAT and paste the code.

  4. Set placement and frequency

    Place the script at the end of the body, keep it on all pages and set it to run Once rather than on every page visit.

  5. Publish and check the live site

    Framer doesn't load custom code in the canvas preview. Publish the site and open the live page: the chat bubble appears in the bottom corner with your Appearance settings.

The code for Framer's Custom Code

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

Place it at the end of the body, not in the head, and let it run once. The script adds the chat bubble to the page body as soon as it runs, so the body has to exist, and each extra run would add another bubble.

What the agent does on your Framer site

  • Reads your Framer pages

    intoCHAT discovers pages through your sitemap and links and renders JavaScript before reading, so it sees your content the way visitors do. Exclude paths you don't want with patterns.

  • Lets you test before you publish

    Try the agent in the Playground with temporary chats, refine its instructions and sources, and only add it to your site when the answers are right.

  • Collects leads

    Ask for an email address or phone number in the chat, by rules such as after a number of messages or on keywords, or let the AI decide. New leads arrive by email.

  • Matches your design

    Set bubble, header and message colors, avatar, launcher icon, tooltip text and position, or import your logo and colors from your site address.

  • Answers in the visitor's language

    The agent replies in the language the visitor writes in, so one agent can serve every language version of your site.

  • Runs actions on your page

    Register JavaScript functions with window.IntoChatActions.register, and the agent can call them during a chat, for example to open a form on your page.

Frequently asked questions

Why can't I see the chat in the Framer canvas?

Framer doesn't load custom code in the canvas preview. Publish your site and open the live page in a browser, and the chat bubble appears in the bottom corner.

Does intoCHAT slow down my Framer site?

The script is a single file that loads at the end of the page body, after your content. The chat window runs in its own iframe served by intoCHAT, so its code stays separate from your site's code.

Why should the script run Once?

The script adds a chat bubble each time it runs. Running it once means visitors see a single bubble, even as they move between pages. Placing it at the end of the body also makes sure the page body exists when it starts.

Does the agent read my Framer CMS pages?

Yes, if they are in your sitemap or linked from your pages, and you select them on the Knowledge tab. Sources don't re-sync on their own, so add new CMS pages or retrain changed ones when you publish updates.

Can the agent answer visitors in other languages?

Yes. The agent replies in the language the visitor writes in, using the same knowledge. If your Framer site has other language versions, add those pages too so the agent can draw on the localized wording.

Do I need to republish Framer when I change the agent?

No. The script only holds your agent ID. Colors, position, welcome message, suggested questions and knowledge load from intoCHAT on every page view, so changes show up without republishing.

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.