Customize where the WhatsApp icon appears on our website using the “Position to Place” feature. This setting allows us to place the button at any desired position on both desktop and mobile devices using simple controls.
Navigate to Click to Chat → General → Widget Style & Position, then select the Desktop or Mobile position.
Default Behavior
By default, the same position settings apply to both Desktop and Mobile devices. we can choose the location by setting values for:
- Top / Bottom
- Left / Right
We can enter values using:
- Pixels (e.g.,
10px)
- Percentages (e.g.,
50%)
- Other CSS units (e.g.,
2rem,5vh, etc.)
By default, mobile and desktop use the same settings because the Mobile and Desktop same settings switch is enabled.
Different positions for Mobile, Desktop devices
If we want to display the WhatsApp icon in different positions on Desktop and Mobile devices:
- Turn off the Mobile and Desktop same settings switch
- Set the positions separately for each device type.
Position to Place for Desktop:
Desktop: Bottom-Left corner
WhatsApp Widget appears at the bottom-left of the web page.
Position to Place for Mobile:
Mobile: Top-Right corner
WhatsApp Widget appears at the top-right of the web page.
Center the WhatsApp Icon (Example)
To place the icon at the horizontal center of the screen:
- Set Bottom:
10px
- Set Right:
50%
Fixed and Absolute Positioning
Fixed Position (Default)
- The icon stays in the same spot on the screen even when scrolling.
- Best for consistent visibility.
Absolute Position (PRO only)
- The icon is placed relative to the page content (
<body>tag).
- It scrolls along with the content.
Fixed Vs Absolute Position Types
This flexible positioning system helps us perfectly align the WhatsApp chat button with our website’s layout and user experience.