Webサイト高度利用ガイド

Webサイトチャネルでは、LiveDesk Widget SDKインターフェースまたはiframeを使用することで、要件に応じた追加設定を行えます。

iframe関連の設定

ウェルカム画面をスキップする

iframeモードでは、action=autoStartパラメータを追加すると、バブルを開いた際に表示されるウェルカム画面をスキップし、チャットウィンドウを直接表示できます。

<iframe class="livedesk-widget-iframe" src="https://livedesk-stg.engagelab.com/console/livedesk/widget/?website_token=iTMtGDnzR1tccf3fiikLjL71&action=autoStart" title="LiveDesk" allow="camera;microphone" />
              
              <iframe
  class="livedesk-widget-iframe"
  src="https://livedesk-stg.engagelab.com/console/livedesk/widget/?website_token=iTMtGDnzR1tccf3fiikLjL71&action=autoStart"
  title="LiveDesk"
  allow="camera;microphone"
/>

            
このコードブロックはフローティングウィンドウ内に表示されます

website_tokenには、チャネル作成後に生成された対応する値を指定します。

ユーザーIDを設定する

設定方法は2つあります。

方法1:

Array.from(document.getElementsByTagName('iframe')) .filter((iframe) => iframe.src && iframe.src.includes('livedesk')) .forEach((iframe) => iframe.contentWindow?.postMessage( 'livedesk-widget:' + JSON.stringify({ event: 'set-user', identifier: 'your_user_id', user: { name: 'Display name', email: 'user@example.com' }, }), '*', ), );
              
              Array.from(document.getElementsByTagName('iframe'))
  .filter((iframe) => iframe.src && iframe.src.includes('livedesk'))
  .forEach((iframe) =>
    iframe.contentWindow?.postMessage(
      'livedesk-widget:' +
        JSON.stringify({
          event: 'set-user',
          identifier: 'your_user_id',
          user: { name: 'Display name', email: 'user@example.com' },
        }),
      '*',
    ),
  );

            
このコードブロックはフローティングウィンドウ内に表示されます

方法2: iframeにuser_id=xxxxxパラメータを追加します。

<iframe class="livedesk-widget-iframe" src="https://livedesk-stg.engagelab.com/console/livedesk/widget/?website_token=Etsz4XtvqKi7iqbHf8Ma6ZLR&action=autoStart&user_id=5002" title="LiveDesk" allow="camera;microphone" />
              
              <iframe
  class="livedesk-widget-iframe"
  src="https://livedesk-stg.engagelab.com/console/livedesk/widget/?website_token=Etsz4XtvqKi7iqbHf8Ma6ZLR&action=autoStart&user_id=5002"
  title="LiveDesk"
  allow="camera;microphone"
/>

            
このコードブロックはフローティングウィンドウ内に表示されます

LiveDesk Widget SDKインターフェース

ユーザーIDとユーザー情報を設定する(標準モード)

window.addEventListener("livedesk:ready", function () { window.$livedesk.setUserId("Unique user ID (such as user_id)", { // 1つ目のパラメータは一意の識別子です email: "user@example.com", name: "User name", avatar_url: "https://example.com/avatar.jpg", // オプション phone_number: "+1234567890", // オプション }); });
              
              window.addEventListener("livedesk:ready", function () {
  window.$livedesk.setUserId("Unique user ID (such as user_id)", {
    // 1つ目のパラメータは一意の識別子です
    email: "user@example.com",
    name: "User name",
    avatar_url: "https://example.com/avatar.jpg", // オプション
    phone_number: "+1234567890", // オプション
  });
});

            
このコードブロックはフローティングウィンドウ内に表示されます
注: 設定でユーザーIDをエンドユーザーの操作によって設定する場合は、window.addEventListener("livedesk:ready", function () {}) のイベントリスナーを削除できます。

ユーザーIDとユーザー情報を設定する(暗号化モード)

なりすましを防止し、ブラウザ間でセッションを維持するには、認証を有効にすることを推奨します。設定でHMACを有効にし、SHA-256を使用してidentifier_hashを生成します。

例(JavaScript):

const crypto = require("crypto"); const key = "Your HMAC Token"; // Inboxes設定からコピー const message = "Unique user ID"; const identifier_hash = crypto .createHmac("sha256", key) .update(message) .digest("hex"); // setUserに追加 window.$livedesk.setUserId("Unique user ID", { ...OtherInformation, identifier_hash: identifier_hash, });
              
              const crypto = require("crypto");
const key = "Your HMAC Token"; // Inboxes設定からコピー
const message = "Unique user ID";
const identifier_hash = crypto
  .createHmac("sha256", key)
  .update(message)
  .digest("hex");

// setUserに追加
window.$livedesk.setUserId("Unique user ID", {
  ...OtherInformation,
  identifier_hash: identifier_hash,
});

            
このコードブロックはフローティングウィンドウ内に表示されます

会話のカスタム属性を設定する

window.$livedesk.setConversationCustomAttributes({ utm_source: "google", // 例:会話レベルのUTM session_type: "support", });
              
              window.$livedesk.setConversationCustomAttributes({
  utm_source: "google", // 例:会話レベルのUTM
  session_type: "support",
});

            
このコードブロックはフローティングウィンドウ内に表示されます

これらのカスタム属性は、LiveDesk > 会話 > 会話情報 に表示されます。

ユーザーのカスタム属性を設定する

window.addEventListener("livedesk:ready", function () { window.$livedesk.setCustomAttributes({ pricing_plan: "premium", // キー:事前定義された一意の識別子、値:文字列など、型に応じて設定 signup_date: new Date(), // 例:日付型 account_id: 123, // 例:数値型 }); });
              
              window.addEventListener("livedesk:ready", function () {
  window.$livedesk.setCustomAttributes({
    pricing_plan: "premium", // キー:事前定義された一意の識別子、値:文字列など、型に応じて設定
    signup_date: new Date(), // 例:日付型
    account_id: 123, // 例:数値型
  });
});

            
このコードブロックはフローティングウィンドウ内に表示されます

これらのカスタム属性は、LiveDesk > 会話 > 連絡先属性 に表示されます。

ユーザー属性を削除する

指定したカスタム属性を削除します。

window.$livedesk.deleteCustomAttribute("pricing_plan"); // 文字列型の属性キー
              
              window.$livedesk.deleteCustomAttribute("pricing_plan"); // 文字列型の属性キー

            
このコードブロックはフローティングウィンドウ内に表示されます

チャットバブルの開閉状態を切り替える

ウィジェットの開閉状態を切り替えます。

window.$livedesk.toggle(); // 状態を指定してウィジェットを切り替える window.$livedesk.toggle("open"); // チャットウィジェットを開く window.$livedesk.toggle("close"); // チャットウィジェットを閉じる
              
              window.$livedesk.toggle();

// 状態を指定してウィジェットを切り替える
window.$livedesk.toggle("open"); // チャットウィジェットを開く
window.$livedesk.toggle("close"); // チャットウィジェットを閉じる

            
このコードブロックはフローティングウィンドウ内に表示されます

チャットバブルを表示または非表示にする

window.$livedesk.toggleBubbleVisibility("hide"); // 表示または非表示
              
              window.$livedesk.toggleBubbleVisibility("hide"); // 表示または非表示

            
このコードブロックはフローティングウィンドウ内に表示されます

ポップアップモード

チャットインターフェースをポップアップウィンドウで開きます。

window.$livedesk.popoutChatWindow();
              
              window.$livedesk.popoutChatWindow();

            
このコードブロックはフローティングウィンドウ内に表示されます

言語を設定する

ウィジェットの言語を設定します。

window.$livedesk.setLocale("en"); // 文字列形式の言語コード(例:zh-CN)
              
              window.$livedesk.setLocale("en"); // 文字列形式の言語コード(例:zh-CN)

            
このコードブロックはフローティングウィンドウ内に表示されます

ラベルを追加または削除する

会話開始前に、現在の会話にラベルを追加します。ラベルは会話に自動的に適用されます。

window.$livedesk.setLabel("support-ticket"); // 文字列形式のラベル識別子 window.$livedesk.removeLabel("support-ticket");
              
              window.$livedesk.setLabel("support-ticket"); // 文字列形式のラベル識別子
window.$livedesk.removeLabel("support-ticket");

            
このコードブロックはフローティングウィンドウ内に表示されます

LiveDesk Widget設定オブジェクト

このグローバルオブジェクトは、ウィジェットの動作をカスタマイズするために、SDKの読み込み前、初期化時に設定します。window.livedeskSettingsを使用して定義し、window.livedeskSDK.run()に渡します。

オブジェクトのプロパティ

プロパティ名 説明 デフォルト値
hideMessageBubble boolean メッセージバブルを非表示にします。 false true
showUnreadMessagesDialog boolean 未読メッセージダイアログを表示します。 true false
position string ウィジェットの位置です。 'right' 'left'
locale string デフォルトの言語コードです。 ダッシュボードの言語 'zh-CN'
useBrowserLanguage boolean ブラウザの言語を使用し、localeを無視します。 false true
type string ウィジェットのタイプです。 'standard' 'expanded_bubble'
darkMode boolean ダークモードを有効にします。 false true
baseDomain string 複数ドメインで使用する場合のベースドメインです(任意)。 'example.com'
launcherTitle string ランチャーのタイトルです。 'Support'
showPopoutButton boolean ポップアップボタンを表示します。 true false
welcomeTitle string ウェルカムタイトルです。 'Welcome!'
welcomeDescription string ウェルカムメッセージの説明です。 'How can we help you?'
availableMessage string オンライン時のメッセージです。 'We are online.'
unavailableMessage string オフライン時のメッセージです。 'We will reply later.'
enableFileUpload boolean ファイルアップロードを有効にします。 true false
enableEmojiPicker boolean 絵文字ピッカーを有効にします。 true false
enableEndConversation boolean 会話終了ボタンを有効にします。 true false

コード例

<script> // 1. sdk.jsの読み込み前にグローバル設定を行います。 // スクリプトの先頭に配置する必要があります。 window.livedeskSettings = { // ウィジェットの位置:左下(デフォルトは右下) position: "left", // 簡体字中国語を強制的に使用 // (ブラウザが英語に設定されていても中国語が表示されます) locale: "zh-CN", // ブラウザの言語を自動検出します。 // ブラウザの言語を優先する場合は、これをtrueに設定し、 // 上記のlocaleを削除します。 // useBrowserLanguage: true, // ウィジェットのタイプ: // expanded_bubble = ウェルカムメッセージ付きの大きなバブル // standard = 従来の小さなバブル type: "expanded_bubble", // ダークモード // (システム設定に自動的に従うか、ダークモードを強制) darkMode: "auto", // 使用可能な値:true | false | "auto" // 下部にある小さなバブルアイコンを非表示 // (カスタムボタンとの併用に適しています) hideMessageBubble: false, // 右下隅にあるポップアップウィンドウの矢印ボタンを非表示 showPopoutButton: false, // カスタムランチャータイトル(expanded_bubbleモードで表示) launcherTitle: "Online Support", // ウェルカムメッセージ(expanded_bubbleモードで有効) welcomeTitle: "Hello! How can we help you?", welcomeDescription: "We usually reply within a few minutes.", // オンラインまたはオフライン時に表示する案内テキスト availableMessage: "We are online and ready to help", unavailableMessage: "We are currently offline and will reply as soon as possible during business hours", // 機能の有効化・無効化 enableFileUpload: true, // ファイルのアップロードを許可 enableEmojiPicker: true, // 絵文字を許可 enableEndConversation: true, // ユーザーが自分で会話を終了できるようにする // その他の高度なオプション(必要に応じて有効化) // showUnreadMessagesDialog: true, // 未読メッセージがある場合にリマインダーダイアログを表示(デフォルトはtrue) // baseDomain: "yourcompany.com", // 複数ドメインでのデプロイに使用 }; </script> <!-- 2. LiveDesk Widget SDKを読み込む(独自のドメインとトークンに置き換えてください) --> <script> (function (d, t) { var BASE_URL = "https://www.engagelab.com"; // LiveDeskのアドレスに変更 var g = d.createElement(t); var s = d.getElementsByTagName(t)[0]; g.src = BASE_URL + "/packs/js/sdk.js"; g.defer = true; g.async = true; s.parentNode.insertBefore(g, s); g.onload = function () { window.livedeskSDK.run({ websiteToken: "abcdefgh1234567890abcdefgh123456", // Website Tokenに変更 baseUrl: BASE_URL, }); }; })(document, "script"); </script>
              
              <script>
  // 1. sdk.jsの読み込み前にグローバル設定を行います。
  // スクリプトの先頭に配置する必要があります。
  window.livedeskSettings = {
    // ウィジェットの位置:左下(デフォルトは右下)
    position: "left",

    // 簡体字中国語を強制的に使用
    // (ブラウザが英語に設定されていても中国語が表示されます)
    locale: "zh-CN",

    // ブラウザの言語を自動検出します。
    // ブラウザの言語を優先する場合は、これをtrueに設定し、
    // 上記のlocaleを削除します。
    // useBrowserLanguage: true,

    // ウィジェットのタイプ:
    // expanded_bubble = ウェルカムメッセージ付きの大きなバブル
    // standard = 従来の小さなバブル
    type: "expanded_bubble",

    // ダークモード
    // (システム設定に自動的に従うか、ダークモードを強制)
    darkMode: "auto", // 使用可能な値:true | false | "auto"

    // 下部にある小さなバブルアイコンを非表示
    // (カスタムボタンとの併用に適しています)
    hideMessageBubble: false,

    // 右下隅にあるポップアップウィンドウの矢印ボタンを非表示
    showPopoutButton: false,

    // カスタムランチャータイトル(expanded_bubbleモードで表示)
    launcherTitle: "Online Support",

    // ウェルカムメッセージ(expanded_bubbleモードで有効)
    welcomeTitle: "Hello! How can we help you?",
    welcomeDescription: "We usually reply within a few minutes.",

    // オンラインまたはオフライン時に表示する案内テキスト
    availableMessage: "We are online and ready to help",
    unavailableMessage:
      "We are currently offline and will reply as soon as possible during business hours",

    // 機能の有効化・無効化
    enableFileUpload: true, // ファイルのアップロードを許可
    enableEmojiPicker: true, // 絵文字を許可
    enableEndConversation: true, // ユーザーが自分で会話を終了できるようにする

    // その他の高度なオプション(必要に応じて有効化)
    // showUnreadMessagesDialog: true, // 未読メッセージがある場合にリマインダーダイアログを表示(デフォルトはtrue)
    // baseDomain: "yourcompany.com", // 複数ドメインでのデプロイに使用
  };
</script>

<!-- 2. LiveDesk Widget SDKを読み込む(独自のドメインとトークンに置き換えてください) -->
<script>
  (function (d, t) {
    var BASE_URL = "https://www.engagelab.com"; // LiveDeskのアドレスに変更
    var g = d.createElement(t);
    var s = d.getElementsByTagName(t)[0];

    g.src = BASE_URL + "/packs/js/sdk.js";
    g.defer = true;
    g.async = true;
    s.parentNode.insertBefore(g, s);

    g.onload = function () {
      window.livedeskSDK.run({
        websiteToken: "abcdefgh1234567890abcdefgh123456", // Website Tokenに変更
        baseUrl: BASE_URL,
      });
    };
  })(document, "script");
</script>

            
このコードブロックはフローティングウィンドウ内に表示されます

LiveDesk Widgetイベントリスナー

イベント名 説明 リスナー例
livedesk:ready SDKの読み込みが完了し、メソッドを安全に呼び出せる状態になったときにトリガーされます。 window.addEventListener('livedesk:ready', () => { /* Initialization */ });
livedesk:on-message 新しいメッセージを受信したときにトリガーされます。 window.addEventListener('livedesk:on-message', (data) => { console.log(data); });
livedesk:error SDKエラーが発生したときにトリガーされます(v2.3.0以降)。 window.addEventListener('livedesk:error', (error) => { console.error(error); });
Icon Solid Transparent White Qiyu
お問い合わせ