Live Chat Widget Plugin

The Live Chat Widget plugin adds a live chat widget to your storefront so you can communicate with customers in real time. It supports popular chat providers and also lets you embed any custom chat widget.

What It Does

• Adds a floating chat widget on all storefront pages
• Supports Tawk.to, Crisp, and custom embed code
• Customers can chat with you directly from your store
• Does not affect admin panel pages -- the widget appears on the storefront only

Supported Providers

Provider	Description	Cost
Tawk.to	Full-featured live chat with a generous free plan	Free
Crisp	Modern chat platform with a free tier for small teams	Free / Paid
Custom	Paste any third-party chat widget embed code	Varies

Setting Up with Tawk.to

Step 1: Create a Tawk.to Account

1. Go to tawk.to and sign up for a free account
2. Add your website as a new property
3. You will receive a Property ID that looks something like 64a1b2c3d4e5f6/1h7i8j9k0l

Step 2: Find Your Property ID

1. Log in to your Tawk.to dashboard
2. Go to Administration > Channels > Chat Widget
3. Your widget code will contain a URL like https://embed.tawk.to/64a1b2c3d4e5f6/1h7i8j9k0l
4. The part after embed.tawk.to/ is your Property ID: 64a1b2c3d4e5f6/1h7i8j9k0l

Step 3: Configure the Plugin

1. Go to Admin Panel > Plugins
2. Find Live Chat Widget and click Enable
3. Click Settings
4. Set Chat Provider to tawk
5. Enter your Property ID in the Widget ID / Property ID field
6. Click Save

Setting Up with Crisp

Step 1: Create a Crisp Account

1. Go to crisp.chat and create an account
2. Add your website

Step 2: Find Your Website ID

1. Log in to your Crisp dashboard
2. Go to Settings > Website Settings
3. Copy your Website ID (a string of letters and numbers)

Step 3: Configure the Plugin

1. Go to Admin Panel > Plugins
2. Find Live Chat Widget and click Enable
3. Click Settings
4. Set Chat Provider to crisp
5. Enter your Website ID in the Widget ID / Property ID field
6. Click Save

Using Custom Embed Code

If you use a chat service other than Tawk.to or Crisp, you can paste its embed code directly.

1. Go to Admin Panel > Plugins
2. Find Live Chat Widget and click Enable
3. Click Settings
4. Set Chat Provider to custom
5. Paste your chat widget's full embed code (including <script> tags) into the Custom Embed Code field
6. Click Save

WARNING

When using custom embed code, make sure the code comes from a trusted source. Only paste code from your chat provider's official setup instructions.

Plugin Settings Reference

Setting	What to Enter
Chat Provider	Choose tawk (Tawk.to), crisp (Crisp), or custom (paste your own code)
Widget ID / Property ID	Your Tawk.to Property ID or Crisp Website ID. Not used when provider is "custom"
Custom Embed Code	Your full chat widget embed code. Only used when provider is set to "custom"

Verifying It Works

After setting up the plugin:

1. Open your storefront in a browser
2. Look for the chat widget in the bottom-right corner of the page
3. Click it to open the chat window
4. Send a test message to make sure it reaches your chat provider's dashboard

TIP

If the chat widget does not appear, check that the plugin is enabled and that your Widget ID is entered correctly. Also make sure ad blockers are not hiding the chat widget.