【第537回】 Agentforce ： ブラウザ言語に応じた拡張チャットの多言語表示
本記事では、サービスエージェントを外部 Web サイトに表示した場合に、ブラウザ言語に合わせてチャットを多言語化する方法 を書いておきます。
これにより、例えば、サービスエージェント 拡張チャット v2 の「Ask Me Anything」のテキストなどを編集できるようになります。
補足：私がサポートに確認したところ、現時点では「エージェント名」の多言語化には対応していないようです。そのため、多言語対応が必要な場合は、英語のエージェント名を設定しておくのが無難でしょう。今後のリリースで対応されることを期待したいですね。
翻訳言語設定
1. 設定で「翻訳言語設定」を検索し、機能が有効化されていない場合は有効化します。
2. 言語を追加していきます。
3. 今回、「英語」「日本語」「韓国語」「中国語（簡体字）」「中国語（繁体字）」を作成するので、まず「英語」を登録し、Active にチェックを入れ、翻訳者としてユーザーを選択します。
翻訳者とは、その言語の翻訳を作成・編集できるユーザーのことです。
4. 「日本語」「韓国語」「中国語（簡体字）」「中国語（繁体字）」を同じように設定します。
5. 言語の設定が終わったら、設定 ＞「組み込みサービスリリース」に移動し、拡張チャット v2 で「カスタム表示ラベルを設定」をクリックします。
6. まず言語を「日本語」に切り替えて、チャットグループで「一般」を選択します。
7. 表示ラベルグループで「すべて」を選択します。
8. 表示ラベル種別を Standard にすると、設定可能な一覧が表示されます。カスタム表示ラベルを入力して「保存」します。もちろん、標準の表示ラベルで問題なければ標準のままでも問題ありません。
今回は「Ask Me Anything」のボタンに該当する「何か質問してください」を「ご用件に合わせてご案内します」に変更します。
9. すべてのテキストを編集できたら「完了」をクリックして終了します。
10. 他の言語でも同じように設定します。
コードスニペットの変更
1. 「組み込みサービスリリース」からコードスニペットを取得します。
2. 通常は、以下のようなコードになっていると思います。
<script type='text/javascript'>
function initEmbeddedMessaging() {
try {
embeddedservice_bootstrap.settings.language = 'en_US'; // For example, enter 'en' or 'en-US'
embeddedservice_bootstrap.init(
'00Dg7000005ArbF',
'Service_Agent',
'https://na1777983780331.my.site.com/ESWServiceAgent1780374048210',
{
scrt2URL: 'https://na1777983780331.my.salesforce-scrt.com'
}
);
} catch (err) {
console.error('Error loading Embedded Messaging: ', err);
}
};
</script>
<script type='text/javascript' src="/https://na1777983780331.my.site.com/ESWServiceAgent1780374048210/assets/js/bootstrap.min.js" onload='initEmbeddedMessaging()'></script>
3. このコードを、以下のように変更します。
<script type='text/javascript'>
function initEmbeddedMessaging() {
try {
const userLang = (navigator.language || navigator.userLanguage || 'en').toLowerCase();
let chatLang = 'en_US';
if (userLang.startsWith('ja')) {
chatLang = 'ja';
} else if (userLang.startsWith('ko')) {
chatLang = 'ko';
} else if (userLang.startsWith('zh-cn') || userLang.startsWith('zh-sg')) {
chatLang = 'zh_CN';
} else if (userLang.startsWith('zh-tw') || userLang.startsWith('zh-hk') || userLang.startsWith('zh-mo')) {
chatLang = 'zh_TW';
}
embeddedservice_bootstrap.settings.language = chatLang;
embeddedservice_bootstrap.init(
'00Dg7000005ArbF',
'Service_Agent',
'https://na1777983780331.my.site.com/ESWServiceAgent1780374048210',
{
scrt2URL: 'https://na1777983780331.my.salesforce-scrt.com'
}
);
} catch (err) {
console.error('Error loading Embedded Messaging: ', err);
}
}
</script>
<script type='text/javascript'
src="/https://na1777983780331.my.site.com/ESWServiceAgent1780374048210/assets/js/bootstrap.min.js"
onload='initEmbeddedMessaging()'>
</script>4. 主に変更するのは、以下の部分です。
この部分で、ブラウザの言語設定を取得し、その言語に応じて Agentforce のチャット表示言語を切り替えています。
const userLang = (navigator.language || navigator.userLanguage || 'en').toLowerCase();
let chatLang = 'en_US';
if (userLang.startsWith('ja')) {
chatLang = 'ja';
} else if (userLang.startsWith('ko')) {
chatLang = 'ko';
} else if (userLang.startsWith('zh-cn') || userLang.startsWith('zh-sg')) {
chatLang = 'zh_CN';
} else if (userLang.startsWith('zh-tw') || userLang.startsWith('zh-hk') || userLang.startsWith('zh-mo')) {
chatLang = 'zh_TW';
}
embeddedservice_bootstrap.settings.language = chatLang;なお、この部分は、上記の例を参考にして生成 AI に依頼してしまうのが早いと思います。「デフォルト言語」と「利用したい言語」を指定すれば、環境に合わせたコードに調整してくれるはずです。
Tips：ブラウザが返す言語コードは環境によって異なります。
例えば、日本語の場合でも ja または ja-JP、韓国語の場合でも ko または ko-KR が返されることがあります。
また、中国語については簡体字と繁体字を区別するため、zh-CN（簡体字）や zh-TW（繁体字）、zh-HK（繁体字・香港）などの形式で返されます。
そのため、特定の値との完全一致ではなく、startsWith() を利用して判定することをおすすめします。
5. あとは、変更後のコードを外部 Web サイトに埋め込めば完了です。
実際に試す
ブラウザ言語を変更して動作確認する場合、Google Chrome であれば、アドレスバーに以下を入力します。
chrome://settings/languagesその後、表示言語を切り替えて、チャットボタンやチャットウィンドウの表示が変わるか確認してください。
以下のように、ブラウザ言語に応じてチャット表示が切り替われば成功です。
英語の場合
日本語の場合
韓国語の場合
中国語（簡体字）の場合
中国語（繁体字）の場合
いかがでしたでしょうか。
今回の内容は検索してもなかなか見つからなかったため、私の方でメモとして残しておきました。
Agentforce のチャットを多言語で提供する場合、ブラウザ言語に応じて表示言語を切り替える対応は非常に重要です。
特に、日本語・英語・韓国語・中国語など、複数言語に対応する企業では、実装しておきたい設定だと思います。
今回は以上です。