Install Yaplet on a WooCommerce store

WooCommerce shops run on WordPress, so you install Yaplet the WordPress way: with the official Yaplet Live Chat plugin (you only enter your widget ID), or by pasting the code with the free WPCode plugin. Both put the chat on every page of your shop.

Option A: the Yaplet Live Chat plugin (recommended)

This is the same plugin as for any WordPress site. The full guide is Install Yaplet on a WordPress site.

1. Install the plugin

In your WordPress admin, go to Plugins → Add Plugin and search for Yaplet. On the Yaplet Live Chat card ("By IG Services LLC", the company behind Yaplet), click Install Now, then Activate.

2. Enter your widget ID

Go to Settings → Yaplet and paste your widget ID into the Widget ID field. To find it, go to Brand → (your brand) → Chat widget → Install in your Yaplet dashboard. If the tab asks where your website runs, choose WordPress / WooCommerce: it shows your widget ID with a copy button. Otherwise the ID is the widgetId value inside the code shown there, and it is also the last part of that page's web address.

3. Save and check

Click Save Changes, then open your shop in a new tab. The Yaplet chat button appears in the bottom-right corner.

The plugin does not record Session Replays yet. If you switched them on in Yaplet (Chat widget → Features), use Option B.

Option B: paste the code with WPCode

Use this if you already run WPCode, or if you use Session Replays.

1. Install WPCode

Go to Plugins → Add Plugin, search for WPCode (listed as "WPCode – Insert Headers and Footers"), then install and activate it.

2. Paste the Yaplet code

Copy the code from Brand → (your brand) → Chat widget → Install in Yaplet. If the tab asks where your website runs, choose Other website. The code you paste must start with a <script> line and end with a </script> line; if what you copied starts with !function (Yaplet instead, type <script> on a new line before it and </script> on a new line after it. In WordPress, go to Code Snippets → Header & Footer, paste the code into the Footer box and click Save Changes.

3. Check

Reload your shop. The chat button appears on every page.

Identify logged-in customers

Pass WooCommerce customer data to Yaplet so your team sees real names and order values in the inbox. Identifying a customer requires a signature proving the ID really is theirs — without it anyone could claim to be one of your customers, so we reject unsigned calls. WordPress runs on your server, so it can produce that signature.

First add your identity secret to wp-config.php. You'll find it in the Yaplet dashboard under Brand → (your brand) → Chat widget → Install → Identity verification, behind the Show identity secret button:

define('YAPLET_IDENTITY_SECRET', 'paste-your-secret-here');

Then add this to your theme's functions.php or a custom plugin:

add_action('wp_footer', function () {
  if (is_user_logged_in()) {
    $user = wp_get_current_user();
    $customer = new WC_Customer($user->ID);
    $user_hash = hash_hmac('sha256', (string) $user->ID, YAPLET_IDENTITY_SECRET);
    echo '<script>';
    echo 'Yaplet.identify("' . esc_js($user->ID) . '", {';
    echo '  name: "' . esc_js($user->display_name) . '",';
    echo '  email: "' . esc_js($user->user_email) . '",';
    echo '  value: ' . floatval($customer->get_total_spent()) . ',';
    echo '}, "' . esc_js($user_hash) . '");';
    echo '</script>';
  }
});

Keep the secret in wp-config.php — never paste it into a theme file or anywhere else the browser can download it.

Troubleshooting

• Two chat buttons — Don't use the Yaplet plugin and the WPCode code at the same time; keep one of them.
• Cache issues — Clear your WordPress cache, WooCommerce transients, and any CDN cache after installation.
• Conflicts with other chat plugins — If you previously used another chat plugin, deactivate it before installing Yaplet to avoid launcher conflicts.

What's next

Check that the widget is loading correctly on your store: Verify your installation.