Webflow chatbot: how to add an AI chat agent to your Webflow site

What you need

• A paid Webflow plan that allows custom code: an active Site plan on the site, or a Core, Growth, Agency or Freelancer Workspace. Webflow lists custom code for those plans only.
• A Site manager or Designer role in the Workspace. Webflow says those roles can add custom code to the whole site or to single pages.
• Your Life Inside snippet with your own widget ID. It comes from Life Inside when your agent is set up.
• A Life Inside AI Agent plan. The plans are on the pricing page.

Add the Life Inside snippet to Webflow

Your snippet, with your own widget ID, comes from Life Inside when your agent is set up. It looks like this:

<script>
  (function () {
    var s = document.createElement("script");
    s.src = "https://widget.lifeinside.io/loader/latest/widget";
    s.charset = "UTF-8";
    s.async = true;
    s.onload = function () {
      WidgetWrapper.mount({ id: "YOUR_WIDGET_ID" });
    };
    document.body.appendChild(s);
  })();
</script>

1. Open your site in Webflow and go to Site settings.
2. Click the Custom code tab.
3. Paste the Life Inside snippet into the Footer code section. Webflow places that code just before the closing body tag on every page of the site.
4. Click Save changes.
5. Publish the site. Webflow shows custom code in preview mode, but it only goes live on your domain once you publish.

Webflow custom code: why Footer code and not Head code

Webflow's Custom code tab has two site-wide fields. Head code lands inside the head of every page and suits meta tags, stylesheets and links. Footer code lands just before the closing body tag. Webflow's own guidance is that scripts placed there let the page load its content first, which is better for speed and for visitors.

The Life Inside snippet belongs in Footer code for a second reason: it adds the chat widget to the body of the page, so it has to run once the body exists. Paste it exactly as you received it, script tags included.

Webflow's support team does not help with custom code, so if something looks wrong after you publish, contact Life Inside and we will check it with you.

What a Webflow AI chatbot does for your visitors

Webflow is often the marketing site of a software company, an agency or a design-led brand. Visitors arrive with specific questions: does it work with what we use, how does pricing work for a team our size. The answers usually exist somewhere on the site, spread across pages nobody reads in full.

The AI Chat Agent answers from content you approve: your pages, documents and FAQs. When it does not know, it says so, and the gap shows up in AgentLoop so you can add the missing answer. Then it guides the visitor to the next step, such as booking a meeting or opening the right page.

• Sales and marketing sites: answer product and pricing questions and book meetings. See sales and marketing.
• Careers pages: send candidates to the right role and answer what applicants ask before they apply.
• International visitors: the agent answers in more than 60 languages, in the language the visitor writes in.
• Video next to the answer: the agent can show the right interactive video in the same window, for example a colleague explaining the product, and the visitor keeps chatting afterwards.

Add the chatbot to some Webflow pages only

Footer code in Site settings applies to the whole site, including CMS collection pages. If you only want the agent on some pages, leave Footer code empty and use page-level code instead. Open the page in the Designer, open its Page settings and, under Custom code, paste the snippet into the field that goes before the closing body tag (not the one inside the head tag). Save and publish, then repeat for each page that should show the agent.

Collection page templates have the same custom code fields in their settings: hover over the template in the Pages panel and click the settings cog. One paste there covers every item page in that collection.

Check that it works

1. Open your published site on its live domain. Custom code does not run in the Designer canvas in expanded view, so test the real site.
2. Look for the Life Inside widget in a bottom corner of the page.
3. Open it and ask a question your site answers, then one it should not know. The second answer should say it does not know and point to the right contact.
4. Check that the conversation appears in AgentLoop. No widget? Check that you saved Footer code and published to the domain you are viewing.

Frequently asked questions

Sources

• Webflow Help Center: Custom code in head and body tags (Checked 2026-10-27)
• Webflow Help Center: Structure and style Collection pages (Checked 2026-10-27)
• MDN Web Docs: the script element and the async attribute (Checked 2026-10-27)