Hend Instagram Procreate
首頁
/
/
如何在網站置入聊天按鈕？GetButton 教學
getbutton

如何在網站置入聊天按鈕？GetButton 教學

Elementor WordPress 網頁設計

* GetButton 目前已不支援免費使用，之前如果網站有套用 GetButton ，一律都會移除 GetButton 的 logo，如果你正在尋找免費的聊天按鈕，可以試試看 Chaty：

Floating Chat Widget: Contact Chat Icons, Telegram Chat, Line Messenger, WeChat, Email, SMS, Call Button – Chaty

GetButton 提供各種通訊平台的串接，透過設定可以快速地在網站上加入聊天按鈕，增加與網站使用者的互動，在免費版即有完整的功能。

getbutton 02 1
GetButton 網站連結：https://getbutton.io/

加入 Facebook Messenger

  1. 點擊「Get my Facebook page ID」。
  2. 將 Facebook 粉絲專頁的網址複製進去，即可取得 Facebook Page ID。
getbutton 03

加入 LINE QR code 連結

  1. 點擊「LINE」的圖示。
  2. 填入 QR code 連結，格式為 https://line.me/ti/p/你的帳號名稱
getbutton 04

設定按鈕位置與預設文字

  1. 後面有括弧 Pro Feature 表示為付費版才有提供的功能。
  2. Position 為 GetButton 顯示的位置，預設為右下角，可以依照自己的喜好更換成出現在左下角。
  3. Call to action 為預設顯示的文字，預設為英文，可以更改為中文，如：歡迎與我聯絡！
getbutton 05
  1. 在下一個區塊中的「Custom Color」可以更換 GetButton 的顏色，顏色可以依照網站的配色去調整。

關於網頁色彩規劃，可以閱讀：網站色彩計畫 (2022 最新) 🙂

在網站加入程式碼

  1. 輸入 E-mail 後，即可取得一段程式碼，GetButton 同時也會寄送程式碼到你的信箱。
  2. 將程式碼複製貼到網站的 <body> 標籤裡面。
  3. 於 WordPress 後台 / 外掛，安裝 Insert Headers And Footers，將程式碼複製到「Scripts in Body」即完成設定。
Insert Headers And Footers
  1. 若網站是使用 Elementor 編輯，則可以使用 Custom Code 加入，不需要另外安裝外掛。
  2. 位置選擇 <body> – Start，完成設定後，點擊右上角按鈕儲存即完成設定。
getbutton 07
  1. 完成設定後就可以在網站前台看到 GetButton 顯示在網頁的角落囉！
廣告
延伸閱讀
相關標籤：
Elementor WordPress 網頁設計
SHARE
WRITTEN BY
Picture of Hend Chen
Hend Chen
嗨，我是 Hend！專長於網頁設計 、UI 設計、品牌設計，熱愛參與社群活動、分享設計新知。我的英文名字取自中文名字發音，發音和手的英文 “hand“ 沒有差異，如果您正面臨網站設計的困擾，我很樂意成為協助您的那雙手！

目錄

Subscribe
Subscription
想了解更多嗎？歡迎與我聯繫。
Let's Connect
Go
網頁設計
© 2021-2025 禾的設計工作室 All Rights Reserved. Designed by Hend Design Co.
隱私權政策  | 統一編號：95012060
Hend Instagram Procreate