この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

コミュニティでスニペット設定を使用するためのスニペット設定ファイルの作成

事前チャットの追加設定やボタンへの直接転送などのスニペットのみの設定をコミュニティチャットウィンドウで使用できるようにします。JavaScript ファイルを作成し、組み込みチャットコミュニティコンポーネントの設定で参照する静的リソースとしてアップロードします。

コミュニティでは自動チャット招待はまだ使用できません。また、このファイルのログインユーザの事前チャット項目を自動入力するように設定することもできません。埋め込みチャットコンポーネントの設定で [事前チャット項目を入力] オプションを使用してください。

メモ

1.JavaScript を使用してスニペット設定ファイルを作成する

JavaScript ファイル内で、コミュニティのチャットウィンドウで使用する設定を定義します。

表 1. 使用できる設定
設定名	ファイル内での指定方法
事後チャットを自動的に開く	`embedded_svc.snippetSettingsFile.autoOpenPostChat = true; // or false`
アバター画像の URL	`embedded_svc.snippetSettingsFile.avatarImgURL = '';`
チャットボット (Einstein ボット) 画像の URL	`embedded_svc.snippetSettingsFile.chatbotAvatarImgURL = '';`
会社のロゴ画像の URL	`embedded_svc.snippetSettingsFile.smallCompanyLogoImgURL = '';`
ボタンへの直接転送	`embedded_svc.snippetSettingsFile.directToButtonRouting = function(prechatFormData) {};`
外部スクリプト	`embedded_svc.snippetSettingsFile.externalScripts = [];`
外部スタイル	`embedded_svc.snippetSettingsFile.externalStyles = [];`
事前チャットフォームの追加詳細	`embedded_svc.snippetSettingsFile.extraPrechatFormDetails = [];`
事前チャットの追加情報	`embedded_svc.snippetSettingsFile.extraPrechatInfo = [];`
ヘッダーの背景画像の URL	`embedded_svc.snippetSettingsFile.headerBackgroundURL = '';`
事前チャットの背景画像の URL	`embedded_svc.snippetSettingsFile.prechatBackgroundImgURL = '';`
転送順序	`embedded_svc.snippetSettingsFile.fallbackRouting = [];`
待機状態の背景画像の URL	`embedded_svc.snippetSettingsFile.waitingStateBackgroundImgURL = '';`

設定は、最初にエクスペリエンスビルダーの組み込みチャットコンポーネントの設定から適用され、その後 JavaScript ファイル、[設定] の順に適用されます。次に例を示します。

JavaScript ファイルでアバター画像を設定し、[設定] ではこの設定を空白のままにすると、JavaScript ファイルに設定した画像が表示されます。
[設定] にエージェントのアバターを含め、JavaScript ファイルの組み込みチャットコンポーネントの設定では指定しなかった場合、[設定] に含めた画像が表示されます。

重要

2.ファイルを静的リソースにアップロードする

ファイルを [設定] の静的リソースとしてアップロードします。[設定] にアクセスできない場合は、Salesforce システム管理者にお問い合わせください。

ファイルをアップロードするときには次のことに注意してください。

キャッシュコントロールには [公開] を選択する。
覚えやすく入力しやすい名前を付ける。組み込みチャットコンポーネントの設定からファイルを参照するときにはファイル名ではなく静的リソース名を使用します。

3.組み込みチャットコンポーネントの設定でファイルを参照する

エクスペリエンスビルダーで、[スニペット設定ファイル] 項目に静的リソース名 (ファイル名ではない) を入力します。エクスペリエンスビルダーにアクセスできない場合は、Salesforce システム管理者にお問い合わせください。

たとえば、JavaScript ファイルが SnapInCodeSnippetSettings.js という名前で、静的リソースでは SnippetSettings という名前にした場合は、[スニペット設定ファイル] 項目には「SnippetSettings」と入力します。

スニペット設定ファイルの例

この例では、実際の URL、ファイル名、ユーザ ID、ボタン ID、メールアドレスは使用していません。この例の一部をコピーしてスニペット設定ファイルに使用する場合は、使用する情報を入力してください。

メモ

1window._snapinsSnippetSettingsFile = (function() {
2console.log("Snippet settings file loaded.");	// Logs that the snippet settings file was loaded successfully
3
4embedded_svc.snippetSettingsFile.avatarImgURL = 'https://yourwebsite.here/avatar.jpg';
5embedded_svc.snippetSettingsFile.smallCompanyLogoImgURL = 'https://yourwebsite.here/company_logo.png';
6embedded_svc.snippetSettingsFile.prechatBackgroundImgURL = 'https://yourwebsite.here/prechat_background.jpg';
7embedded_svc.snippetSettingsFile.waitingStateBackgroundImgURL = 'https://yourwebsite.here/waiting_background.png';
8embedded_svc.snippetSettingsFile.headerBackgroundURL = 'https://yourwebsite.here/header_background.jpg';
9embedded_svc.snippetSettingsFile.chatbotAvatarImgURL = 'https://yourwebsite.here/bot_avatar.jpg';
10embedded_svc.snippetSettingsFile.autoOpenPostChat = true;
11
12embedded_svc.snippetSettingsFile.externalScripts = ['my_scripts'];
13embedded_svc.snippetSettingsFile.externalStyles = ['my_styles'];
14
15embedded_svc.snippetSettingsFile.directToButtonRouting = function(prechatFormData) {
16if(prechatFormData[1].value === "Computer") {
17console.log("direct to button routing initiated.");
18alert("Alert: direct to button routing initiated!");
19return "BUTTONIDHERE";
20}
21}
22
23embedded_svc.snippetSettingsFile.fallbackRouting = ['USERIDHERE', 'BUTTONIDHERE', 'USERID_BUTTONID'];
24
25
26embedded_svc.snippetSettingsFile.extraPrechatFormDetails = [{"label":"FirstName","value":"John","displayToAgent":true},
27{"label":"LastName","value":"Doe","displayToAgent":true},
28{"label":"Email","value":"john.doe@salesforce.com","displayToAgent":true}];
29
30embedded_svc.snippetSettingsFile.extraPrechatInfo = [{
31"entityName": "Contact",
32"showOnCreate": true,
33"linkToEntityName": "Case",
34"linkToEntityField": "ContactId",
35"saveToTranscript": "ContactId",
36"entityFieldMaps" : [{
37"doCreate":true,
38"doFind":true,
39"fieldName":"FirstName",
40"isExactMatch":true,
41"label":"First Name"
42}, {
43"doCreate":true,
44"doFind":true,
45"fieldName":"LastName",
46"isExactMatch":true,
47"label":"Last Name"
48}, {
49"doCreate":true,
50"doFind":true,
51"fieldName":"Email",
52"isExactMatch":true,
53"label":"Email"
54}],
55}, {
56"entityName":"Case",
57"showOnCreate": true,
58"saveToTranscript": "CaseId",
59"entityFieldMaps": [{
60"isExactMatch": false,
61"fieldName": "Subject",
62"doCreate": true,
63"doFind": false,
64"label": "Issue"
65}, {
66"isExactMatch": false,
67"fieldName": "Status",
68"doCreate": true,
69"doFind": false,
70"label": "Status"
71}, {
72"isExactMatch": false,
73"fieldName": "Origin",
74"doCreate": true,
75"doFind": false,
76"label": "Origin"
77}]
78}];
79})();

スニペット設定ファイルの更新

JavaScript ファイルを変更する手順は次のとおりです。この手順に従えば、組み込みサービスのコードスニペットを再生成したり、組み込みチャットコンポーネントの設定を編集したりする必要がありません。

[設定] の [静的リソース] に移動します。
古い JavaScript ファイルの静的リソースの横にある [編集] をクリックします。
更新した JavaScript ファイルをアップロードします。
[保存] をクリックします。

静的リソース名は変更されないため、その他の設定を変更する必要はありません。

Web 用組み込みサービス開発者ガイド