Chatalog Help Centre
Chatalog 幫助中心
Search
⌃K
Links

在網頁上新增 WhatsApp 按鈕連結到你的 WhatsApp Business 帳號

1. 新增 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=85298765432&text=Inquire" class="float" target="_blank">
<i class="fa fa-whatsapp my-float"></i>
</a>
如果你使用 WordPress 來建立網站,你可以在你所安裝的頁面建立(Page Builder)插件裡找到加入 html 的模塊才能直接加入 html 代碼。以下為 Elementor 的例子:

2. 新增 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;
}