More than 1 year has passed since last update.

SalesforceのExperience Cloudの組み込みサービスチャットをURLのlanguageパラメータで言語切替

Salesforce

Last updated at 2023-11-24Posted at 2023-11-08

やりたいこと

Experience Cloud上で組み込みサービスチャットを日本語英語で動作させたい
エクスペリエンスビルダーで日英各ページ作成済み、かつ必要なページに組み込みサービスチャット配置済み
日本語英語を使うEinsteinボットを作成して、各ダイアログのメッセージに日英メッセージを登録するところまではやってある
この後、URLのlanguageパラメータ(ページの言語切替に使われる標準パラメータ)に応じてチャット/ボットの日英切替を行いたい

この後やることの概要

チャットボタンの日英文言はエクスペリエンスビルダーの組み込みサービスチャット設定で行う
URLから取得した言語のチャットウィンドウへの言語設定はスニペットで行う
URLから取得した言語はスニペットでチャットのトランスクリプトにセットし、Apexで取り出してチャットの会話言語にセットする

チャットのトランスクリプトオブジェクトにカスタム属性「言語」作成

オブジェクトマネージャーでチャットのトランスクリプトオブジェクトに新規カスタム項目追加
1. データ型：選択リスト
2. 表示ラベル：言語
3. 値：
  1. 各値を改行で区切って入力します：チェック
    1. ja
    2. en_US
4. 最初の値をデフォルト値とする：チェック
5. 値セットで定義された値に選択リストを制限します：チェック
6. 項目名：Language
7. 値の入力を必須にする：チェック

スニペットファイル作成＆アップロード

以下のファイルをローカルで作成、文字コードはUTF-8

SnapInCodeSnippetSettings.js

window._snapinsSnippetSettingsFile = (function () {
    // URLからlanguageパラメータの値を取得
    const paramLanguage = (new URL(document.location)).searchParams.get('language');

    // 言語を決定
    const language = paramLanguage === 'en_US' ? 'en_US' : 'ja';

    // 言語をチャットウィンドウに設定
    embedded_svc.snippetSettingsFile.language = language;

    // 言語をチャットのトランスクリプトに設定
    embedded_svc.snippetSettingsFile.extraPrechatFormDetails = [{
        'transcriptFields': ["Language__c"],
        'value': language
    }];
})();

Salesforceの設定の静的リソースで新規ボタンを押下して作成ファイルをアップロード
1. 名前：SnapInCodeSnippetSettings
2. ファイル：作成ファイル
3. キャッシュコントロール：公開

Apexクラスを作成

設定のApexクラスで新規ボタンを押下してApexクラスを作成

EinsteinBotPrechatInfo.cls

public with sharing class EinsteinBotPrechatInfo {
  public class Input {
    @InvocableVariable(required=true)
    public ID routableID;
  }

  public class Output {
    @InvocableVariable(required=true)
    public String language;
  }

  @InvocableMethod(label='Get Einstein Bot Prechat Info')
  public static List<Output> getPrechatInfo(List<Input> inputs) {
    List<Output> outputs = new List<Output>();
    for (Input input : inputs) {
      // 指定されたIDのチャットのトランスクリプトのレコードを取得
      LiveChatTranscript liveChatTranscript = [
        SELECT Language__c
        FROM LiveChatTranscript
        WHERE Id = :input.routableID
        LIMIT 1
      ];

      // 当該レコードの言語を出力
      Output output = new Output();
      output.language = liveChatTranscript.Language__c;
      outputs.add(output);
    }
    return outputs;
  }
}

同様にテストクラス作成

EinsteinBotPrechatInfoTest.cls

@IsTest
public with sharing class EinsteinBotPrechatInfoTest {
  @IsTest(SeeAllData=true)
  public static void testGetPrechatInfoJa() {
    testGetPrechatInfo('ja');
  }

  @IsTest(SeeAllData=true)
  public static void testGetPrechatInfoEnUS() {
    testGetPrechatInfo('en_US');
  }

  private static void testGetPrechatInfo(String language) {
    // チャット訪問者のレコードを作成
    LiveChatVisitor liveChatVisitor = new LiveChatVisitor();
    insert liveChatVisitor;

    // 言語と作成したチャット訪問者のIDを指定してチャットのトランスクリプトのレコードを作成
    LiveChatTranscript liveChatTranscript = new LiveChatTranscript(
      Language__c = language,
      LiveChatVisitorId = liveChatVisitor.Id
    );
    insert liveChatTranscript;

    // 作成したチャットのトランスクリプトのIDを指定してGetPrechatInfo()実行
    EinsteinBotPrechatInfo.Input input = new EinsteinBotPrechatInfo.Input();
    input.routableID = liveChatTranscript.Id;
    List<EinsteinBotPrechatInfo.Input> inputs = new List<EinsteinBotPrechatInfo.Input>();
    inputs.add(input);
    List<EinsteinBotPrechatInfo.Output> outputs = EinsteinBotPrechatInfo.getPrechatInfo(
      inputs
    );

    // 結果確認
    System.assertEquals(outputs.size(), 1);
    System.assertEquals(outputs[0].language, language);
  }
}