message.comDevelopers
Developers/Tutorials/Install on Webflow

Install live chat on Webflow

Drop message.com live chat into a Webflow site by pasting one snippet into Project Settings. Three minutes. Works on every Webflow site plan that allows Custom Code.

Custom Code is available on every paid Webflow site plan. The free Starter plan blocks it. Workspace plan does not matter for Custom Code, only the per-site plan does.

Before you begin

  • A Webflow project on a paid site plan (Basic, CMS, Business, or Ecommerce).
  • Project access with permission to edit Custom Code.
  • Your install snippet from Settings → Chats → Installation in message.com.
HTML
<!-- message.com live chat -->
<script>
  (function(d,s,o){
    var j=d.createElement(s);j.async=1;j.src='https://app.message.com/widget.js';
    j.dataset.workspace=o;
    d.head.appendChild(j);
  })(document,'script','YOUR_WORKSPACE_ID');
</script>

1. Open Project Settings

  1. Open the project in the Webflow Designer.
  2. Click the project icon at the top-left, then Project Settings.
  3. Open the Custom Code tab.

2. Paste into Footer Code

  1. Scroll to Footer Code.
  2. Paste the snippet.
  3. Click Save Changes.

Webflow inserts Footer Code right before the closing </body> tag on every page.

3. Publish the site

  1. From the Designer, click Publish.
  2. Choose the staging URL (your-site.webflow.io) or the custom domain.
  3. Wait for the publish action to finish.

Custom Code only runs on the published site, not the in-Designer preview. The your-site.webflow.io staging URL is enough for verification.

4. Verify the install

  1. Open the published URL in a private window.
  2. Wait two seconds. The launcher appears in the bottom-right.
  3. Open the browser console. Confirm the [message] startup log.
  4. Send a test message. The conversation appears in app.message.com.

Common pitfalls

  • Designer preview shows nothing. Custom Code only runs on the published site.
  • Per-page Custom Code. Webflow also exposes a Custom Code field on each page. Use it only if you want the widget on one page; otherwise stick with site-wide Footer Code.
  • CMS Collection pages. Footer Code applies to CMS template pages too. No extra work.
  • Editor mode. Custom Code runs in Editor mode for site editors, but they may not see the widget if the Webflow Editor topbar overlaps it. Test in a private window for an accurate view.

Next steps