message.comDevelopers
Developers/Tutorials/Install via Cloudflare Workers

Install live chat via Cloudflare Workers

Inject the widget on every HTML response without touching origin code. Useful for legacy CMSs, static sites you cannot easily edit, or multi-tenant deploys where you want a single source of truth for the install. Roughly 15 minutes if you have never used Wrangler.

Check the current supported installation options before configuring a Worker manually. See Cloudflare 1-click.

Before you begin

  • A Cloudflare account with the zone you want to inject on already added.
  • Workers enabled on your account. Check Cloudflare’s current plan limits before routing production traffic.
  • Your install snippet from Settings → Chats → Installation in message.com.

1. Install Wrangler

bash
npm install -g wrangler
wrangler login
wrangler deploy

2. Create a Worker project

From your terminal:

bash
mkdir message-widget-injector && cd message-widget-injector
mkdir src && touch src/worker.js wrangler.toml

3. Configure wrangler.toml

Set the route to the zone where you want the widget injected. Adjust example.com to your domain.

wrangler.toml
name = "message-widget-injector"
main = "src/worker.js"
compatibility_date = "2025-01-01"

routes = [
  { pattern = "example.com/*", zone_name = "example.com" }
]

4. Write the Worker

This Worker uses Cloudflare's HTMLRewriter to append the snippet to the closing </body> tag on every HTML response. Non-HTML responses pass through untouched.

src/worker.js
// src/worker.js
const SNIPPET = `
  <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>
`;

class BodyInjector {
  element(el) {
    el.append(SNIPPET, { html: true });
  }
}

export default {
  async fetch(request) {
    const response = await fetch(request);
    const ct = response.headers.get("content-type") || "";
    if (!ct.includes("text/html")) return response;

    return new HTMLRewriter()
      .on("body", new BodyInjector())
      .transform(response);
  },
};

Replace YOUR_EMBED_ID with the site embed identifier from Chat installation settings.

5. Deploy

bash
wrangler deploy

Wrangler prints the deployed worker name and any errors. The route activates immediately.

6. Verify

  1. Open your site in a private window.
  2. Confirm the launcher appears in its configured position on the published site.
  3. Right-click → View Page Source. Confirm the snippet is in the HTML.
  4. Send a test message. The conversation lands in app.message.com.

Common pitfalls

  • Origin already injects the snippet. If the Worker plus the origin both inject, you get two scripts. The widget tolerates this (second load is ignored), but it wastes bytes. Pick one source of truth.
  • HTMLRewriter cost. Check the CPU and request limits of your Cloudflare plan and measure your Worker’s usage before routing production traffic.
  • Content-Type sniffing. The Worker checks content-type for text/html before rewriting. Origin responses that omit the header (rare) are skipped.
  • Edge cache invalidation. Cloudflare caches HTML responses if your origin lets it. After deploying the Worker, purge the zone's cache or wait for TTL.
  • Static assets behind a separate hostname. If www.example.com serves HTML and cdn.example.com serves assets, set the route only on the HTML hostname.

Next steps