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); }); |










