> For the complete documentation index, see [llms.txt](https://docs.chatalog.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chatalog.ai/settings/web-chat/add-whatsapp-button-to-your-website-that-links-to-your-whatsapp-business-account.md).

# Add WhatsApp button to your website that links to your WhatsApp Business account

## 1. Add html for the WhatsApp button

First, you need to insert the following html code into Header or Footer (or any module that is displayed across all your webpages):

<pre><code>&#x3C;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
&#x3C;a href="https://api.whatsapp.com/send?phone=<a data-footnote-ref href="#user-content-fn-1">85298765432</a>&#x26;text=<a data-footnote-ref href="#user-content-fn-2">Inquire</a>" class="float" target="_blank">
&#x3C;i class="fa fa-whatsapp my-float">&#x3C;/i>
&#x3C;/a>
</code></pre>

&#x20;

If you use WordPress to develop your website, you need to go to your Page Builder and look for a html block to insert your html code. Here is an example for Elementor:

![](/files/Q7nSq0YRHgAG7sGvZFOY)

## 2. Add css for the WhatsApp button

Then, you can add the following css code to your css file to adjust the position and style of your WhatsApp button.

```
.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
	margin-top:16px;
}
```

[^1]: Replace this with your WhatsApp Business number including country code

[^2]: This is the prefilled text message for customer. You may edit it as your preference.