サンプルコード

サンプルコード

はじめに

このページでは、SurflyをWebサイトへ実装する際に活用できるコード例を記載しています。
サンプルは複数を組み合わせて実装することも可能なため、お客様のご希望に近いWebサイトへの組み込みが実現できます。

サンプルの説明には「アウトバウンド」「インバウンド」などのSurflyで独自に定義する用語を使用しています。
各用語については、ユーザー操作マニュアルをご参照ください。

基本的な組み込み方法

セッションコード入力画面

オペレーターから伝えられたセッションコードをカスタマーが入力するアウトバウンドセッション用の入力ボックスを作成できます。

こちらから実際のセッションコード入力画面をご確認いただけます。

ソースコード

HTMLJavaScript
<div class="entry-content">
    <p>担当者がお伝えする9桁の番号を入力し、[接続] を選択してください。</p>
    <form name="scode" onsubmit="return tbox1()"><input name="txtb" type="text" value="" />  <input type="button" value="接続" onclick="tbox1()" /></form>
</div>
<script type="text/javascript">
    function tbox1() {
        var str1 = document.scode.txtb.value;
        var refUrl = 'https://surfly.jp/' + str1;
        location.href = refUrl;
        return false;
    }
</script>

セッション開始リンク

Surflyのセッションを開始できるインバウンドセッション用リンクを作成できます。

図1  HTML組み込みページのイメージ

図2  セッション開始リンク選択後のイメージ

図3  セッション開始後オペレーターからの応答を待機中のイメージ

ソースコード

HTMLJavaScript
<div>
    <a href="#surflystart">Web画面共有を開始</a>
</div>
<script type="text/javascript">
    (function (s, u, r, f, l, y) {
        s[f] = s[f] || { init: function () { s[f].q = arguments } };
        l = u.createElement(r); y = u.getElementsByTagName(r)[0]; l.async = 1;
        l.src = 'https://surfly.jp/surfly.js'; y.parentNode.insertBefore(l, y);
    })
        (window, document, 'script', 'Surfly');
    var settings = {
        widget_key: 'お手持ちの Widget Key を記載してください',
        disable_end_redirect: true
    };
    Surfly.init(settings, function (initResult) {
        if (!initResult.success) {
            console.log(initResult.errorMsg)
        };
    });
</script>

PINコード発行・取り消し・セッション終了ボタン

インバウンドセッションを開始するためのPINコードの発行および取り消しボタンを作成できます。
またセッションの接続中は、セッション終了ボタンが表示されます。

図1  HTML組み込みページのイメージ

図2  番号発行ボタン選択後のイメージ

図3  発行された番号をオペレーターが応答する際のイメージ

図4  オペレーター応答後のHTML組み込みページのイメージ

ソースコード

HTMLJavaScript
<div>
    [番号発行] をクリックして表示される4桁のPINコードをオペレーターに連絡してください。
    <button id="pingenerate">番号発行</button> <button id="pincancel">取り消し</button>
    <span id="sessidtarget"></span>
    <button id="exit_button" style="display: none">セッション終了</button>
</div>
<script type="text/javascript">
    (function (s, u, r, f, l, y) {
        s[f] = s[f] || { init: function () { s[f].q = arguments } };
        l = u.createElement(r); y = u.getElementsByTagName(r)[0]; l.async = 1;
        l.src = 'https://surfly.jp/surfly.js'; y.parentNode.insertBefore(l, y);
    })
        (window, document, 'script', 'Surfly');
    var settings = {
        widget_key: 'お手持ちの Widget Key を記載してください',
        hide_until_agent_joins: true
    };
    Surfly.init(settings, function (initResult) {
        if (initResult.success) {
            if (!Surfly.isInsideSession) {
                pingenerate.addEventListener('click', function () {
                    Surfly.session()
                        .on('session_started', function (session, event) {
                            document.getElementById("sessidtarget").innerText = 'あなたのPINコードは ' + session.pin + ' です。';
                            pincancel.addEventListener('click', function () {
                                session.end()
                            });
                        })
                        .startLeader();
                });
            } else {
                document.getElementById('pingenerate').style.display = "none";
                document.getElementById('pincancel').style.display = "none";
                document.getElementById('exit_button').style.display = "block";
                exit_button.addEventListener('click', function () {
                    Surfly.currentSession.end()
                });
            }
        } else {
            console.log(initResult.errorMsg)
        };
    });
</script>

ボタンなしのセッション開始画面

ボタンの実装不要で、WebサイトへSurflyを組み込むことができます。
Surflyを組み込んだページで [Ctrl] キーと [Enter] キーを同時に押下することでセッションを開始できます。

本機能はJavaScriptのみの実装で動作します。
参考のHTMLソースを記載しておりますが、こちらのWebサイトへの組み込みは必須ではありません。

ソースコード

HTMLJavaScript
<div>
    [Ctrl] キーと [Enter] キーを同時に押下することでセッションを開始できます。
</div>
<script type="text/javascript">
    (function (s, u, r, f, l, y) {
        s[f] = s[f] || { init: function () { s[f].q = arguments } };
        l = u.createElement(r); y = u.getElementsByTagName(r)[0]; l.async = 1;
        l.src = 'https://surfly.jp/surfly.js'; y.parentNode.insertBefore(l, y);
    })
        (window, document, 'script', 'Surfly');
    var settings = {
        widget_key: 'お手持ちの Widget Key を記載してください',
        stealth_mode: true
    };
    Surfly.init(settings, function (initResult) {
        if (!initResult.success) {
            console.log(initResult.errorMsg)
        };
    });
</script>

応用的な組み込み方法

セッション開始時のリダイレクト

フォロワーがセッションに参加した際に、指定したURLへ共有画面をリダイレクトさせます。
サンプルでは、 https://www.surfly.jp を設定しています。

図1  HTML組み込みページのイメージ

図2  番号発行ボタン選択後のイメージ

図3  発行された番号をオペレーターが応答する際のイメージ

図4  オペレーター応答後のイメージ

ソースコード

HTMLJavaScript
<div>
    [番号発行] をクリックして表示される4桁のPINコードをオペレーターに連絡してください。
    <button id="pingenerate">番号発行</button> <button id="pincancel">取り消し</button>
    <span id="sessidtarget"></span>
</div>
<script type="text/javascript">
    (function (s, u, r, f, l, y) {
        s[f] = s[f] || { init: function () { s[f].q = arguments } };
        l = u.createElement(r); y = u.getElementsByTagName(r)[0];
        l.async = 1; l.src = 'https://surfly.jp/surfly.js'; y.parentNode.insertBefore(l, y);
    })
        (window, document, 'script', 'Surfly');
    var settings = {
        widget_key: 'お手持ちの Widget Key を記載してください',
        hide_until_agent_joins: true
    };
    Surfly.init(settings, function (initResult) {
        if (initResult.success) {
            if (!Surfly.isInsideSession) {
                pingenerate.addEventListener('click', function () {
                    Surfly.session()
                        .on('session_started', function (session, event) {
                            document.getElementById("sessidtarget").innerText = 'あなたのPINコードは ' + session.pin + ' です。';
                            pincancel.addEventListener('click', function () {
                                session.end()
                            });
                        })
                        .on('viewer_joined', function (session, event) {
                            if (event.count == 1) {
                                // リダイレクト先のURLを指定します
                                session.relocate("https://www.surfly.jp");
                            }
                        })
                        .startLeader();
                });
            }
        } else {
            console.log(initResult.errorMsg)
        };
    });
</script>

フィールド・ボタンのマスキング

フィールドのマスキング：

リーダーがフィールドに入力した情報をフォロワーからは見えないように隠します。
マスキングを適用しているフィールドの入力情報は、フォロワーには「XXXXXX」と表示されます。

ボタンのマスキング：

フォロワーに画面操作権限を交替した際に、フォロワーからはボタンを押下できないように制限します。

サンプルでは、リーダー操作時はボタンを青く表示し、フォロワーに操作権限を交替した際はボタンをグレーアウトするように設定しています。

 

リーダーの見え方

フォロワーの見え方

ソースコード

HTMLJavaScript
<form name="form1">
    お名前<br />
    <input type="text" name="input_name" placeholder="お名前"><br />
    住所 [マスキング]<br />
    <input size="60" type="text" name="input_address" placeholder="東京都渋谷区道玄坂1－20－8寿パークビル7F" surfly_private><br />
    電話番号 [マスキング]<br />
    <input type="tel" name="input_tel" placeholder="03-6809-09**" surfly_private><br />
    <input type="submit" value="送信" id="button_submit" style="background-color: #87cefa"><br />
</form>
<script type="text/javascript">
    (function (s, u, r, f, l, y) {
        s[f] = s[f] || { init: function () { s[f].q = arguments } };
        l = u.createElement(r); y = u.getElementsByTagName(r)[0]; l.async = 1;
        l.src = 'https://surfly.jp/surfly.js'; y.parentNode.insertBefore(l, y);
    })
        (window, document, 'script', 'Surfly');
    var settings = {
        widget_key: 'お手持ちの Widget Key を記載してください'
    };
    Surfly.init(settings, function (initResult) {
        if (initResult.success) {
            var sess;
            if (!Surfly.currentSession) {
                sess = Surfly.session();
            }
            else {
                sess = Surfly.currentSession;
            }
            sess.on('control', function (session, event) {
                var element = document.getElementById("button_submit");
                // リーダーが操作権限を持つ際の処理を定義します
                if (event.to == 0) {
                    element.disabled = false;
                    element.style.backgroundColor = "#87cefa";
                }
                // フォロワーが操作権限を持つ際の処理を定義します
                else {
                    element.disabled = true;
                    element.style.backgroundColor = "#e6fff2";
                }
            });
        } else {
            console.log(initResult.errorMsg)
        };
    });
</script>

リーダー・フォロワーの役割交替

HTML内に専用のiframeを定義することで、リーダーとフォロワーの役割を入れ替えることができます。
フォロワーに特定の画面の操作のみをリーダーとして許可する、Cookie情報の保存先を変更するなどセッション内でスコープを切り分ける際に有効です。
複数のフォロワーが存在する場合は、最初にセッションに参加したフォロワーがiframe上のリーダーとなります。
サンプルでは、 https://www.surfly.jp のiframe内でリーダーとフォロワーの役割が入れ替わるよう設定しています。

HTML内に埋め込まれたiframeのコンテンツを表示するためには、リーダーとフォロワーの両方がセッションに参加しており、役割交替が行える状態で当該のHTMLにアクセスする必要があります（当該のHTMLからセッションを開始しても役割交替はできません）。
例として、以下のような役割交替の開始方法があります。

  • 当該のHTMLにアクセス可能なページで待機し、フォロワーの参加後にアクセスする
  • 当該のHTMLからセッションを開始して待機し、フォロワーの参加後にページをリロードする
  • フォロワーの参加後、操作パネルの [新しいURLへ移動する] から当該のHTMLにアクセスする

本機能はHTMLのみの実装で動作します。
参考のJavaScriptソースを記載しておりますが、インバウンドで利用しない場合Webサイトへの組み込みは不要です。

図1  リーダーの操作画面イメージ1

図2  リーダーの操作画面イメージ2

図3  フォロワーの操作画面イメージ

ソースコード

HTMLJavaScript
<div>
    以下のiframe内では、リーダーとフォロワーの役割が入れ替わります。
    <!-- 対象サイトのURLを指定し、最後に ?surfly_switch_role=true を付与します -->
    <iframe src="https://www.surfly.jp/?surfly_switch_role=true" width="100%" height="600px"></iframe>
</div>
<script type="text/javascript">
    (function (s, u, r, f, l, y) {
        s[f] = s[f] || { init: function () { s[f].q = arguments } };
        l = u.createElement(r); y = u.getElementsByTagName(r)[0]; l.async = 1;
        l.src = 'https://surfly.jp/surfly.js'; y.parentNode.insertBefore(l, y);
    })
        (window, document, 'script', 'Surfly');
    var settings = {
        widget_key: 'お手持ちの Widget Key を記載してください',
        stealth_mode: true
    };
    Surfly.init(settings, function (initResult) {
        if (!initResult.success) {
            console.log(initResult.errorMsg)
        };
    });
</script>

ログデータの記録

メタデータの記録

カスタマーが入力した情報をセッションのメタデータとして記録できます。
記録される情報は、セッション開始前にキュー画面の「メタデータ」欄で確認できます。

図1  HTML組み込みページのイメージ

図2  カスタマーから送信されたセッションをオペレーターが応答する際のイメージ

ソースコード

HTMLJavaScript
<form>
    <p>以下のフォームに情報を入力し、Surflyによるサポートサービスを開始します。</p>
    お名前<br />
    <input type="text" name="input_name" placeholder="海橋太郎"><br />
    メールアドレス<br />
    <input size="60" type="email" name="input_email" placeholder="umihashi@oceanbridge.jp"><br />
    <button type="button" id="button_submit">送信</button><br />
</form>
<script type="text/javascript">
    (function (s, u, r, f, l, y) {
        s[f] = s[f] || { init: function () { s[f].q = arguments } };
        l = u.createElement(r); y = u.getElementsByTagName(r)[0];
        l.async = 1; l.src = 'https://surfly.jp/surfly.js'; y.parentNode.insertBefore(l, y);
    })
        (window, document, 'script', 'Surfly');
    var settings = {
        widget_key: 'お手持ちの Widget Key を記載してください'
    };
    Surfly.init(settings, function (initResult) {
        if (initResult.success) {
            button_submit.addEventListener('click', function () {
                if (!Surfly.isInsideSession) {
                    var cname = document.getElementsByName("input_name")[0].value;
                    var cemail = document.getElementsByName("input_email")[0].value;
                    var metadata = { "name": cname, "email": cemail };
                    Surfly.session().startLeader(null, metadata);
                }
            });
        } else {
            console.log(initResult.errorMsg)
        };
    });
</script>

監査ログの記録

セッション中に発生したイベントをログに記録できます。
サンプルでは、以下の情報を監査ログに記録しています。

  • セッション開始後にフォロワーが参加するまでの待機時間
  • セッション中にダウンロードされたファイル（ドキュメントやプログラム）の名称

ソースコード

HTMLJavaScript
<div>
    このサンプルでは、Surflyが標準で用意しているSurlyサポートボタンを使用しています。
    セッションを開始するには、「お困りですか？」ボタンを押下してください。
</div>
<script type="text/javascript">
    (function (s, u, r, f, l, y) {
        s[f] = s[f] || { init: function () { s[f].q = arguments } };
        l = u.createElement(r); y = u.getElementsByTagName(r)[0];
        l.async = 1; l.src = 'https://surfly.jp/surfly.js'; y.parentNode.insertBefore(l, y);
    })
        (window, document, 'script', 'Surfly');
    var settings = {
        widget_key: 'お手持ちの Widget Key を記載してください'
    };
    Surfly.init(settings, function (initResult) {
        if (initResult.success) {
            if (!Surfly.isInsideSession) {
                // Surlyサポートボタンを表示します
                Surfly.button();
                var currentDate;
                // セッションがキューに待機された時間を記録します
                Surfly.on('session_created', function (session, event) {
                    currentDate = Date.now();
                });
                // フォロワーがセッションに参加した時間をcurrentDate変数から差し引いて待機時間を算出します
                Surfly.on('viewer_joined', function (session, event) {
                    var waitingTime = (Date.now() - currentDate) / 1000;
                    session.log("Agent joined after " + waitingTime + " seconds")
                })
                // セッション内でダウンロードされたファイル（ドキュメントやプログラム）をログに記録します
                Surfly.on('file_download', function (session, event) {
                    session.log("A file with the file name: " + "'" + event.filename + "'" + " was downloaded")
                })
            }
        } else {
            console.log(initResult.errorMsg)
        };
    });
</script>