PreChatフォームのカスタマイズとカスタム項目保存

PreChat とは

Salesforce では、PreChat（事前チャット）機能を提供しています。この機能を使用すると、チャット会話を開始する前に顧客とのやり取りを行うことができます。PreChat 機能では、顧客情報を収集し、顧客の状況に基づいてチャット体験をカスタマイズすることができます。以下に Salesforce の PreChat の概要を説明します。

PreChat 設定: PreChat を有効にするためには、Salesforce Live Agent の設定で構成する必要があります。これには、顧客から収集したい PreChat フォームのフィールドを定義することが含まれます。例えば、名前、メールアドレス、または必要なカスタム情報などです。
PreChat フォーム: 顧客がウェブサイトを訪れてチャットを開始すると、PreChat フォームが表示され、必要な情報を収集します。フォームは、組織のブランディングや特定の要件に合わせてカスタマイズすることができます。
データ収集: 顧客が PreChat フォームに入力すると、提供されたデータはチャットのトランスクリプトとしてキャプチャされます。特定のフィールドが必須かオプションかを指定することができます。
ルーティングとカスタマイズ: PreChat フォームが送信されると、Salesforce Live Agent は収集された情報を使用してチャットリクエストのルーティング方法を決定します。たとえば、顧客の入力に基づいてチャットを特定のエージェントや部門にルーティングすることができます。
パーソナライズ: PreChat データを使用して、エージェントに顧客情報を表示することで、チャット体験をパーソナライズすることができます。これにより、会話が始まる前にエージェントが顧客の問い合わせや懸念についての文脈を把握することができ、全体的な顧客体験が向上します。
統合: 収集された PreChat データは、他の Salesforce の機能や機能と統合することができます。たとえば、PreChat 情報に基づいて Salesforce CRM でリード、コンタクト、ケースを自動的に作成することができます。
チャット後のアクション: チャットセッションが終了すると、PreChat データとチャットのトランスクリプトは、さらなる分析や報告、顧客へのフォローアップに使用することができます。

PreChat フォームのカスタマイズ

Salesforce Experience Cloud における PreChat（事前チャット）のカスタマイズ方法について説明します。

PreChat（事前チャット）フォームのカスタマイズ:

PreChat（事前チャット）フォームは、顧客から収集したい情報を入力するためのフォームです。フォームの外観やフィールドの設定をカスタマイズすることができます。
フォームの外観やスタイルをカスタマイズするには、CSS（カスケーディングスタイルシート）を使用してフォームのスタイルを変更します。
フォームに表示するフィールドをカスタマイズするには、PreChat（事前チャット）フォームの設定画面で必要なフィールドを追加・削除したり、フィールドの表示順序を変更したりすることができます。

PreChat（事前チャット）フィールドのバリデーション:

PreChat（事前チャット）フィールドに対してバリデーションルールを設定することができます。これにより、顧客が正しい形式や必要な情報を入力するように制限することができます。
バリデーションルールは、必須フィールドの設定や特定のフィールドの入力パターンのチェックなど、顧客が正しい情報を提供することができるようにサポートします。

PreChat（事前チャット）ルーティングのカスタマイズ:

PreChat（事前チャット）ルーティングは、チャットリクエストを適切なエージェントやグループに割り当てるためのルールを設定するものです。このルーティングの条件や基準をカスタマイズすることができます。
ルーティング条件として、PreChat（事前チャット）フォームで収集した情報やチャットリクエストの属性を活用することができます。例えば、特定のキーワードや選択肢に基づいてルーティングを行ったり、特定のエージェントやグループに優先的に割り当てることができます。

LWC で PreChat フォームのカスタマイズ

Salesforce Lightning Web Component（LWC）を使用して Chat フォームをカスタマイズする手順を説明します。

Salesforce Developer Console や Salesforce CLI を使用して、新しい LWC コンポーネントを作成します。例えば、chatForm という名前の LWC コンポーネントを作成します。

chatForm.html

<template>
  <template if:true="{backgroundImgURL}">
    <img src="{backgroundImgURL}" />
  </template>
  <lightning-card title="Prechat Form">
    <template class="slds-m-around_medium" for:each="{fields}" for:item="field">
      <div key="{field.name}">
        <lightning-input
          key="{field.name}"
          name="{field.name}"
          label="{field.label}"
          value="{field.value}"
          max-length="{field.maxLength}"
          required="{field.required}"
        ></lightning-input>
      </div>
    </template>
  </lightning-card>
  <lightning-button
    label="{startChatLabel}"
    title="{startChatLabel}"
    onclick="{handleStartChat}"
    class="slds-m-left_x-small"
  >
  </lightning-button>
</template>

chatForm.js

import BasePrechat from "lightningsnapin/basePrechat";
import { api, track } from "lwc";
import startChatLabel from "@salesforce/label/c.StartChat";

export default class ChatForm extends BasePrechat {
  @api prechatFields;
  @api backgroundImgURL;
  @track fields;
  @track namelist;
  startChatLabel;

  /**
   * Set the button label and prepare the prechat fields to be shown in the form.
   */
  connectedCallback() {
    this.startChatLabel = startChatLabel;
    this.fields = this.prechatFields.map((field) => {
      const { label, name, value, required, maxLength } = field;

      return { label, value, name, required, maxLength };
    });
    this.namelist = this.fields.map((field) => field.name);
  }

  /**
   * Focus on the first input after this component renders.
   */
  renderedCallback() {
    this.template.querySelector("lightning-input").focus();
  }

  /**
   * On clicking the 'Start Chatting' button, send a chat request.
   */
  handleStartChat() {
    this.template.querySelectorAll("lightning-input").forEach((input) => {
      this.fields[this.namelist.indexOf(input.name)].value = input.value;
    });
    if (this.validateFields(this.fields).valid) {
      this.startChat(this.fields);
    } else {
      // Error handling if fields do not pass validation.
    }
  }
}

chatForm.css

:host {
  display: flex;
  flex-direction: column;
}

lightning-button {
  padding-top: 1em;
}

chatForm.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>48.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightningSnapin__PreChat</target>
  </targets>
</LightningComponentBundle>

LWC で PreChat カスタム項目の保存

カスタム項目を保存するために、chatForm のソースを修正

import BasePrechat from "lightningsnapin/basePrechat";
import { api, track } from "lwc";
import startChatLabel from "@salesforce/label/c.StartChat";

export default class ChatForm extends BasePrechat {
  @api prechatFields;
  @api backgroundImgURL;
  @track fields;
  @track namelist;
  startChatLabel;

  /**
   * Set the button label and prepare the prechat fields to be shown in the form.
   */
  connectedCallback() {
    this.startChatLabel = startChatLabel;
    this.fields = this.prechatFields.map((field) => {
      const { label, name, value, required, maxLength } = field;

      return { label, value, name, required, maxLength };
    });
    this.namelist = this.fields.map((field) => field.name);
  }

  /**
   * Focus on the first input after this component renders.
   */
  renderedCallback() {
    this.template.querySelector("lightning-input").focus();
  }

  /**
   * On clicking the 'Start Chatting' button, send a chat request.
   */
  handleStartChat() {
    this.template.querySelectorAll("lightning-input").forEach((input) => {
      this.fields[this.namelist.indexOf(input.name)].value = input.value;
+      this.dispatchCustomEvent(input.name, input.value);
    });
    if (this.validateFields(this.fields).valid) {
      this.startChat(this.fields);
    } else {
      // Error handling if fields do not pass validation.
    }
  }

+  /**
+   * dispatchCustomEvent
+   */
+  dispatchCustomEvent(label, value) {
+    const preChatEvent = new CustomEvent('setCustomField', {
+        detail: {
+            customFieldLabel: label,
+            customFieldValue: value
+        }
+    });
+    document.dispatchEvent(preChatEvent);
+  }
}

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

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

chatEnhancedSettings.jsという名前のファイルを作成する

window._snapinsSnippetSettingsFile = (function(){
    //保存するカスタム項目を宣言
    var fields = [
        {
            label: 'Email',
            transcriptFields: ['Email__c']
        },
        ... // ⇐ ここは複数定義可能
    ];
    embedded_svc.snippetSettingsFile.extraPrechatFormDetails = fields;
    //カスタムイベント監視
    document.addEventListener(
        'setCustomField',
        function(event) {
            embedded_svc.snippetSettingsFile.extraPrechatFormDetails.forEach(element => {
                if(element.label === event.detail.customFieldLabel) {
                    element.value = event.detail.customFieldValue;
                }
            });
        },
        false
    );
});