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

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

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

Magento Integration Guide