1. All Collections >
  2. 頻道 >
  3. 網站聊天小工具 >
  4. 在 WordPress 上安裝網站聊天小工具

在 WordPress 上安裝網站聊天小工具

Avatar
JQ Lee
4 分鐘

在您的 WordPress 網站上新增網路聊天小工具是一個快速且簡單的過程。 它不需要任何編碼技能或技術知識。

安裝設定

為了在 WordPress 上安裝網路聊天小工具,您需要以下內容:

  • 造訪您的網站的 WordPress 儀表板。

  • 您的網路聊天小工具的程式碼片段。

如果您還沒有代碼片段,您將在創建 Respond.io 網站聊天小工具 或使用 Facebook 聊天插件Facebook Messenger 時生成一個。

如果您已在 respond.io 平台上連接頻道,並且需要檢索生成的程式碼片段,請按照此處 的說明進行操作

為了成功安裝,請確保填寫了您的網站網域。 有兩種方法可以解決這個問題。

轉到 respond.io 設定 > 選擇 頻道 > 選擇你的網站聊天頻道 > 點擊配置 > 添加網站域名。 

轉到 respond.io 設定 > 選擇 增長小部件 > 點擊要添加到網站的小部件 > 在 常規 開關中,將你的網站域名添加到 網站域名 欄位。

在 WordPress 上安裝

步驟 1:登入 WordPress

導航至您網站的 WordPress 管理儀表板並登入。

第 2 步:導覽至插件頁面

在左側導覽面板中,點選 外掛程式。 在外掛頁面上,按下頁面頂部的藍色 新增 按鈕。

步驟 3:新增插件

使用搜尋欄,搜尋 WPCode 外掛程式。 您將在搜尋結果頁面上看到許多可用的選項,但在本教學中,我們將使用 WPCode 的 "插入頁首和頁尾" 外掛程式。 按下 立即安裝 按鈕並確保啟動插件以使用它。

步驟 4:開啟頁首和頁尾控制台

從左側導覽選單中,按一下程式碼片段,然後從子選單中選擇 頁眉 & 頁腳

步驟 5:新增即時聊天腳本

從 respond.io 複製您的外掛程式腳本並將其貼到頁首和頁腳控制台頁面的 頁腳腳本 區域中。

貼上腳本後,點擊頁面底部的藍色 "儲存" 按鈕。

完畢!

打開網站並查看聊天插件。 您會在右下角找到它。 現在您的網站訪客可以輕鬆地與您聊天。 如果您使用了從 respond.io 平台產生的程式碼片段,您將能夠從平台管理對話並更新小工具的外觀。

聊天小工具現在在您的網站上處於活動狀態!

識別登入用戶

本節僅適用於您的網站具有使用者登入功能的情況。

步驟 1:登入 WordPress 帳戶

導航至您網站的 WordPress 管理介面並登入。

第 2 步:開啟主題頭文件

從左側導覽功能表中,點選 外觀 並選擇 主題檔案編輯器。 繼續選擇 主題標題 檔案。

步驟 3:新增檢索到的使用者 ID 和姓名代碼

複製下面的範例程式碼並將其貼上到主題頭檔中。 貼上程式碼後,點擊頁面底部的 更新檔案 按鈕。

下面的範例程式碼是從 WordPress 取得使用者 ID、名字和姓氏。 如果您想獲得其他聯繫字段,請隨意修改。

<?php 
	$user_info = get_userdata(get_current_user_id());
?>

<script type="text/javascript">
	窗口。$wp_ID = "<?php echo $user_info->ID; ?>";
	視窗。$wp_firstname = "<?php echo $user_info->first_name; ?>";
	視窗。$wp_lastname = "<?php echo $user_info->last_name; ?>";
</script>

`

步驟 4:開啟頁首和頁尾控制台

從左側導航選單中,點選 設定 並從設定的子選單中選擇 頁眉 & 頁腳 外掛。

步驟 5:新增識別登入使用者腳本

複製下面的範例程式碼並將其貼上到頁首和頁腳控制台頁面的 頁腳腳本 區域中。 請注意, 辨識登入使用者腳本 必須放在 即時聊天腳本上方。

下面的範例程式碼使用使用者 ID 作為標識符,並傳遞名字和姓氏。 如果您想獲取其他聯絡字段,請隨意修改。

<script>  
      window.\_\_respond\_settings = {  
    	identifier: $wp\_ID,  
        firstName: $wp\_firstname,  
        lastName: $wp\_lastname,    
      };  
</script>

貼上腳本後,點擊頁面底部的藍色 "儲存" 按鈕。

完畢!

打開網站並查看聊天插件。 可以識別您 WordPress 的登入使用者。 一旦傳遞的標識符與現有聯絡人匹配,當前對話就會恢復。

常見問題和疑難排解

WPCode

如果您正在使用 WordPress 快取外掛(例如 WPCode),請按照以下步驟操作,以便小工具正確顯示。

禁用 JavaScript 的資料最小化功能

轉到 WordPress 設定 > 選擇 WPCode > 在 WPCode 頁面上,選擇 檔案優化 標籤 > 取消勾選 最小化 JavaScript 檔案

將我們的小部件域加入到 Javascript 排除檔中

https://cdn.respond.io/webchat/widget/(.*).js

儲存後,建議清除 WordPress 中的快取。

分享這篇文章
Telegram
Facebook
Linkedin
Twitter

找不到您想要的東西? 🔎