# WH Sticky WhatsApp Button - Tutorial

## Introduction

WH Sticky WhatsApp Button is a WordPress plugin that adds a customizable WhatsApp button to your website. The button stays visible as users scroll, making it easy for visitors to contact you directly through WhatsApp.

This tutorial will guide you through the installation, configuration, and customization of the WH Sticky WhatsApp Button plugin.

## Installation

1. Upload the `whello-sticky-chat-button` folder to the `/wp-content/plugins/` directory
2. Activate the plugin through the 'Plugins' menu in WordPress
3. Go to 'WA Button' in your admin menu to configure the settings

## Configuration

After activating the plugin, you'll find a new menu item called 'WA Button' in your WordPress admin menu. Click on it to access the plugin settings page.

### General Settings

The General Settings tab allows you to configure the basic functionality of the WhatsApp button:

1. **Phone Number**: Enter your WhatsApp phone number with the country code but without any symbols or spaces (e.g., 6281234567890).
2. **Default Message**: Set a pre-filled message that will appear in the WhatsApp chat when a visitor clicks the button.
3. **Link Type**:
   - **Default**: Uses the standard WhatsApp API link.
   - **Custom**: Allows you to enter a custom link (useful if you're using a third-party service like Whello WA Rotator).

### Display Settings

The Display Settings tab allows you to customize the appearance and visibility of the WhatsApp button:

#### Button Position

Choose where the button appears on your website:
- **Right**: Places the button in the bottom-right corner of the screen.
- **Left**: Places the button in the bottom-left corner of the screen.

#### Button Style

Customize the look and feel of your WhatsApp button:

1. **Button Type**:
   - **Icon Only**: Shows only the WhatsApp icon.
   - **Icon & Text**: Shows the WhatsApp icon along with custom text.
2. **Button Text**: If you selected "Icon & Text," enter the text you want to display on the button.
3. **Colors**:
   - **Button Color**: The background color of the button.
   - **Text Color**: The color of the text on the button.
   - **Icon Color**: The color of the WhatsApp icon.
4. **Advanced Styling**:
   - **Border Radius**: Adjust the roundness of the button corners.
   - **Border Color**: Set a custom border color.
   - **Border Width**: Adjust the border thickness.
   - **Box Shadow**: Enable or disable the shadow effect.
   - **Button Padding**: Adjust the spacing inside the button.
   - **Font Size**: Change the size of the button text.
   - **Icon Size**: Adjust the size of the WhatsApp icon.

#### Device Visibility

Control which devices the button appears on:
- **Show on Desktop**: Enable or disable the button on desktop devices.
- **Show on Mobile**: Enable or disable the button on mobile devices.

#### Page Visibility

Determine which pages the button appears on:
- **All Pages**: Show the button on every page of your website.
- **Exclude Pages**: Show the button on all pages except the ones you select.

## Live Preview

The settings page includes a live preview of your WhatsApp button. This preview updates in real-time as you make changes to the settings, allowing you to see how your button will look before saving the changes.

## Use Cases

Here are some common use cases for the WH Sticky WhatsApp Button:

1. **E-commerce Customer Support**: Provide instant support to customers browsing your online store.
2. **Service Business Inquiries**: Allow potential clients to quickly reach out about your services.
3. **Lead Generation**: Make it easy for prospects to contact you directly.
4. **Restaurant Orders**: Enable customers to place orders or make reservations via WhatsApp.
5. **Real Estate Inquiries**: Let property seekers ask questions about listings immediately.

## Best Practices

1. **Keep Your Message Clear**: Use a concise, friendly default message that encourages engagement.
2. **Choose Contrasting Colors**: Make sure your button stands out but doesn't clash with your website design.
3. **Consider Mobile Users**: Test how the button appears on mobile devices, as many users will access WhatsApp from their phones.
4. **Respect User Experience**: Position the button where it's visible but doesn't obstruct important content.
5. **Monitor Engagement**: Pay attention to how visitors interact with the button and adjust settings if needed.

## Troubleshooting

### The button is not appearing on my website

1. Check if the plugin is activated.
2. Verify that you've entered a valid phone number.
3. Make sure the device and page visibility settings are configured correctly.
4. Check if there are any JavaScript errors on your website that might be preventing the button from loading.

### The WhatsApp link isn't working

1. Ensure your phone number is in the correct format with the country code (e.g., 6281234567890).
2. If using a custom link, verify that the URL is valid and properly formatted.

### The button style doesn't match my settings

1. Clear your browser cache.
2. Check if your theme has CSS that might be overriding the button styles.
3. Try adjusting the advanced styling options for better compatibility with your theme.

## Conclusion

The WH Sticky WhatsApp Button plugin provides a simple yet powerful way to add a WhatsApp contact button to your WordPress website. By following this tutorial, you should now be able to install, configure, and customize the plugin to meet your specific needs.

For additional support or questions, please contact the plugin developer at [Whello.id](https://whello.id).