Framer Live Chat: Add a Chat Widget in Minutes

Framer live chat takes one script tag and a few minutes. Framer has a built-in custom code setting that adds a script to your published site without touching a component, and that is exactly how you add the Talkmio chat widget. This guide shows where the setting lives, which options to choose, what to check on a design-heavy Framer site and how to teach the assistant, Mio, to answer from your pages.

Framer is popular for marketing sites, portfolios, product launches and landing pages, which means visitors often have the same few questions: pricing, features, timing, how to book and who to contact. Those are the questions a chat answers well. If you only need the short version, the Talkmio Framer integration page lists the steps.

What You Need Before You Start

A Talkmio account. The free plan includes 1 operator, 1 website, 50 AI answers a month, 50 tickets a month and 20 knowledge-base pages, with no card. Create it at app.talkmio.com and confirm your e-mail.
Your site key. In Talkmio, open Websites, add your Framer site and copy the 12-character key. It belongs to that website only.
A Framer plan that allows custom code. Talkmio’s integration page notes that custom code needs a paid Framer site plan. Check this before you plan the launch, because a site on a free Framer plan may not accept the script.
Editor access. You need permission to change site settings and to publish.

The script you will paste is a single line. Replace YOUR_SITE_KEY with your own key:

<script src="https://app.talkmio.com/w/YOUR_SITE_KEY.js" async></script>

How to Add Live Chat to Framer Step by Step

Framer has moved some settings between releases, so the menu names below follow both Talkmio’s instructions and Framer’s current help article on custom code. If your labels differ slightly, look for the words “Custom Code”.

Open your project in Framer and go to the site or project settings.
Find Custom Code. Talkmio’s page describes it under Site Settings → General; Framer’s help describes a Custom Code tab in Project Settings. Both lead to the same feature.
Click Add Script, or the plus icon if you have scripts already, and give the script a clear name such as “Talkmio chat”.
Choose where the code goes. Framer offers the start and end of the head and the start and end of the body. Select End of body, written in Talkmio’s instructions as the End of <body> tag.
Paste the script line with your site key.
Choose how often it runs, as explained below.
Save, then Publish. Custom code is part of the published site, so open the live domain, not only the editor preview, to test.

Open the published site in a private browser window. The chat bubble should appear in the corner within a few seconds.

Which Framer options to choose

Framer option	Recommended choice	Why
Placement	End of body	The widget loads after your content, so it does not compete with images and fonts
Pages	All pages, unless you have a reason to limit it	Visitors ask questions anywhere, not only on the pricing page
Run frequency	Start with Once, then test page changes	Avoids loading the widget twice; confirm the bubble stays when visitors move between pages
Script attribute	Keep async	The script does not block rendering
Name	Talkmio chat	Makes it easy to find, disable or update later

Framer describes “Once” as running the code a single time and “Run on every page visit” as running it each time someone visits a page. If you notice two chat bubbles or a bubble that disappears when you click through to another page, switch the setting and test again.

Check the Chat on a Design-Led Framer Site

Framer sites are designed carefully, so the chat should fit the design instead of fighting it. After you publish, check these points:

Bubble position. A fixed bubble in the bottom corner can cover a sticky call-to-action button or a cookie banner. In Talkmio, open Websites → your site and change the position, colour and assistant name until it sits well.
Mobile. Framer sites use breakpoints, so check a phone width. The bubble should not hide a mobile menu or a booking button.
Brand colour and name. Match the widget colour to your primary button and give the assistant a name that suits your brand. Changes apply within five minutes.
Welcome text. Replace the generic greeting with something specific. Our article on live chat greeting messages has examples that fit a short marketing site.
Pages with forms. If a page already has a contact form, decide whether the chat should appear there. Often it should, because some visitors would rather type a quick question than fill in fields.
Speed. The script is small and asynchronous, but you should still run your normal speed test after the change. We explain how to read the result in live chat widget page speed.

Teach Mio From Your Framer Pages

A chat widget is only helpful if it knows your business. In Talkmio, go to Mio AI → Knowledge base and add your Framer site address. Mio reads every public page on the same domain and respects robots.txt. Framer sites often have little text on each page, so add what the design leaves out:

Q&A pairs for pricing questions, delivery times, packages, cancellation, support hours and how to start.
Files. Upload a PDF price list, a brochure or terms as PDF, DOCX, TXT, MD, CSV or HTML, up to 15 MB each.
Business instructions. Tell Mio what you sell, the tone to use and what it must never promise. For example: “Never quote a final price. Send quote requests to the team.”

Then test with Try Mio. You see the answer, which knowledge pieces were used and how long it took. Our guide to auditing AI chatbot accuracy gives a short review routine. When your site changes, press Re-read on the website source so Mio learns the new text. The plan limits how many knowledge-base pages Mio can keep: 20 on Free, 200 on Pro and 1,000 on Ultimate.

Framer Live Chat for Landing Pages, Portfolios and Product Sites

Framer sites come in a few common shapes, and the chat should behave differently on each.

Single landing pages

A landing page has one job, usually a sign-up or a booking. Visitors who hesitate are often missing a single fact: a price, a deadline, what happens after they click. A chat that answers that fact in seconds can rescue the conversion. Keep the greeting short and specific to the offer, and avoid opening the chat automatically before the visitor has scrolled. Our article on live chat on landing pages shows how to turn paid traffic into conversations.

Portfolios and studio sites

Designers and agencies use Framer for portfolios. The questions are about availability, rates, process and timelines. Put those answers in the knowledge base as Q&A pairs and tell Mio never to quote a final price. Quote requests then arrive in the Inbox with the visitor’s e-mail and the page they were on.

Product and SaaS sites

Product sites need answers on plans, integrations and security. Add your pricing page, documentation and a short security statement. When a visitor asks about something outside that content, Mio says so and passes the chat to your team.

Across all three, the setup of Framer live chat stays the same: one script, end of body, publish. What changes is the content you give Mio and the greeting you write. Review the first fifty real conversations after launch, add the missing answers, and use Re-read after every major content update.

What Happens When a Visitor Needs a Person

Mio hands the chat to your team when it cannot answer from your content, when the visitor asks for a person, complains or asks about a specific order. The conversation gets a “needs human” badge, and you receive a browser notification in the Inbox. If nobody is online, you get an e-mail and a push notification on the mobile app. Once a person replies, Mio stays out of that conversation.

When your whole team is offline, visitors are asked for an e-mail before their first message. Your later reply from the Inbox goes out as an e-mail, so a lead from a launch page is not lost overnight. On Pro and above, forwarded support mail can also become numbered tickets.

Privacy, Languages and the Mobile App

Adding a chat script to a Framer site adds a third-party service, so update your privacy text and your consent banner to match. Talkmio stores data on servers in the EU, in Germany, and only the conversation text and relevant knowledge-base excerpts go to the AI model provider. Visitors’ IP, country and device data are used to show context in the Inbox. You can export or delete data at any time by writing to [email protected]. Our guide to GDPR and live chat lists what a widget may store.

If your Framer site is localised, Mio replies in the language the visitor writes in, and the chat window is translated too. In Websites → your site you can leave the language on auto-detect or fix it. Your team can answer from the Talkmio app for iOS and Android, which shows the inbox, live visitors and push notifications for new messages, hand-offs and tickets, so a launch day question does not wait until you are back at your desk.

Troubleshooting Framer Live Chat

If the bubble does not appear, work through this order:

Published? Custom code changes only reach visitors after you publish.
Plan. Confirm that your Framer plan allows custom code.
Placement. Make sure the script is in the body or head setting and is enabled for the page you are testing.
Key. Check for spaces or quotation marks inside the site key, and that the domain matches the website you added in Talkmio.
Cache and extensions. Test in a private window with extensions off, because ad blockers can hide chat widgets.

The Talkmio documentation covers the standard install checks, and Framer’s own custom code help article describes the options in detail. For the general idea of embedding third-party scripts, the Mozilla documentation on the script element explains attributes such as async.

Frequently Asked Questions

How do I add live chat to a Framer site?

Open Custom Code in your Framer site or project settings, add a script, place it at the end of the body, paste the Talkmio script line with your site key and publish. Then open the live site in a private window to confirm that the chat bubble appears.

Does Framer live chat need a paid Framer plan?

Talkmio’s integration page states that custom code needs a paid Framer site plan. Because Framer plans and features can change, check your own plan before launch. If your plan does not allow custom code, you cannot add the chat script with this method.

Should I place the Talkmio script in the head or the body?

Use the end of the body. The chat widget does not need to load before your content, and the script already carries the async attribute. Loading it after the page content keeps your design and speed metrics as steady as possible.

Why do I see two chat bubbles, or none, after navigating pages?

This usually relates to how often the script runs. Framer offers running once or on every page visit. Start with Once, publish, and click through several pages. If the bubble disappears or doubles, change the option and test again in a private window.

Can Mio answer questions about my Framer pages?

Yes. Add your Framer site address in Mio AI → Knowledge base. Mio reads every public page on the same domain and answers only from that content, plus any Q&A pairs and files you add. It does not invent prices or policies and hands over when unsure.

Is there a free option for a small Framer site?

Talkmio’s free plan covers 1 operator, 1 website, 50 AI answers and 50 tickets a month, with no card needed. Your Framer plan is separate and still needs to allow custom code. Upgrade Talkmio only when you need more seats, websites or answers.

The Bottom Line

Framer live chat is a simple job: add one script at the end of the body in Framer’s custom code, publish, and test on the live domain. Spend your real effort on the content, because a design-led site often says little in text. Add your pricing, process and policies to the knowledge base, set a clear welcome message and keep the bubble clear of your main buttons. Create a free Talkmio account, copy your site key and have Mio answering your visitors today.

Framer Live Chat: Add a Chat Widget With Custom Code