# WhatsApp Button Integration Guide
This guide will help you add a WhatsApp chat button to your website. The integration process is very simple - just copy and paste a few lines of code.
## Integration Guide Video
Watch this video guide to learn how to integrate and use the WhatsApp button:
## Step 1: Add Code to Your Website
Copy the following code into your website's `` tag:
```html
```
After adding these scripts, the WhatsApp button will automatically appear in the bottom right corner of your website!
## Customize Button Style
There are two ways to customize the button's appearance:
### Method 1: Initial Configuration
Set the initial configuration by adding this code to your webpage:
```javascript
window.watiWhatsAppButtonConfig = {
// These are the default values, you only need to specify the ones you want to change
position: 'bottom-right',
offsetX: 30,
offsetY: 30,
backgroundColor: '#00E785',
textColor: '#FFFFFF',
borderRadius: 100,
padding: '',
boxShadow: '4px 5px 10px rgba(0, 0, 0, 0.4)',
width: '60px',
height: '60px',
text: '', // Empty for icon-only button
border: '1px solid #363636',
zIndex: 999999,
};
```
### Method 2: Dynamic Updates
You can dynamically update the button's properties at any time using the `updateWatiConfig` function:
```javascript
// Example: Change button position and color
window.updateWatiConfig({
position: 'top-right',
backgroundColor: '#25D366',
});
// Example: Update multiple properties
window.updateWatiConfig({
text: 'Chat with us!',
width: '150px',
height: '50px',
});
```
The `updateWatiConfig` function accepts the same parameters as the initial configuration. You can update any number of properties at once, and only the specified properties will be changed while others remain unchanged.
## Button Style Parameters
You can customize the following parameters using either method:
| Parameter | Description | Default | Available Values |
| --------------- | ----------------------- | --------------------------------- | ---------------------------------------------------------------- |
| position | Button position | `bottom-right` | `bottom-right`, `bottom-left`, `top-right`, `top-left`, `center` |
| offsetX | Horizontal offset | `30` | Any number (in pixels) |
| offsetY | Vertical offset | `30` | Any number (in pixels) |
| backgroundColor | Background color | `#00E785` | Any color code |
| textColor | Text color | `#FFFFFF` | Any color code |
| borderRadius | Button corner roundness | `100` | Any number (in pixels) |
| padding | Button padding | `''` | Any valid CSS padding value |
| boxShadow | Button shadow | `4px 5px 10px rgba(0, 0, 0, 0.4)` | Any valid CSS box-shadow value |
| text | Button text | `''` | Any text |
| width | Button width | `60px` | Any valid CSS width value |
| height | Button height | `60px` | Any valid CSS height value |
| icon | Custom button icon | WhatsApp icon | Any valid React node |
| border | Button border | `1px solid #363636` | Any valid CSS border value |
| zIndex | Button stack order | `999999` | Any valid CSS z-index value |
## How It Works
1. When a visitor opens your website, the WhatsApp button automatically appears in the specified position
2. When clicked, a popup opens
3. The visitor enters their WhatsApp number and optional message
4. After clicking confirm, WhatsApp opens automatically to start the conversation
This approach allows visitors to contact you directly through WhatsApp without needing to save your phone number first.