サンプルコード（応用的な組み込み方法）

サンプルコード（応用的な組み込み方法）

以下は応用的な組み込み方法のサンプルコードです。

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

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

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

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

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


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


ソースコード(HTML)
  1. <div>
  2. [番号発行] をクリックして表示される4桁のPINコードをオペレーターに連絡してください。
  3. <button id="pingenerate">番号発行</button> <button id="pincancel">取り消し</button>
  4. <span id="sessidtarget"></span>
  5. </div>
ソースコード(JavaScript)
  1. <script type="text/javascript">
  2. (function (s, u, r, f, l, y) {
  3. s[f] = s[f] || { init: function () { s[f].q = arguments } };
  4. l = u.createElement(r); y = u.getElementsByTagName(r)[0];
  5. l.async = 1; l.src = 'https://surfly.jp/surfly.js'; y.parentNode.insertBefore(l, y);
  6. })
  7. (window, document, 'script', 'Surfly');
  8. var settings = {
  9. widget_key: 'お手持ちの Widget Key を記載してください',
  10. hide_until_agent_joins: true
  11. };
  12. Surfly.init(settings, function (initResult) {
  13. if (initResult.success) {
  14. if (!Surfly.isInsideSession) {
  15. pingenerate.addEventListener('click', function () {
  16. Surfly.session()
  17. .on('session_started', function (session, event) {
  18. document.getElementById("sessidtarget").innerText = 'あなたのPINコードは ' + session.pin + ' です。';
  19. pincancel.addEventListener('click', function () {
  20. session.end()
  21. });
  22. })
  23. .on('viewer_joined', function (session, event) {
  24. if (event.count == 1) {
  25. // リダイレクト先のURLを指定します
  26. session.relocate("https://www.surfly.jp");
  27. }
  28. })
  29. .startLeader();
  30. });
  31. }
  32. } else {
  33. console.log(initResult.errorMsg)
  34. };
  35. });
  36. </script>

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

フィールドのマスキング:
タブオーナーがフィールドに入力した情報をタブオーナー以外からは見えないように隠します。
マスキングを適用しているフィールドの入力情報は、タブオーナー以外には「XXXXXX」と表示されます。

ボタンのマスキング:
タブオーナー以外に画面操作権限を交替した際に、ボタンを押下できないように制限します。

サンプルでは、タブオーナー操作時はボタンを青く表示し、タブオーナー以外に操作権限を交替した際はボタンをグレーアウトするように設定しています。

タブオーナーの見え方


タブオーナー以外の見え方
















ソースコード(HTML)
  1. <form name="form1">
  2. お名前<br />
  3. <input type="text" name="input_name" placeholder="お名前"><br />
  4. 住所 [マスキング]<br />
  5. <input size="60" type="text" name="input_address" placeholder="東京都港区赤坂一丁目5番12号　住友不動作元赤坂ビル7F" surfly_private><br />
  6. 電話番号 [マスキング]<br />
  7. <input type="tel" name="input_tel" placeholder="03-6809-0974" surfly_private><br />
  8. <input type="submit" value="送信" id="button_submit" style="background-color: #87cefa"><br />
  9. </form>
ソースコード(JavaScript)
  1. <script type="text/javascript">
  2. (function (s, u, r, f, l, y) {
  3. s[f] = s[f] || { init: function () { s[f].q = arguments } };
  4. l = u.createElement(r); y = u.getElementsByTagName(r)[0]; l.async = 1;
  5. l.src = 'https://surfly.jp/surfly.js'; y.parentNode.insertBefore(l, y);
  6. })
  7. (window, document, 'script', 'Surfly');
  8. var settings = {
  9. widget_key: 'お手持ちの Widget Key を記載してください'
  10. };
  11. Surfly.init(settings, function (initResult) {
  12. if (initResult.success) {
  13. var sess;
  14. if (!Surfly.currentSession) {
  15. sess = Surfly.session();
  16. }
  17. else {
  18. sess = Surfly.currentSession;
  19. }
  20. sess.on('control', function (session, event) {
  21. var element = document.getElementById("button_submit");
  22. // タブオーナーが操作権限を持つ際の処理を定義します
  23. if (event.to == 0) {
  24. element.disabled = false;
  25. element.style.backgroundColor = "#87cefa";
  26. }
  27. // タブオーナー以外が操作権限を持つ際の処理を定義します
  28. else {
  29. element.disabled = true;
  30. element.style.backgroundColor = "#e6fff2";
  31. }
  32. });
  33. } else {
  34. console.log(initResult.errorMsg)
  35. };
  36. });
  37. </script>



    • Related Articles

    • サンプルコード（ログデータの記録）

      1. メタデータの記録 カスタマーが入力した情報をセッションのメタデータとして記録できます。 記録される情報は、セッション開始前にキュー画面の「メタデータ」欄で確認できます。 図1 HTML組み込みページのイメージ 図2 カスタマーから送信されたセッションをオペレーターが応答する際のイメージ ソースコード（HTML） <form> <p>以下のフォームに情報を入力し、Surflyによるサポートサービスを開始します。</p> お名前<br /> <input type="text" ...

    • サンプルコード（基本的な組み込み方法）

      サンプルは複数を組み合わせて実装することも可能なため、お客様のご希望に近いWebサイトへの組み込みが実現できます。 サンプルの説明には「アウトバウンド」「インバウンド」などのSurflyで独自に定義する用語を使用しています。 各用語については、セッション操作マニュアルをご参照ください。 また実装したコードを修正してコブラウジングセッションを開始する際には、ブラウザに記憶されている古いデータや設定状況を削除するため、キャッシュを必ず消去することをお勧めいたします。 Google ...