Add WhatsApp Button

To add a WhatsApp button to your website in Pineapple Builder, simply choose where you want to place the WhatsApp button and click the blue + button that pops up on the border of the element over which you are hovering. Common locations to place your button include the footer, contact page, or sidebar.

Selecting a WhatsApp Button Template

Now that you have decided where to place your WhatsApp button, it's time to select a template within Pineapple Builder:

1. Search for WhatsApp Templates: After clicking the + button, search for WhatsApp button templates. You will find several options.

   

   

2. Template Options: Choose from various designs:

   • Green Version: The classic WhatsApp green button.

   • White Version: A more subtle, minimalist design.

   • Rounded Version: A modern, rounded button design.

Select the template that best fits your website's design and aesthetic.

Adding Your WhatsApp Button

Once you have selected your template, follow these steps to add the WhatsApp button to your website:

1. Add the Button: Click the chosen WhatsApp button template and it will automatically appear.

2. Edit the Button: Click on the WhatsApp button and select “Edit” to enter the editing mode.

   

   

3. Input Your Phone Number: In the URL section of the button settings, replace the placeholder with your phone number or business number.

4. Pre-fill a Starting Message: Add a pre-filled message such as "Hello, I would like to order something" to make it easier for customers to start the conversation.

   

   

   
   

Customizing the Button Design

Make your WhatsApp button stand out by customizing its design:

1. Adjust Padding and Styles: Modify the padding and styles to fit your website’s layout.

2. Change Button Colors: Customize the button’s colour to match your website’s colour scheme.

Previewing and Testing

Before publishing, it's crucial to preview and test the WhatsApp button to ensure it functions correctly:

1. Preview Your Website: Use Pineapple Builder's preview feature to see how the WhatsApp button looks and behaves on your website.

2. Test on Different Devices: Check the functionality of the WhatsApp button on various devices (desktop, tablet, mobile) to ensure compatibility.

3. Verify the Link: Click on the button to make sure it correctly opens WhatsApp with the pre-filled number and message. Ensure the phone number format is correct to avoid any issues.

Publishing Your Updated Website

Once you've confirmed that the WhatsApp button works as intended, you can proceed to publish your website:

1. Save Changes: Ensure all your changes are saved within Pineapple Builder.

2. Publish Your Website: Click on the publish button to make your updated website live.

3. Check the Live Site: Visit your live website to double-check that the WhatsApp button is functioning and visually appealing.

Common Issues and How to Fix Them

Here are some common issues you might encounter and how to resolve them:

1. Incorrect Phone Number Format:

   • Issue: The WhatsApp button doesn't open the chat correctly.

   • Solution: Ensure the phone number is in the correct international format (e.g., +1234567890).

2. Button Not Displaying Correctly:

   • Issue: The button appears distorted or out of place.

   • Solution: Adjust the button's padding and styles within Pineapple Builder to fit it correctly on your page. If this doesn't fix the issue, remove the button and add it again.