This web component displays a floating WhatsApp icon in the corner of the page. You can set the position, phone number, and a tooltip message that is displayed when you hover over the icon.
- Copy the component code into a JavaScript file in your project (for example,
WhatsAppIcon.js). - Include the JavaScript file in your HTML using the
<script>tag:
<script src="path/to/WhatsAppIcon.js" type="module"></script>You can add the component to your HTML using the tag. Here's an example:
<whatsapp-icon position="bottom-right" phone="1234567890" title="Chat with us on WhatsApp!"></whatsapp-icon>position: The position of the icon on the page. It can be "bottom-right", "bottom-left", "top-right", or "top-left". Default is "bottom-right".
phone: The phone number for the WhatsApp link. Be sure to include the country code.
title: An optional message that is displayed as a tooltip when hovering over the icon.
You can customize the style and content of the component by editing the JavaScript file. For example, you can change the size of the icon or use a different SVG.
This component is open source and can be used and modified according to your needs.