message.comDevelopers
Developers/Tutorials/Install on plain HTML

Install live chat on plain HTML

The simplest install. Paste one snippet on every HTML page where you want the chat launcher. No build step, no framework, no plugin. Two minutes total.

1. Copy your snippet

Sign in to app.message.com. Open Settings → Chats → Installation. Click Copy snippet.

2. Paste before the closing body tag

Open each HTML page where you want the widget. Paste the snippet right before </body>. Save.

example.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Acme</title>
</head>
<body>
  <h1>Welcome to Acme</h1>
  <!-- ... your content ... -->

  <!-- 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>
</body>
</html>

If you have a server-side include or a shared template footer, paste the snippet there once. The widget will load on every page that includes the footer.

3. Deploy

Upload via FTP, SFTP, S3, Cloudflare Pages, Netlify, Vercel, GitHub Pages, whatever your host requires. The widget loads from app.message.com and does not need any backend on your end.

4. Verify the install

  1. Open the page in a private window.
  2. Confirm the domain is allowed for the site, then check for the launcher in the configured position.
  3. If it is missing, check browser network errors, content security policy and the site’s availability settings.
  4. Send a test message. The conversation lands in app.message.com.

Multiple pages

Three options to apply the snippet across a site:

  • Shared footer include. Most static-site generators (Jekyll, Hugo, Eleventy, Astro) have a footer partial. Paste once.
  • Build-step injection. A small post-build script can append the snippet to every .html file. find dist -name '*.html' -exec sed -i ... is fine.
  • Server-side include. Nginx and Apache both support SSI directives that inline a shared footer.

Common pitfalls

  • Snippet in <head>. Use the asynchronous installation snippet. For a consistent placement, put it right before </body>.
  • Multiple snippets. If you paste it twice, the second copy is ignored. Audit shared partials.
  • Strict CSP. Allowlist app.message.com on script-src and connect-src. See the MDN CSP reference.
  • HTTPS only. Use HTTPS on your public website. For local tests, use a development hostname allowed in the site settings and check browser security restrictions.

Next steps