message.comDevelopers
Developers/Tutorials/Install on WordPress

Install live chat on WordPress

Three ways to add the message.com live chat widget to a WordPress site. Pick the one that matches your skill level and stack. All three put the same snippet in the same place: the footer of every public page.

Before you begin

  • A WordPress site you can log into as an administrator.
  • A message.com workspace. Sign up at app.message.com/register if you don't have one yet.
  • Your install snippet. Copy it from Settings → Chats → Installation in the dashboard. It looks like this:
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>

Method 1: Header and footer plugin (recommended)

Easiest option. No theme edits, survives theme switches.

  1. In wp-admin, open Plugins → Add New.
  2. Search for WPCode or Insert Headers and Footers. Install and activate.
  3. Open the plugin's settings page.
  4. Paste the snippet into the Footer or Before closing body tag field.
  5. Save.
  6. Visit the front of your site in a new private window. The launcher appears in the bottom-right within two seconds.

Method 2: Theme functions.php

Good if you already maintain a child theme. Keeps the install in version control.

  1. Open your child theme's functions.php.
  2. Append the block below. Replace YOUR_WORKSPACE_ID with your workspace ID.
  3. Save and deploy (FTP, SFTP, or your hosting dashboard).
functions.php
<?php
// Add to your child theme's functions.php
add_action('wp_footer', function () {
  $workspace_id = 'YOUR_WORKSPACE_ID';
  ?>
  <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',<?php echo wp_json_encode($workspace_id); ?>);
  </script>
  <?php
});

Do not edit a parent theme. The next theme update overwrites your changes. Always use a child theme.

Method 3: Customizer additional code

Some block themes expose an Additional code panel under Appearance → Customize. Paste the snippet there if your theme supports it. The setting is theme-scoped, so switching themes will hide the widget until you re-paste.

Verify the install

  1. Open the front of your site in a private window.
  2. Wait two seconds. The chat launcher should appear in the bottom-right corner.
  3. Open the browser console. The widget logs a single startup line tagged [message] with the workspace ID it picked up.
  4. Click the launcher and send a test message.
  5. Open app.message.com in another tab. A new conversation appears in the inbox.

Common pitfalls

  • Caching plugins. WP Rocket, W3 Total Cache, LiteSpeed Cache, and Autoptimize can combine or defer the snippet, which breaks the async preamble. Exclude app.message.com from script optimisation, or add the snippet to the plugin's ignore list.
  • Security plugins. Wordfence and similar can block the Socket.io upgrade. If the widget loads but messages never arrive, allowlist wss://app.message.com.
  • Multisite networks. Each sub-site needs its own install if you want a different workspace per site. The snippet sees the page URL, not the network.
  • Page builders. Elementor, Divi, Beaver Builder run the footer hook normally. You should not need a builder-specific install.

Next steps