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

新增 WhatsApp 按钮的 html 代码

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="https://api.whatsapp.com/send?phone=&text=" class="float" target="_blank">
<i class="fa fa-whatsapp my-float"></i>
</a>

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

新增 WhatsApp 按钮的 css 代码

然后，在你的 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;
}