/

/

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

2022-01-22
Hend Chen
WordPress

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

Elementor WordPress 網頁設計

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

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

加入 Facebook Messenger

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

getbutton 03

加入 LINE QR code 連結

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

getbutton 04

設定按鈕位置與預設文字

後面有括弧 Pro Feature 表示為付費版才有提供的功能。
Position 為 GetButton 顯示的位置，預設為右下角，可以依照自己的喜好更換成出現在左下角。
Call to action 為預設顯示的文字，預設為英文，可以更改為中文，如：歡迎與我聯絡！

getbutton 05

在下一個區塊中的「Custom Color」可以更換 GetButton 的顏色，顏色可以依照網站的配色去調整。

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

在網站加入程式碼

輸入 E-mail 後，即可取得一段程式碼，GetButton 同時也會寄送程式碼到你的信箱。
將程式碼複製貼到網站的 <body> 標籤裡面。
於 WordPress 後台 / 外掛，安裝 Insert Headers And Footers，將程式碼複製到「Scripts in Body」即完成設定。

Insert Headers And Footers

若網站是使用 Elementor 編輯，則可以使用 Custom Code 加入，不需要另外安裝外掛。
位置選擇 <body> – Start，完成設定後，點擊右上角按鈕儲存即完成設定。

getbutton 07

完成設定後就可以在網站前台看到 GetButton 顯示在網頁的角落囉！

廣告

延伸閱讀

WordPress 網頁設計佈景主題、外掛推薦清單 (2023 最新)

網頁設計教學彙整 (2023 最新)

Elementor 教學 – 如何使用 JetEngine 客製網站

相關標籤：

Elementor WordPress 網頁設計

SHARE

WRITTEN BY

Hend Chen

嗨，我是 Hend！專長於網頁設計、UI 設計、品牌設計，熱愛參與社群活動、分享設計新知。我的英文名字取自中文名字發音，發音和手的英文 “hand“ 沒有差異，如果您正面臨網站設計的困擾，我很樂意成為協助您的那雙手！

Subscribe