Chat & Messaging Integrations
      Back to home
      1. Help Center
      2. Using integrations with B12
      3. Chat & Messaging Integrations

      Adding WhatsApp to your B12 website

      Learn how to make it easy for users to connect with you on WhatsApp through your B12 website

      me-webp-3-1

      Written by: Madeline B.

      Last updated: 23rd Jan. 2025

      By embedding a WhatsApp chat button directly into your B12 website, you can provide a convenient communication channel for your visitors. This integration allows users to initiate direct conversations with your business, streamlining the customer support process and improving the user experience.

      What is WhatsApp?

      WhatsApp is a messaging app that allows users to send text messages, voice messages, video calls, and images to other users using a smartphone. It's widely used for both personal and business communication, offering a convenient way to connect with people around the world.

      How to acquire WhatsApp embed code 

      WhatsApp's click-to-chat feature enables you to create a direct link to a WhatsApp conversation. This link can be placed anywhere on your website, such as a button, menu item, or image. When a visitor clicks the link, a new WhatsApp chat opens, pre-populated with a specified phone number and optional message.

      This feature is compatible with both mobile devices and WhatsApp Web, providing a seamless user experience across different platforms.

      Two configurations exist for creating WhatsApp click-to-chat links:

      • Basic link (no pre-populated message):
        1. Use the following base URL: https://api.whatsapp.com/send?phone=<number>
        2. Replace <number> with your full phone number in international format (omit zeros, brackets, and dashes).
      • Link with pre-populated message: 
        1. Use the following base URL: https://api.whatsapp.com/send?phone=<number>&text=<message>
        2. Replace <number> with your full phone number in international format (omit zeros, brackets, and dashes).
        3. Replace <message> with the desired pre-populated message. Encode spaces within the message using %20.

      Example:

      Let's say the business's WhatsApp number is +1234567890 and you want to include a pre-populated welcome message like "Hi, welcome to [Business Name]! Let's chat."

      The link would look like this:

      https://api.whatsapp.com/send?phone=1234567890&text=Hi,%20welcome%20to%20%5BBusiness%20Name%5D!%20Let%27s%20chat.

      When a customer clicks this link, a WhatsApp chat will open with the business's number and the pre-populated welcome message. The customer can then continue the conversation from there.

      How to add WhatsApp to your B12 website 

      Create a WhatsApp click-to-chat link by following these steps:

      • Log in to your B12 editor.
      • Go to your B12 dashboard and find the Website tab.

      • Once you're in the Website section, select Pages then Home. 

      • Select the specific page on your website where you want the WhatsApp button to appear. This could be the Home page, About page, Services page, or any other relevant page.

      • From the Content section, click the Add new link button.

      1. Customize the button text. Use a concise and persuasive call to action like Contact Us on WhatsApp.

      1. For Link type, choose External website URL. 

      1. In the Links to fieldt, paste your WhatsApp embed code that you generated earlier. 

      1. On your page, the WhatsApp widget can appear either as a link or button. Choose the one that best suits your preferences. 

      When a customer clicks on the WhatsApp button or link, they’ll be taken to a page that looks like this:

      1. Finally, click the Publish button in the top right corner of the Editor to make your changes live on your website.

      Once you've embedded the link, make sure to test the functionality on different devices (desktop and mobile) to ensure users can initiate WhatsApp chats seamlessly.

      As an alternative, you can also consider using B12's built-in Contact Manager as a communication and organization tool. It consolidates various communication channels like emails, messages, forms, and notes into a centralized location. 

      Learn more about the Contact Manager's features in these support articles:

      Additional inquiries can be directed to the B12 support team via email: hello@b12.io.