Website 高度な使用ガイド

Website チャネルでは、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" // チャネル作成後に生成された対応する値に website_token を置き換えてください title="Live desk" allow="camera;microphone" />
              
              <iframe
    class="livedesk-widget-iframe"
    src="https://livedesk-stg.engagelab.com/console/livedesk/widget/?website_token=iTMtGDnzR1tccf3fiikLjL71&action=autoStart" // チャネル作成後に生成された対応する値に website_token を置き換えてください
    title="Live desk"
    allow="camera;microphone"
/>

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

ユーザー 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("一意のユーザー ID(user_id など)", { // 最初のパラメータは一意の識別子です email: "user@example.com", name: "ユーザー名", avatar_url: "https://example.com/avatar.jpg", // 任意 phone_number: "+1234567890" // 任意 }); });
              
              window.addEventListener("livedesk:ready", function () {
  window.$livedesk.setUserId("一意のユーザー ID(user_id など)", {  // 最初のパラメータは一意の識別子です
    email: "user@example.com",
    name: "ユーザー名",
    avatar_url: "https://example.com/avatar.jpg",  // 任意
    phone_number: "+1234567890"  // 任意
  });
});

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

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

認証を有効にすることを推奨します。偽装を防ぎ、ブラウザをまたいだセッションの永続性を確保するために、設定で HMAC を有効にしてください(identifier_hash の生成には SHA256 を使用します)。例(JavaScript):

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

// setUser に追加
window.$livedesk.setUserId("Unique user ID", {
  ...Other information,
  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 - Conversation - Conversation Info に表示されます。

ユーザーのカスタム変数を設定する

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

            
このコードブロックはフローティングウィンドウ内に表示されます
  • これらのカスタム変数は LiveDesk - Conversation - Contact Attributes に表示されます。

ユーザー属性を削除する

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

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

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

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

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

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

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

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

チャットバブルを表示 / 非表示にする

window.$livedesk.toggleBubbleVisibility('hide'); // show/hide
              
              window.$livedesk.toggleBubbleVisibility('hide'); // show/hide

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

ポップアウトモード

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

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

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

言語を設定する

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

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

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

ラベルを追加 / 削除する

現在のセッションにラベルを追加します(会話開始前)。ラベルは会話に自動的に適用されます。

window.$livdesk.setLabel('support-ticket'); // 文字列ラベル識別子 window.$livdesk.removeLabel('support-ticket');
              
              window.$livdesk.setLabel('support-ticket'); // 文字列ラベル識別子
window.$livdesk.removeLabel('support-ticket');

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

LiveDesk Widget 設定オブジェクト

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

オブジェクトプロパティ

Property Name Type Description Default Value Example
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, // カスタムランチャータイトル(大きなバブルモードで表示) launcherTitle: "オンラインサポート", // ウェルカムメッセージ(expanded_bubble モードで有効) welcomeTitle: "こんにちは!どのようにお手伝いできますか?", welcomeDescription: "通常、数分以内に返信します。", // オンライン / オフライン時に表示される案内テキスト availableMessage: "現在オンラインです。いつでもサポートできます", unavailableMessage: "現在オフラインです。営業時間内にできるだけ早く返信いたします", // 機能スイッチ 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),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,

  // カスタムランチャータイトル(大きなバブルモードで表示)
  launcherTitle: "オンラインサポート",

  // ウェルカムメッセージ(expanded_bubble モードで有効)
  welcomeTitle: "こんにちは!どのようにお手伝いできますか?",
  welcomeDescription: "通常、数分以内に返信します。",

  // オンライン / オフライン時に表示される案内テキスト
  availableMessage: "現在オンラインです。いつでもサポートできます",
  unavailableMessage: "現在オフラインです。営業時間内にできるだけ早く返信いたします",

  // 機能スイッチ
  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),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 イベントリスナー

Event Name Description Listener Example
livedesk:ready SDK が完全に読み込まれ、メソッドを安全に呼び出せるタイミングでトリガーされます。 window.addEventListener('livedesk:ready', () => { /* 初期化 */ });
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
お問い合わせ