ナレッジベース

Back to support overview

このユースケースでは、単純な開始/停止ボタンを使用したLiveView /共同閲覧コードの実装例について説明します。

1.構成

バックエンドのプラグイン構成で、LiveViewプラグインを有効化します。この例では、次の構成を使用しました。

構成
値
説明

Privacy

ユーザー入力のマスク

ページ上で起こるすべてのユーザー入力をマスクする。

Optin

訪問者

ユーザーにCoBrowsingを開始するボタンをクリックしてもらう。

2.スクリプトの実装

JavaScriptは、コブラウジングする各Webページに統合する必要があります。

ページにLiveViewを実装する方法(英文)

3.サンプルコード-LiveView / CoBrowsingセッションの開始/停止ボタン

次のコードは、LiveViewセッションを開始します。これらの関数CV.cobrowse.start（）およびCV.cobrowse.stop（）を使用してLiveViewセッションを開始または停止します。 LiveViewセッションがいつ開始されるかを確認するaddSessionStartedListenerと、セッションがいつ停止されるかを確認するaddSessionStoppedListenerを追加しました。

セッション記録（Cookieオプションごとに有効化）を使用する場合は、以下のCoBrowsing機能を使用することをお勧めします。

CoBrowsing

次のコードは、CoBrowsingセッションを開始します。これらの関数CV.cobrowse.start（）およびCV.cobrowse.stop（）を使用して、CoBrowsingセッションを開始または停止します。 CoBrowsingセッションがいつ開始されるかを確認するaddSessionStartedListenerと、セッションがいつ停止されるかを確認する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>