此用例通过简单的开始/停止按钮描述了LiveView /共同浏览代码的示例实现。
1. 配置
在后端的插件配置中,激活LiveView插件。 在示例中,我们使用了以下配置。
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>