The WhatsApp Widget allows you to add a branded WhatsApp chat button directly to your website, making it easy for guests to contact your property through WhatsApp.
The widget appears as a floating button on your website. When a guest clicks it, they are directed to your property’s WhatsApp number and can start a conversation right away.
The widget is powered by Duve and connects to WhatsApp, which is owned by Meta. A valid WhatsApp Business account and phone number are required before setting up the widget.
|
Applies to: Accounts enabled with the "Inbound Chats from Anonymous Guests" feature. |
How to Set Up the WhatsApp Widget
Follow the steps below to create and embed your WhatsApp widget:
- In your Duve dashboard, go to Settings → Communication → Chat Widgets.
- Click Add Widget.
- Select WhatsApp as the provider type.
- Enter a name for the widget.
- Select the relevant Phone Source.
- Customize the widget’s appearance, including color, icon, button style, and position.
- Click Save.
- Copy the generated embed snippet.
- Paste the embed snippet into your website’s HTML, just before the closing
</body>tag.
Phone Source
The Phone Source setting determines which WhatsApp number guests will be connected to when they click the widget.
Company Main
Uses the primary phone number configured for your account.
This is the default option and is recommended for single-property or single-brand operations.
Brand Override
Uses a phone number connected to a specific brand in your account.
This option is recommended for multi-brand or multi-property operations where each brand needs its own dedicated WhatsApp number.
Appearance Settings
You can customize the widget so it matches your website and brand identity.
Color
The default widget color is WhatsApp green: #25D366.
You can update the color using any valid hex color code.
Icon
The default icon is the WhatsApp icon.
Additional available icon options include:
- Question mark
- Chat bubble
- Paper plane
Button Style
You can choose between two button styles:
- Round
- Square
Position
You can place the widget in one of the following corners of the page:
- Top Left
- Top Right
- Bottom Left
- Bottom Right
Embedding the Widget on Your Website
After the widget is saved, Duve generates a unique embed snippet.
This snippet should be added to your website’s HTML. Paste the snippet just before the closing </body> tag.
Once the snippet has been added, no additional configuration is required. The widget will appear automatically on your website based on the settings selected in Duve.
Best Practices
To get the best results from the WhatsApp Widget:
- Use a widget color that stands out on your website while still matching your brand.
- For multi-property or multi-brand operations, create a separate widget per brand using the Brand Override phone source.
- Test the widget on both desktop and mobile after embedding it.
- Make sure the widget does not overlap important website elements, such as booking buttons, accessibility tools, or pop-ups.
- Confirm that the WhatsApp number opens correctly before publishing the widget on your live website.
Comments
0 comments
Article is closed for comments.