How to Install and Customize the WhatsApp Widget for Your Website

by

This step-by-step tutorial explains how to install the WhatsApp widget on your website (using HTML, PHP, or any CMS) and customize it to display all agents or only specific individual agents. This is based on the provided video guidance, which covers the basic installation, per-agent options, and the new feature for creating individual agent widgets without duplicating settings or access configurations. The widget allows users to interact with your agents via WhatsApp, forms, links, QR codes, or landing pages, while tracking interactions.

Prerequisites

  • Access to your website’s code editor or CMS (e.g., WordPress, Shopify, or raw HTML/PHP files).
  • Your widget dashboard where you can find the main widget code, per-agent codes, agent IDs, links, QR codes, and landing pages.
  • Note: All codes, IDs, and options are unique to your account and available in your dashboard. Do not share them publicly for security reasons.

Step 1: Install the Basic Widget (All Agents)

  1. Log in to your widget dashboard.
  2. Locate the main widget code section. This is the default code that installs the widget displaying all your agents (e.g., if you have three agents, it will show all three).
  3. Copy the provided code snippet (it should look like a script tag or embed code).
  4. Paste the code into your website’s HTML, PHP file, or CMS editor:
    • For HTML/PHP: Insert it just before the closing </body> tag.
    • For CMS: Use a custom HTML block, footer section, or plugin for embeds.
  5. Save and publish your changes.
  6. Refresh the page to verify: The widget should appear on your site, showing all agents (e.g., a chat bubble or panel with agent options).

Example result: A floating widget on your page that opens to display multiple agents for users to choose from.

Step 2: Add Per-Agent Forms (Optional)If you want to embed a contact form for a specific agent separately (not as part of the main widget):

  1. In your dashboard, go to the individual agent section.
  2. For the desired agent (e.g., “Peter” or “Mary”), find and copy the per-agent form code.
  3. Paste this code into a specific page or section of your website where you want the form to appear (e.g., in a contact page or sidebar).
  4. Save and refresh: The form will now display independently, allowing users to submit details directly to that agent.
  5. Repeat for other agents if needed.

Example result: A standalone form on the page, next to or separate from the main widget.

Step 3: Use Per-Agent Links, QR Codes, or Landing Pages (Optional)For additional sharing options:

  1. In the agent section of your dashboard, locate the unique link, QR code, or landing page for each agent.
  2. Use these as needed:
    • Link: Share it to open WhatsApp directly for that agent (e.g., in emails or buttons).
    • QR Code: Display it on print materials or your site for quick scanning to start a chat.
    • Landing Page: Embed or link to a dedicated page for the agent.
  3. Interactions (e.g., clicks or form submissions) are tracked in your dashboard.

This helps if you’re promoting individual agents (e.g., for personal branding or targeted campaigns).

Step 4: Customize the Widget for Individual Agents

(New Feature)This is the key feature for displaying the widget with only one (or specific) agent(s) without cloning the entire widget, settings, or access rules. It’s ideal for agent-specific pages or splitting agents across your site.

  1. Start with the basic widget installed (from Step 1). Ensure the main widget code is already on the page you want to customize.
  2. In your dashboard, go to the agent section.
  3. Select the agent you want to display (e.g., “Peter”).
  4. Copy the agent’s unique ID (found next to the agent’s code in the dashboard—it’s a unique identifier like a number or string).
  5. Also, copy the per-agent widget code snippet provided in the dashboard (this is different from the form code; it’s specifically for the widget).
  6. Modify the main widget script on your website:
    • Locate the main widget code you pasted earlier.
    • Add or insert the per-agent code snippet into the script, including the agent ID where indicated (the dashboard code will have a placeholder like “add the ID of the agent you want to insert”).
    • Example structure (based on typical embed codes—replace with your actual dashboard code):
    • <script defer src=”https://widget.tochat.be/bundle.js?key=YOURKEY” data-agents=“AgentID”> </script>

Widget KEY number:

Widget Agent ID:

  1. Save and refresh the page.
  2. Verify: The widget now only shows the selected agent (e.g., only “Peter” appears, with the same overall settings as the main widget).

To switch agents:

  • Repeat steps 3–7 with a different agent’s ID and code.
  • For example, replace the ID with “Mary’s” to show only her.

If you need multiple individual widgets on different pages:

  • Copy the customized code (with the specific agent ID) to those pages.
  • This avoids duplication—changes to core settings (e.g., design or access) apply globally.

Step 5: Test and Track Interactions

  1. Test the widget/forms/links on your live site:
    • Click the widget to ensure it opens WhatsApp or the form for the correct agent.
    • Scan QR codes or visit landing pages.
  2. In your dashboard, check for tracked data: Clicks, form submissions, and interactions are logged per agent.
  3. Troubleshoot:
    • If the widget doesn’t load, check for script conflicts or ad blockers.
    • Ensure agent IDs are copied exactly—no extra spaces or typos.
    • For CMS issues, consult your platform’s embed guidelines.

Additional Tips

  • Security: Agent IDs and codes are unique—keep them private.
  • Customization: All agents share the same widget settings (e.g., design, behavior), so no need to duplicate anything.
  • Use Cases: Use individual agents for department-specific pages (e.g., sales vs. support) or personalized agent promotion.
  • Updates: If you make changes in the dashboard (e.g., add/remove agents), re-test on your site.

Leave a comment