> 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/zh-cn/settings/chat-widget/add-whatsapp-button-to-your-website-that-links-to-your-whatsapp-business-account.md).

# 在网页上新增 WhatsApp 按钮链接到你的 WhatsApp Business 帐号

### 1.新增 WhatsApp 按钮的 html 代码 

首先，你需要在 Header 或 Footer （或任何会在网站每一个页面都会展示的模组）的 html 加插以下代码：

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

如果你使用 WordPress 来建立网站，你可以在你所安装的页面建立(Page Builder)插件里找到加入 html 的模块才能直接加入 html 代码。以下为 Elementor 的例子：

<img src="https://2243179689-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fr4OuXl9yrBx2vSJPqtIn%2Fuploads%2F75Nh6CL22Vm7LeYuXOKh%2F%E8%9E%A2%E5%B9%95%E6%88%AA%E5%9C%96%202023-01-11%20%E4%B8%8A%E5%8D%889.47.19.png?alt=media&amp;token=2e33ff28-0c70-4aa5-8340-5e4a64be0b00" alt="" data-size="original">

### 2.新增 WhatsApp 按钮的 css 代码&#x20;

然后，在你的 CSS 文件中加插以下代码以调整 WhatsApp 按钮的位置和样式。

```
.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]: 取代此號碼為你的 WhatsApp Business 號碼 (包括區號)

[^2]: 這裡是客戶打開連結時可直接向你發送的預設訊息。你可以按需要隨意修改。