# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.chatalog.ai/settings/web-chat/add-whatsapp-button-to-your-website-that-links-to-your-whatsapp-business-account.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.