Add MyLiveChat to your Framer site
Framer lets you add MyLiveChat through its custom code settings — paste the MyLiveChat code into the end-of-body field, publish, and the chat button appears site-wide. MyLiveChat catches visitors while they are still on the page.
Use this guide to add MyLiveChat to Framer. The free plan includes one agent,
unlimited chats, and unlimited websites — no credit card required.
If you do not have a MyLiveChat account yet,
create a free MyLiveChat account.
Start free
Step 1. Get your MyLiveChat code
Sign in to the MyLiveChat web console and click
Deployment menu on the left. Choose Embedded Chat tab and copy the MyLiveChat code.
Step 2. Add the code to Framer
- Open Site Settings → General and find the Custom Code section.
- Paste the MyLiveChat code from Step 1 into the End of <body> field.
- Save your change.
- Click Publish, then open the published site — the chat button appears on every page.
If you want chat on a single page only, add an Embed component to that page and paste the same code into it.
Check that live chat is working
Do not assume the install worked because you saw no error. Open your site in a private
browsing window and walk through this once:
- Look for the chat launcher on the page. If it is missing, view the page source and search
for mylivechat to confirm the code is really being served.
- Start a chat as a visitor and send a test message.
- Sign in to the web console and confirm the message arrives and
that you can reply.
- Close the chat and check the transcript is saved, so you know follow-up will work.
Publish first, then test the published address. Custom code does not run on the Framer canvas or in preview, so checking there will always suggest the install failed.
Common Framer setup mistakes
- The site was not published. Custom code in Site Settings only reaches visitors after you publish. This is the most common Framer mistake.
- Only the framer.website staging address was checked. If you publish to a custom domain as well, confirm the address your visitors actually use.
- The code went into the head field. Use the end-of-body field so the widget loads after your page content.
- The canvas preview was treated as a test. Preview does not execute custom code. Always test the published site in a private browsing window.
What happens next?
After setup, sign in to the web console to answer visitors from your browser. You can also use the desktop app from the download page if your team prefers it.
Want the AI to answer first? Point the AI assistant at your site content and it handles routine questions 24/7, then hands off to a human with the full transcript when one is needed.
Why add live chat to Framer?
Framer sites are usually marketing sites for products that need explaining. Chat gives a visitor somewhere to ask the question your landing page did not anticipate, before they close the tab.
Because the code sits in Site Settings rather than in a component, it survives redesigns and new pages, and it loads on everything you publish.
Framer live chat FAQ
Do I need a paid Framer plan?
Custom code is part of Framer’s published-site settings. If your plan does not expose it, you can still add the chat button to a page with an Embed component.
Do I have to publish after adding the code?
Yes. Custom code only goes live once you publish the site.
Does it work with Framer CMS pages?
Yes. End-of-body code applies to all published pages, including CMS collection pages.
Will it slow my site down?
The chat code loads asynchronously after your page content, so it does not block rendering.
Is it really free?
Yes. One agent, unlimited chats, and unlimited websites are free forever, with no credit card required.
Make the chat window fit your site
Colours, position, language, the pre-chat form and your offline message are all set in your
MyLiveChat dashboard rather than in your Framer code, so you can change them without editing
your site again. See customization options for
what can be changed, and visitor monitoring if you
want to see which page a visitor is on before you reply.
Related guides
New to live chat? Start with
how to add live chat to your
website and the
live chat launch checklist, then
live chat best practices once you are
answering real conversations.
Also useful: Live chat for B2B demos and Chat widget placement and design.
If you are worried about page speed, see
does live chat slow down your
website.
Any questions?
If anything is unclear, contact our support team from the chat button on this page or visit the Support page. We can help you choose the right setup path.