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

組み込みサービスコードスニペットからの設定の取得

組み込みサービス Aura コンポーネントで使用する設定を取得します。組み込みサービスリリースに割り当てられたチャットボタン ID とチャットリリース ID、およびエージェントとチャットボットのアバター画像 URL を取得できます。

Aura メソッド getLiveAgentSettings() を使用して、使用する設定 liveAgentButtonId、liveAgentDeploymentId、chatbotAvatarImgURL、avatarImgURL を取得します。

次の例は、lightningsnapin:settingsAPI コンポーネントをカスタム事前チャットコンポーネントと共に使用する方法を示しています。事前チャットコンポーネントでは、チャットウィンドウで特定のチャットボタンが使用された場合に異なる項目と CSS クラスが使用されます。

この例は、完全な事前チャットコンポーネントではありません。残りのコードを追加する場所はコードコメントで示されています。

重要

開始する前に、組み込みサービスリリースがすでに設定されていることを確認します。また、組み込みサービスリリースの設定に基づいて変更を行う前に、機能する組み込みサービス Aura コンポーネントがある必要があります。

開始するには、開発者コンソールに移動し、いずれかの組み込みサービス Aura コンポーネントを開きます。

コンポーネントマークアップファイルに設定 API コンポーネントを作成する行を追加します。

1<!-- Your pre-chat component's markup file -->
2<aura:component implements="lightningsnapin:prechatUI">
3
4    <!-- Contains a method for fetching Chat settings -->
5    <lightningsnapin:settingsAPI aura:id="settingsAPI"/>
6
7    <!-- The rest of your custom pre-chat component goes here -->
8</aura:component>

init ハンドラ内で Aura メソッド getLiveAgentSettings() を使用して目的の設定を取得します。

この例では、現在のチャットウィンドウによって特定のチャットボタンが使用されたときに [名] 項目と [姓] 項目を次のようにカスタマイズします。

訪問者の名前を「Anonymous Visitor (匿名の訪問者)」として事前入力します。
項目を参照のみにします。
anonymousField という CSS クラスを追加します。

1// Your pre-chat component’s controller file
2({
3    // Your pre-chat component's init handler
4    onInit: function(cmp, evt, hlp) {
5        // The ID of the Chat button for which you want to customize your pre-chat fields
6        var ANONYMOUS_BUTTON_ID = "(your button id here)";
7
8        // Fetch the ID of the Chat button currently in use
9        var buttonId = cmp.find("settingsAPI").getLiveAgentSettings().liveAgentButtonId;
10
11        // Get your pre-chat fields. This example assumes that your pre-chat form includes First Name and Last Name fields.
12        var prechatFields = cmp.find("prechatAPI").getPrechatFields();
13        var prechatFieldComponents = prechatFields.map(function(field) {
14            // If the specified button is currently in use, customize the First Name and Last Name fields
15            if (buttonId === ANONYMOUS_BUTTON_ID) {
16                if (field.label === "First Name") {
17                    // Pre-populate the value, make the field read-only, and add a CSS class
18                    field.value = "Anonymous";
19                    field.readOnly = true;
20                    field.className += " anonymousField";
21                } else if (field.label === "Last Name") {
22                    field.value = "Visitor";
23                    field.readOnly = true;
24                    field.className += " anonymousField";
25                }
26            }
27
28            return [
29                "ui:inputText",
30                {
31                    "aura:id": "prechatField",
32                    required: field.required,
33                    label: field.label,
34                    disabled: field.readOnly,
35                    maxlength: field.maxLength,
36                    class: field.className,
37                    value: field.value
38                }
39            ];
40        });
41
42        $A.createComponents(prechatFieldComponents, function(components, status) {
43            if (status === "SUCCESS") {
44                cmp.set("v.prechatFieldComponents", components);
45            }
46        });
47    },
48
49    // The rest of your component's controller goes here
50})

コンポーネントの CSS ファイル内に新しい anonymousField CSS クラスの CSS ルールを追加します。

1/* Your pre-chat component's CSS file */
2
3.THIS .anonymousField {
4    background-color: rgba(255,0,0,0.3);
5}
6
7/* The rest of your component's CSS goes here */

コンポーネントを保存します。

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

組み込みサービスコードスニペットからの設定の取得

関連項目: