QuackChat on Magento
Add the QuackChat widget to your Magento 2 store. This guide requires developer knowledge of Magento's theme system.
Quick Start (TL;DR)
- Create or edit a custom theme
- Add the widget script to
default_head_blocks.xml - Clear cache and deploy
Prerequisites
- Magento 2 admin access
- SSH/FTP access to server (for file editing)
- Basic Magento theme development knowledge
- Bot ID from your QuackChat dashboard
Step-by-Step Installation
Option A: Layout XML (Recommended)
This method integrates cleanly with Magento's layout system.
Step 1: Create Layout File
Create or edit the following file in your theme:
app/design/frontend/[Vendor]/[Theme]/Magento_Theme/layout/default.xml
xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="before.body.end">
<block class="Magento\Framework\View\Element\Template"
name="quackchat.widget"
template="Magento_Theme::quackchat.phtml"/>
</referenceContainer>
</body>
</page>
Step 2: Create Template File
Create the template file:
app/design/frontend/[Vendor]/[Theme]/Magento_Theme/templates/quackchat.phtml
php
<script
src="https://www.quackchat.app/widget/quackchat-widget.js"
data-bot-id="YOUR_BOT_ID"
></script>
Step 3: Deploy
bash
# Clear cache
php bin/magento cache:clean
# Deploy static content (production mode)
php bin/magento setup:static-content:deploy -f
Option B: CMS Block (Simpler but Limited)
For quick testing without theme changes:
- Go to Content > Blocks
- Create a new block:
- Title: QuackChat Widget
- Identifier: quackchat-widget
- Content (HTML mode): widget code
- Add the block to your footer via Layout Update XML or widget
Verification
Quick test:
- Clear all caches:
php bin/magento cache:flush - Visit your store frontend
- Look for the chat bubble
- Test sending a message
Troubleshooting
Widget doesn't appear after deployment
Cause: Cache not cleared or static content not deployed.
Solution:
bash
php bin/magento cache:flush
php bin/magento setup:static-content:deploy -f
"Template file not found" error
Cause: Incorrect file path or theme fallback issue.
Solution:
- Verify file paths match your theme structure
- Check theme inheritance chain
- Ensure file permissions are correct
CSP blocking the widget
Cause: Magento's Content Security Policy.
Solution: Add CSP whitelist in csp_whitelist.xml:
xml
<?xml version="1.0"?>
<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp/etc/csp_whitelist.xsd">
<policies>
<policy id="script-src">
<values>
<value id="quackchat" type="host">quackchat.app</value>
</values>
</policy>
</policies>
</csp_whitelist>
Known Limitations
- Requires developer knowledge
- Theme changes needed for proper integration
- CSP configuration may be required
- Checkout pages need separate handling