Install live chat on Webflow

Add live chat to your published Webflow site and reply from the Message.com Inbox. You can also connect selected public CMS text to help message AI answer visitors.

Before you begin

• A Message.com workspace where you can manage website connections.
• A Webflow account allowed to authorize apps for the intended site.
• Permission to publish that site. Manual custom-code access depends on your Webflow plan.

1. Connect the intended site

1. Open Website connections in Message.com and select the Message.com website that should receive these chats.
2. Choose Connect with Webflow. On Webflow's authorization screen, select only the site you intend to connect.
3. Review the requested access: site details, CMS read access, and custom-code access to install the chat widget.
4. Approve and return to Message.com. Confirm that the connected website and destination are correct.

If you deny the request, no connection is completed. You can start again from Website connections. If the site belongs to another Message.com workspace, switch to the correct workspace before continuing.

2. Install the chat widget

1. In Website connections, check the selected Webflow site.
2. Choose Install chat on Webflow and wait for the result.
3. Remove any older manual Message.com snippet if you are switching to the app installation, so you do not install the widget twice.

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.

4. Verify the install

1. Open the published URL in a private window.
2. Open the Message.com chat launcher and send a test message.
3. Find that conversation in your Message.com Inbox and send a reply.
4. Confirm the reply arrives in the website widget. Check any CMS page templates where customers will use chat as well.

Use published CMS content for AI answers

In Website connections, choose a published collection and select only the text fields you want customers to receive in answers. Save the source and sync it, then test a question whose answer appears in a published item. Draft and archived items are excluded. This connection does not import private orders or identify signed-in customers automatically.

Alternative: install a snippet manually

If your Webflow plan includes custom code, copy your website's install snippet from Message.com. In Webflow site settings, open Custom code, paste it into Footer code, save, and publish. Replace YOUR_EMBED_ID below with your website's embed ID. Use either this method or the app installer.

<!-- 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.siteId=o;
    d.head.appendChild(j);
  })(document,'script','YOUR_EMBED_ID');
</script>

Disconnect or remove the app

Remove the app's access in Webflow and disconnect its content source in Message.com. Republish the Webflow site to remove the app-installed widget from the published pages. If you installed a snippet manually, delete that snippet and publish again. Revoked access is detected when Message.com next requests provider data; it is not an instantaneous notification.

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.
• Missing CMS answers. Confirm the item is published, its selected fields contain the answer, and the source has synced successfully.
• Permissions or expired access. Reconnect the same site from Website connections and retry. Do not repeatedly install a second widget.

Next steps

• Customise the widget.
• Configure business hours.
• Send proactive messages.