Add a chatbot to your Webflow site

Check your Webflow plan and role

Webflow's help center says you can add custom code if your site has an active Site plan, or if you have a Core, Growth, Agency or Freelancer Workspace, and that Site managers and Designers are the roles that can add it. If the custom code fields are not open to you, check your plan and your role first.

Add Alma to every page

1. In Alma, open your bot's Settings page, find the Embed Code section and click Copy Code.
2. In Webflow, open your Site settings and go to the Custom code tab.
3. Paste the embed code into the Footer code section. Webflow places Footer code before the closing </body> tag on every page.
4. Click Save changes.
5. Publish your site. Custom code shows in preview mode but does not go live until you publish.

<script>
  (function(w,d,s,o,f,js,fjs){
    w['AlmaChat']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  }(window,document,'script','alma','https://www.helloalma.chat/widget/widget.js'));
  alma('init', 'YOUR-BOT-ID');
</script>

That placement is also Webflow's own advice for scripts: code just before the closing </body> tag lets your pages load their content before the JavaScript runs. Alma's embed code adds to that by loading the chat file in the background, so your page does not wait for it.

Show the chat on only some pages

Alma has no setting that limits the chat to certain pages. In Webflow, use page-level custom code instead of the Footer code section:

1. Open your site in the Designer.
2. Open Page settings for the page where you want the chat.
3. Paste the embed code into the Before </body> tag section under Custom code.
4. Save your changes, repeat for each page, and publish.

Webflow adds page-level code after any site-wide code, so if the embed code is already in the Footer code section, do not add it to individual pages as well. A page with the code twice loads the chat twice.

Check that it is working

Check your published site rather than the Designer: Webflow says custom code does not run in the expand canvas view. Open the site in a private or incognito browser window, and a round chat button should sit in the bottom right corner, or the bottom left if you chose that under Widget Position in Alma. Click it to see your welcome message.

If it is missing, publish again, confirm the whole embed code is in place from <script> to </script>, and check that your Alma trial or plan is active. Your browser's developer tools show "Alma Chat initialized" in the Console tab when the chat loads, or "Failed to initialize Alma Chat" when it cannot.

What Alma does on a Webflow site

Alma does not connect to Webflow's CMS, Ecommerce or form submissions. It runs beside them: it holds the conversations you build in Alma, asks visitors the questions you choose, and emails each new lead to the address you set for lead alerts, so a visitor with a question becomes a name and an answer in your inbox. On the Growth plan ($79 a month) and up, Zapier can pass leads to other apps, and the Agency plan ($199 a month) adds webhooks (automatic messages from one app to another), which suits studios that build Webflow sites for clients.

Webflow's own documentation

If a step above no longer matches what you see, Webflow's own pages have the current version:

• Webflow's instructions for custom code in head and body tags