Add MyLiveChat to your Webflow site

Webflow lets you add MyLiveChat through its Custom Code footer field — paste the MyLiveChat code once, publish, and the chat button appears site-wide. MyLiveChat helps you catch visitors while they are still on the page and keeps every conversation available afterwards.

Use this guide to add MyLiveChat to Webflow. 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
Live chat setup guide

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 your Webflow project

  1. Open your project and go to Project Settings → Custom Code.
  2. Paste the MyLiveChat code from Step 1 into the Footer Code field.
  3. Click Save Changes, then Publish your site.
  4. Open the published site — the chat button appears on every page.

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:

  1. 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.
  2. Start a chat as a visitor and send a test message.
  3. Sign in to the web console and confirm the message arrives and that you can reply.
  4. Close the chat and check the transcript is saved, so you know follow-up will work.

Publish first, then test the published domain. Custom code never runs in the Designer preview, so checking there will always suggest the install failed.

Common Webflow setup mistakes

  • The site was not republished. Custom code in Project Settings only reaches visitors after you publish. This is the most common Webflow mistake by a wide margin.
  • Only the webflow.io staging domain was checked. If you publish to both staging and a custom domain, confirm the domain your visitors actually use.
  • The plan does not include custom code. Project Settings custom code requires a paid Site plan. On the free plan you can add the chat code to a page using an Embed element.
  • The code was pasted into the head field. Use the Footer Code field so the widget loads after your page content.

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 Webflow?

Webflow sites are frequently marketing sites where every visit is paid for. Chat gives those visitors a way to ask before they bounce, and proactive invitations can trigger on your pricing or demo pages where intent is highest.

Because the code lives in Project Settings rather than in a component, it survives redesigns and republishing, and it loads on every page you publish.

Webflow live chat FAQ

Do I need a paid Webflow plan?

Custom Code in Project Settings requires a paid Site plan. On the free plan you can add the chat button to a page using an Embed element.

Do I have to republish after adding the code?

Yes. Custom code only goes live once you publish the site.

Does it work with Webflow CMS pages?

Yes. Footer code applies to all pages, including CMS collection pages.

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 Webflow 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 paid ad landing pages and Live chat for B2B demos. 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.

Free forever for 1 agent

Give every visitor an instant way to reach you.

Launch live chat, connect your knowledge base, and add AI answers when you are ready. No credit card, no trial clock.