ChatMadi

Install the WhatsApp Chat Widget

New here? Start at the Docs home. After installation, continue to Dashboard guide, review Troubleshooting, and skim the FAQ.

Prerequisites

  1. Your WhatsApp number in full international format (e.g., +91XXXXXXXXXX).
  2. Access to your site’s HTML or theme editor (WordPress/Webflow/Shopify/etc.).
  3. Your Widget ID from Dashboard → Overview.

Quick install (recommended)

Step 1 — Copy your embed snippet

Use your live Widget ID if you’re signed in. Otherwise, replace YOUR_WIDGET_ID manually.

<script src="https://chatmadi.com/api/widget.js?wid=YOUR_WIDGET_ID"></script>

Step 2 — Paste before the closing </body> tag

  • Plain HTML: Edit your base template, paste the snippet right before </body>.
  • WordPress: Use a header/footer injection plugin or your theme’s Footer; paste before </body>.
  • Shopify: Online Store → Themes → Edit code → layout/theme.liquid, paste before </body>.
  • Webflow: Project Settings → Custom Code → Footer Code, publish your site.
  • Wix/Squarespace: Use site-wide code injection in Footer.
  • Next.js (App Router): Place inside app/layout.tsx just before </body>.

Optional — Auto-trigger

Add a simple rule to auto-open the widget (e.g., after a delay). Paste this after the main snippet:

<script src="https://chatmadi.com/api/auto-trigger?wid=YOUR_WIDGET_ID"></script>

Learn more: Widget behavior & customization.

Verify installation

  1. Open your site in an incognito window. The floating bubble should appear.
  2. Click the bubble; WhatsApp (app/web) should open with your number and prefilled text.
  3. Check Dashboard → Analytics for impressions and clicks.

Platform notes

WordPress

  • Prefer a proven “Header & Footer Code” plugin for site-wide injection.
  • Some page builders may sanitize scripts in content blocks — inject at theme/footer level instead.

Shopify

  • Edit layout/theme.liquid and paste before </body> to load on all templates.
  • If your theme has multiple layouts, ensure you add it to the primary one.

Webflow

  • Project Settings → Custom Code → Footer Code.
  • Publish to the live domain and test there (Designer preview won’t run site-level code).

CSP (Content Security Policy)

If your site uses CSP, allow the widget script origin and WhatsApp links. See Troubleshooting → CSP for exact directives.

Next steps