How to Add an AI Chat to Your Framer Site
Framer sites are fast to design and publish, and a chat on top of them lets visitors ask questions in their own words instead of searching. An AI chat can answer from your own pages, show the source of each answer and hand a conversation to your team. OneType has no Framer plugin: you paste one line into your site's Custom code settings, the same line used on any website. This guide shows what to prepare, the steps in Framer and how to check that the chat is live.
Step 1: Create the chat and let it read your site
Sign up, create your chat and enter your Framer site's address. Choose the pages the chat should learn from, such as product, pricing, FAQ and contact pages, and add documents if some answers live in files. The chat answers in plain words, only from what you gave it, with a numbered source next to each sentence. Pages behind a login cannot be read. Ask it a few real questions in the test chat, including one your pages do not answer: it should say it does not know instead of guessing.
Step 2: Pick a template and set the basics
Pick one of the chat templates, add your logo, and set the name visitors see, the greeting and a few starter questions. Use the questions people send you most often. You can change the name, greeting and starter questions later from your OneType dashboard, and your site shows the new look within about a minute, without republishing Framer.
Step 3: Copy your line
After you go live, OneType shows your script line ready to copy. It is also in your agent's "Add to your website" tab whenever you need it. If someone else edits the Framer project, one link opens an email with the line and instructions, ready to send to them.
Step 4: Add the line in Framer's Custom Code
- Open Project Settings in your Framer project.
- Select the Custom Code tab in the left sidebar.
- Click Add Script, or the + icon if you already have scripts.
- Name the script, for example "OneType chat".
- For the placement, choose a position at the end of the body, and paste your OneType line.
- Leave the page list as it is to load the chat everywhere, or select only the pages where you want it.
- Choose Run on every page visit.
- Publish your site, then open the live page. Framer does not load custom code in the canvas preview.
While you test on Framer's own address, which ends in framer.website, add that exact address to your agent's allowed domains too, because the chat loads only on the domains you allow.
Step 5: Check that it is live and test it
Open your published site in a new tab, not the editor. A chat button appears in the corner of the page, and within about a minute OneType shows "Live on" followed by your site's address, for example "Live on shop.example.com". You do not need to open the chat for this. If nothing shows after ten minutes, check that the line is on the published page, that the address is an allowed domain, that no ad blocker or security policy blocks the widget and that you reloaded the page. Then ask a question your pages answer and one they do not.
Put the chat on your Framer site
See the Framer setup: AI chat for Framer, check the install steps, or start free.