You are currently viewing WordPress教學 外掛推薦GetButton | 如何在網站加入”FB對話框”與”一鍵加入LINE”增加互動

WordPress教學 外掛推薦GetButton | 如何在網站加入”FB對話框”與”一鍵加入LINE”增加互動

利用WordPress架站最棒的就是,不用學習複雜的程式語言,就能讓我的網站加入各種功能,只需要照著步驟安裝與設定即可完成

當使用者瀏覽到我們的網站,如果能夠馬上留言或是聯絡我們,那就能讓使用者接續下一步,甚至延伸更多交流的機會轉化成訂單。

今天我就是要推薦能夠在螢幕角落加上一個小對話窗的方法~

我也有測試幾個類似外掛,但GetButton最即時,馬上可以傳訊息,而且安裝方法也不困難,所以我最推薦這個外掛。

首先下載外掛

到外掛選項裡面點選最上方的安裝外掛,然後搜尋 GetButton,就可以看到這個外掛,點選安裝,然後啟用。或是點選下方按鈕就可以看到外掛頁面。

設定外掛

安裝完成之後會在功能列找到GetButton的選項

Step1前往GetButton官網

跟著外掛的設定步驟,到點擊連結官網取得對話框的原始碼。

到官網之後會看到滿滿的英文~莫寂莫荒莫害怕,跟著以下步驟,點選”Get Your Button”即可。

Step2選取你需要的平台

滑鼠移動到LOGO icon在右上角就會出現”+-”號讓你新增或減少你要的功能。

Step3 FB臉書對話框設定方法,找到你的粉專編號

Line@的部份只要直接貼入你的連結就可以了,但FB臉書對話框的設定稍微複雜,需要找到你的粉專編號。

粉專編號從哪找呢?從下圖來看,粉專編號藏在左欄功能鍵”關於”的地方,一直往下拉就會看到粉絲專頁編號,把他複製起來。

將粉專編號填入框框裡面就完成拉~

Step4 修改提示問候語

在這邊可以將英文改成中文問候語,頁面的右下角就能看到我們的對話框預覽了~

Step5 取得程式碼

最後一個步驟他會要你填入你的Email,因為除了在這個頁面顯示程式碼以外,他會寄備份到你的信箱,這樣出問題還是可以回到信箱去找答案。

填完Email點選 Get Button Code就能看到我們剛剛填的資料產出一串原始碼囉~把他複製起來吧!

貼上程式碼,設定完成

接下來把我們剛剛複製的程式碼貼回到WordPress的後台區塊內,按下儲存設定就完成拉~

把聊天按鈕向上移一點~CSS編輯小技巧

將下列這段CSS加到自訂>CSS裡面,就能設定往上移動一點,才不會遮到TOP的按鈕囉~

/*GetButton*/
wh-widget-send-button.wh-widget-right {
bottom: 8% !important;}
@media only screen and (max-width: 414px), only screen and (max-device-width: 414px){
#wh-widget-send-button.wh-widget-right {
bottom: 5% !important;}
}

上面8%跟5%的地方就是高度,也能改成px值。

發現官方把HTML碼改掉了~
所以更新用下方新改的CSS變更位置囉~

/*GetButton*/
.sc-7dvmpp-1,.q8c6tt-2{
margin-bottom:60px;
}
.sc-1s18q3d-0 .q8c6tt-2{
margin-bottom:0px;
}
@media only screen and (max-width: 414px), only screen and (max-device-width: 414px){
.sc-7dvmpp-1,.q8c6tt-2{
margin-bottom:40px;
}
}

以上教學就到這邊~若有遇到其他問題歡迎留言與我討論~


此文章非贊助,純粹是出於愛用而撰寫之文章,若有其他的問題歡迎留言詢問,也希望您不吝嗇您的掌聲幫我點likecoin,贊助我寫教學文章囉~

Loading

This Post Has 2 Comments

  1. Johnny

    請問我貼上文章最後的CSS程式碼,但按鈕沒有往上跑,還是會遮到TOP鍵,請問有哪裡需要修正嗎?感激不盡?

    1. lesilydesigner

      嗨嗨~我現在看你的頁面沒看到你的對話框,你方便傳私訊給我嗎?

發佈留言