Skip to main content

Set Up the WhatsApp Chat Widget

Add a WhatsApp chat button to your website so visitors can contact you directly.

whatsapp-widget-single-phone-expanded.png

whatsapp-widget-multi-phone-expanded.png

The widget appears in the bottom-right corner of your website. You can configure it with a single WhatsApp number or multiple numbers (for businesses with multiple locations or departments). All settings can be updated from the admin panel without developer help.

Configure the widget​

  1. Go to Admin View and click Website Chat Widget in the left menu.

    navigating-to-admin-view.png

    navigate-to-website-chat-widget.png

  2. Find the WhatsApp widget and click Edit Widget.

    edit-website-chat-widget.png

  3. Choose Single Number or Multiple Numbers.

    edit-whatsapp-chat-widget-widget-type.png

    Single number setup

    Enter the WhatsApp number including country code (e.g., +65 for Singapore).

    edit-whatsapp-chat-widget-widget-type-single-input-phone.png

    Multiple numbers setup

    Add numbers with a Name (required) and optional Description for each. Use + Add Number to add more.

    edit-whatsapp-chat-widget-widget-type-multi-input-phone.png

    • Click the pencil icon to edit a number
    • Use the up/down arrows to reorder (the first number appears as the default)
    • Click Save Changes after editing

    edit-whatsapp-chat-widget-widget-type-multi-input-phone-edit-save.png

  4. Set a Welcome Message — this pre-fills the WhatsApp chat box when a visitor clicks the widget. Visitors can edit it before sending.

    edit-whatsapp-chat-widget-welcome-message.png

  5. Set Visibility Rules to control which pages show the widget (default: all pages).

    edit-whatsapp-chat-widget-visibility-rules.png

  6. Click Save Widget.

Add the widget to your website​

warning

This step requires adding code to your website. You may need a developer's help.

  1. In Admin View > Website Chat Widget, click Copy Embed Code on your widget.

    copy-embed-code-whatsapp-chat-widget.png

    copy-embed-code-whatsapp-chat-widget-copy-code.png

  2. Paste the code into the <body> section of your website's HTML.

    Elementor users
    1. Go to Elementor > Custom Code and click Add New.
    2. Name it (e.g., "Exabloom Chat Widget"), paste the script, set location to Body End, and publish.
    3. If you have an existing chat widget plugin, deactivate it under Plugins.

  3. Visit your website and verify the WhatsApp button appears in the bottom-right corner. Click it to confirm the welcome message is correct.

Next steps​