此用例通过简单的开始/停止按钮描述了LiveView /共同浏览代码的示例实现。

1. 配置

在后端的插件配置中,激活LiveView插件。 在示例中,我们使用了以下配置。

Config Value Description

Privacy

Mask user input

We want to mask all user inputs which happen on our page.

Optin

Visitor

We want the user to click on the button that starts the CoBrowsing. 

2. 脚本应用

必须将JavaScript集成到我们要浏览的每个网页中。

了解如何在页面上实施实时视图。

3. 示例代码-LiveView / CoBrowsing会话的“开始/停止”按钮

以下代码启动LiveView会话。 我们将使用以下函数CV.cobrowse.start()和CV.cobrowse.stop()启动或停止LiveView会话。 我们添加了addSessionStartedListener来检查何时启动LiveView会话,以及添加addSessionStoppedListener来检查会话何时停止。

如果使用了会话记录(每个Cookie optin都已激活),则最好使用下面的CoBrowsing功能。

共同浏览

以下代码启动一个CoBrowsing会话。 我们将使用以下函数CV.cobrowse.start()和CV.cobrowse.stop()启动或停止CoBrowsing会话。 我们添加了addCobrowsingStartedListener来检查何时启动CoBrowsing会话,以及添加addCobrowsingStoppedListener来检查会话何时停止。

<script src="https://cdn.chatvisor.com/cdn/js/XXXXXX.js" type="text/javascript" async></script>
<button type="button" id="CV_START" onclick="CV.cobrowse.start()" style="display:block;" >Start Co-Browsing</button>
<button type="button" id="CV_STOP" onclick="CV.cobrowse.stop()" style="display:none;" >Stop Co-Browsing</button>
<script>

function initFunction(){
    var btnStop = document.getElementById("CV_STOP");
    var btnStart = document.getElementById("CV_START");
    CV.cobrowse.addCobrowsingStartedListener(function() {
        btnStop.style.display = "block";
        btnStart.style.display = "none";
    });
    CV.cobrowse.addCobrowsingStoppedListener(function() {
      btnStop.style.display = "none";
      btnStart.style.display = "block";
    });
}

if (!window.CVLoaded) {
    window.CVLoaded = initFunction;
} else {
    initFunction();
}
</script>

实时视图

<script src="https://cdn.chatvisor.com/cdn/js/XXXXXX.js" type="text/javascript" async></script>
<button type="button" id="CV_START" onclick="CV.liveview.startSharing()" style="display:block;" >Start LiveView</button>
<button type="button" id="CV_STOP" onclick="CV.liveview.stopSharing()" style="display:none;" >Stop LiveView</button>
<script>

function initFunction(){
    var btnStop = document.getElementById("CV_STOP");
    var btnStart = document.getElementById("CV_START");
    CV.liveview.addSessionStartedListener(function() {
        btnStop.style.display = "block";
        btnStart.style.display = "none";
    });
    CV.liveview.addSessionStoppedListener(function() {
      btnStop.style.display = "none";
      btnStart.style.display = "block";
    });
}

if (!window.CVLoaded) {
    window.CVLoaded = initFunction;
} else {
    initFunction();
}
</script>