Tutorial: Adding WhatsApp Widget to Your MonoSolutions CMS Website

by

This tutorial guides developers and agencies through the process of integrating the WhatsApp Widget into a MonoSolutions CMS website. The widget enables seamless customer communication via WhatsApp, with options for a floating widget or an embedded booking form.

Follow these clear, step-by-step instructions to set up, configure, and publish the widget.

Prerequisites

  • A MonoSolutions CMS website.
  • A tochat.be account.
  • Access to the MonoSolutions editor with permissions to modify site settings and design.

Step 1: Create a tochat.be Account

  1. Visit tochat.be Website
  2. Sign Up: Click the sign-up option to create an account.
  3. Configure Your Account: Follow the prompts to set up your profile and access the widget creation dashboard.

Step 2: Create and Configure the WhatsApp Widget

  1. Access the Widget Editor:
    • Log in to your tochat.be account.
    • Navigate to the widget creation section.
  2. Customize the Widget:
    • Choose a design that matches your website’s branding (e.g., colors, button style).
    • Configure WhatsApp settings, such as the phone number or agent details for customer communication.
    • Optionally, enable a booking system with a calendar for scheduling appointments.
  3. Generate the Widget Code:
    • Once configured, copy the widget’s script code for a floating widget or the HTML code for an embedded form (if using the booking system).

Step 3: Add the WhatsApp Widget to Your MonoSolutions Website

Option 1: Adding a Floating WhatsApp Widget

  1. Log in to MonoSolutions CMS:
    • Access your MonoSolutions dashboard and open the website editor.
  2. Navigate to Site Settings:
    • In the editor, go to Design > Site Settings.
    • Locate the Global HTML section in the dropdown menu.
  3. Paste the Widget Code:
    • Paste the copied widget script into the Global HTML field.
  4. Save and Publish:
    • Click Save to store the changes.
    • Click Publish to make the widget live on your website.
  5. Verify the Widget:
    • Visit your website to ensure the floating WhatsApp widget appears and functions correctly (e.g., opens WhatsApp when clicked).

Option 2: Embedding a Booking Form

  1. Select the Booking Widget Code:
    • In your Chatwi dashboard, choose the booking system option and copy the HTML form code.
  2. Access the Page Editor:
    • In the MonoSolutions editor, select the page where you want to embed the form (e.g., a contact or booking page).
    • Go to Edit Design and locate the section where you want to place the form.
  3. Replace or Add HTML:
    • If replacing an existing form (e.g., a contact form), delete the current form content.
    • Add a new HTML block to the page.
    • Paste the booking form code into the HTML block.
  4. Save and Publish:
    • Click Save to update the page.
    • Click Publish to make the changes live.
  5. Verify the Form:
    • Visit the page to confirm the booking form displays correctly and allows users to schedule appointments via WhatsApp.

Step 4: Test the Integration

  1. Test the Floating Widget:
    • Click the WhatsApp widget on your website to ensure it opens WhatsApp with the correct phone number or agent.
  2. Test the Booking Form (if applicable):
    • Submit a test booking to verify that the calendar works and the lead is captured.
  3. Check Mobile Responsiveness:
    • Since WhatsApp is primarily used on mobile, test the widget or form on various devices to ensure it’s user-friendly.

Tips for Success

  • Preview Limitations: The MonoSolutions editor may not render the widget or form in the preview mode due to HTML rendering constraints. Always publish and test on the live site.
  • Customization: Use tochat.be dashboard to tweak the widget’s appearance or behavior to align with your website’s design.
  • Lead Management: Ensure your WhatsApp account is set up to handle incoming messages or bookings efficiently.
  • Support: Contact tochat.be support via their website if you encounter issues during setup.

Why Use a WhatsApp Widget?

  • Engage Mobile Users: With most users accessing websites via mobile, WhatsApp integration ensures you don’t miss out on prospects.
  • Easy Setup: The process is straightforward, requiring minimal coding knowledge.
  • Versatile Options: Choose between a floating widget for quick chats or an embedded form for structured bookings.

Leave a comment