網頁彈出在線交流聊天窗口的功能如何實現

摘要：

網頁在線聊天功能是在企業網站中用戶跟客服人員在線咨詢溝通交流的常見功能，可以通過在網頁中添加在線客服js代碼調用客服聊天窗口的方式快速實現。本文將詳細介紹網頁彈出在線交流對話框的方法。

網頁在線聊天

網頁在線聊天是什么

網頁在線聊天是網站常見的即時通訊功能，用戶進入網站進行瀏覽時頁面會自動彈出請求聊天的窗口，點擊接受就可以進入對話框跟網站客服人員進行在線聊天溝通，該功能在企業網站中非常常見，是企業提供客戶服務交流必備的功能。

網頁在線聊天功能如何實現

網頁在線聊天功能的實現原理是讓頁面加載聊天窗口的js功能腳本來實現的，通過在網站頁面html源碼中添加一串能夠調用客服系統功能的js代碼，當用戶訪問網站停留一段時間后就會自動觸發彈窗事件，具體執行步驟如下：

1、借助聊天軟件生成js代碼

快商通是一款免費的在線客服系統，能夠生成為網頁實現自動彈出在線聊天窗口功能的js代碼。搜索快商通到達官網下載客服系統軟件并完成注冊，登錄后找到“設置中心”-“代碼生成”打開進入代碼生成頁面，可以直接拿到我們需要的js代碼（如果是移動網站，記得先點擊頁面上的移動設備圖標選項）。

客服軟件后臺

生成在線聊天窗口js代碼

2、將js代碼添加到網頁html源碼中

拿到代碼就已經成功一半了，緊接著打開網站后臺，找到名為“footer”的模板文件，打開文件把上一步獲取到的代碼添加到第一行或最后一行，再點擊保存就可以了。當再訪問網頁時，就會發現頁面出現了迷你對話窗口，接下來我們要讓他能夠根據要求自動彈出。

3、設置自動彈出在線聊天窗口的觸發條件

在左側找到“圖標設置”功能欄，點擊進入設置頁面。打開“迷你對話框”的功能按鈕，并直接點擊“迷你對話框”文字進入設置界面。

設置在線聊天窗口

可以根據頁面提示設置在線聊天對話框的展開時機，如“訪客打開網頁5秒后自動展開對話框”，設置完以后點擊保存即可生效。

修改窗口自動彈出條件

實現效果預覽

在設置過程中，可以實時在右側察看網頁對話框的樣式、彈出位置和展示內容是否滿意，系統支持自定義css樣式，如果系統預設樣式中沒有滿意的款式，可以自己寫代碼或在網上找滿意的樣式進行寫入，非常靈活。

pc在線聊天窗口效果預覽

移動端網站也可以從“手機網站”-“浮動圖標”處點擊進入，實時預覽手機網站的對話窗口樣式，滿意后點擊保存即可生效。

移動端效果預覽

總結：

網頁彈出在線交流聊天窗口的功能可以通過借助快商通客服軟件依照上述介紹的方法來快速實現。在后臺還可以詳細設置聊天窗口彈出的時機以及樣式，是目前企業網站比較主流的客服功能實現方法。