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










