WordPress Integration Guide

QuackChat on WordPress

Add the QuackChat widget to your WordPress site in minutes. Works with all themes including Elementor, Divi, and Gutenberg.

Quick Start (TL;DR)

1. Download the QuackChat plugin: quackchat-widget.zip
2. Plugins → Add New → Upload Plugin → choose the zip → Install Now → Activate
3. Settings → QuackChat → paste your Bot ID → Save

Prerequisites

• WordPress admin access
• Bot ID from your QuackChat dashboard (Deploy page → Copy Bot ID)

Step-by-Step Installation

Option A: QuackChat Plugin (Recommended)

The official plugin — no code, no theme edits, survives theme updates.

1. Download the plugin zip: quackchat-widget.zip (also available from your dashboard's Deploy page).
2. In WordPress admin, go to Plugins → Add New → Upload Plugin.
3. Choose quackchat-widget.zip, click Install Now, then Activate.
   • The plugin is distributed directly by QuackChat, so it won't appear in the plugin search — use Upload Plugin.
4. Go to Settings → QuackChat and paste your Bot ID (you can also paste the whole embed snippet — the ID is picked out automatically).
5. Click Save Changes. The status banner shows Live ✓ and the widget appears site-wide.

Plugin settings:

• Bot ID — from your dashboard's Deploy page
• Enable widget — turn off to pause without uninstalling
• Position — bottom right (default) or bottom left
• Hide on cart & checkout (WooCommerce sites only) — recommended off: cart-recovery and free-shipping nudges fire on those pages

Option B: WPCode Snippet (Manual Fallback)

If you can't upload plugins (e.g. some managed hosts), use the free WPCode – Insert Headers and Footers plugin instead:

1. In WordPress admin, go to Plugins → Add New Plugin, search WPCode Insert Headers and Footers, install and Activate.
2. Go to Code Snippets → Header & Footer, paste the widget snippet into the Footer box, and Save:

<script
  src="https://www.quackchat.app/widget/quackchat-widget.js"
  data-bot-id="YOUR_BOT_ID"
  async
></script>

If the code disappears when you save, your site strips <script> tags. Add it as a JavaScript Snippet instead (no <script> wrapper — WPCode adds it):

js

var s = document.createElement('script');
s.src = 'https://www.quackchat.app/widget/quackchat-widget.js';
s.setAttribute('data-bot-id', 'YOUR_BOT_ID');
document.body.appendChild(s);

Option C: Custom HTML Block (Specific Pages Only)

To add the widget to specific pages only:

1. Edit the page in WordPress
2. Add a Custom HTML block (in Gutenberg) or use a text widget
3. Paste the widget snippet from Option B
4. Publish the page

Note: This method loads the widget only on pages where you add the block. The plugin (Option A) is site-wide.

Page Builder Notes

The plugin (Option A) works with all page builders that render standard WordPress themes — Elementor, Divi, and Gutenberg included — because it injects via the theme footer.

• Elementor / Divi / Gutenberg: just use Option A.
• Fully headless or static-export setups (theme never calls wp_footer()): the plugin can't inject — use the embed snippet from Option B wherever your setup allows custom scripts.

Verification

Quick test:

1. Visit your WordPress site (logged out or incognito)
2. Look for the chat bubble in the bottom-right corner
3. Click to open and send a test message

Troubleshooting

Two chat bubbles

Cause: The widget was previously installed via a code snippet (WPCode, theme editor) and the plugin is now also active.

Solution: Remove the old snippet — the plugin replaces it.

Widget doesn't appear after saving settings

Cause: Page-cache plugins bake the page HTML, so settings changes (enable/disable, Bot ID) don't show until the cache is purged.

Solution:

• Purge your cache after changing QuackChat settings
• Exclude the widget script from minification/combining
• In WP Rocket: Add quackchat-widget.js to excluded files

Security plugin blocks the script

Cause: Some security plugins block external scripts.

Solution:

• Whitelist www.quackchat.app and api.quackchat.app
• Check Wordfence, Sucuri, or similar plugin settings

"Installation failed: Could not create directory"

Cause: The web server can't write to wp-content/upgrade/ (permissions or disk space).

Solution: Ask your host to fix ownership of wp-content/ for the web server user, or upload the extracted quackchat-widget/ folder to wp-content/plugins/ via SFTP.

Testing in WordPress

// In browser console, test if widget loaded:
console.log(typeof QuackChatWidget); // Should output: "object"

// Open widget programmatically:
QuackChatWidget.open();

WooCommerce

If you're using WooCommerce, see the dedicated WooCommerce guide for e-commerce-specific tips. The plugin is WooCommerce-aware out of the box.

Multisite

For WordPress Multisite installations:

• Per-site (recommended): Network-activate the plugin or activate it per site; each site configures its own Bot ID under Settings → QuackChat.
• Uninstalling removes the settings from every site.

Performance Tips

1. The widget script is injected with async and won't block your page
2. If you use a strict Content-Security-Policy, allowlist https://www.quackchat.app in script-src