はじめに

本記事では、Salesforce の Messaging で作成済みのチャットウィジェットを外部Webサイトに埋め込み、検証するための手順を解説します。ここではチャット自体の作成方法は省略し、チャットが動作する状態になっている前提で、外部サイトの準備とSalesforce側の設定に焦点を当てます。

チャット自体の作成方法については、こちらのサイトが非常にわかりやすいので参考にして見てください。
- https://www.sohobb.jp/event/salesforce_messaging_miaw_settings_-3part_series_part-1/
- https://www.sohobb.jp/event/salesforce_messaging_miaw_settings_-3part_series_part-2/

1. 外部サイトの準備

外部サイトにチャットウィジェットを埋め込むため、以下の手順で検証用ページを用意します。

1.1 コードスニペットの取得と index.html の作成

Salesforce から提供されたチャットウィジェット用のコードスニペット（meta タグ、JavaScript 初期化コード、bootstrap.js の読み込み）を抜き出し、以下のようなシンプルな HTML ページ（例: index.html）を作成します。抜き出したチャットのコードスニペットは変更する必要などなく、そのまま貼り付けてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <!-- モバイル対応用 -->
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  <title>チャット検証ページ</title>
  <!-- 必要に応じたCSSも追加 -->
</head>
<body>
  <h1>チャット検証ページ</h1>

  <!-- チャットウィジェットの初期化コード -->
  <script type="text/javascript">
    function initEmbeddedMessaging() {
      try {
        embeddedservice_bootstrap.settings.language = 'ja'; // 'ja' で日本語に設定
        embeddedservice_bootstrap.init(
          'xxxxxxxxxxx', // Deployment ID（実際の値に合わせて変更）
          'xxxxxxxxxxx',      // チャットサービス名
          'https://xxxxxxxxxx.sandbox.my.site.com/ESWChatService1738458709591', // サービスURL
          {
            scrt2URL: 'https://xxxxxxxxxx.sandbox.my.salesforce-scrt.com'
          }
        );
      } catch (err) {
        console.error('Error loading Embedded Messaging: ', err);
      }
    }
  </script>
  <script type="text/javascript" src="https://xxxxxxxxxx.sandbox.my.site.com/ESWChatService1738458709591/assets/js/bootstrap.min.js" onload="initEmbeddedMessaging()"></script>
</body>
</html>

1.2 ホスティング環境の選定

ここら辺が少しめんどくさいのですが、上記のhtmlをローカルなどで動かしてもCORSエラーが出てしまいます。よってSalesforce 側で CORS の設定をする必要があるのですが、CORS の設定が https 経由のURLしか設定できません。
なので、ホスティングする場所を考える必要があります。
色々やり方あると思うのですが、一番早く、簡単にとりあえず外部サイトに埋め込んで検証したい人向けの方法を考えたところ、AWS Amplify が一番いいと思ったので、ここでは Amplify へのデプロイを説明していきます。

(AWS S3 で静的ホスティングという機能もあるのですが、HTTP 通信となってしまうため、ここでは使用できない）

手順概要

S3にバケットを作成する
作成した index.html を S3 にアップロードする。
Amplify のホスティング機能を利用して、HTTPS 対応の URL でコンテンツを配信する。
- Amplify の設定画面へ移動
- 「新しいアプリを作成」をクリック
- 「Gitなしでデプロイ」を選択して次へ
- Amazon S3を選択して「S3を閲覧」をクリック
- 作成したバケットを選択
- ロケーションが設定できたら、「保存してデプロイ」を押す
- URLが発行されていることを確認する
- ここにアクセスして画面が表示されたら、一旦OK(この状態では、まだSFの設定をしていないため、CORSエラーが出ていると思います)

2. Salesforce側の設定

外部サイトでチャットウィジェットを正しく表示させるため、Salesforce 側の設定を行なっていきます。

2.1 CORS 設定の追加

Salesforce 設定内の「CORS 設定」で、Amplify で発行される HTTPS のホスティング URL（例: https://your-app.amplifyapp.com）を許可リストに追加してください。これにより、外部サイトから Salesforce のリソースへのリクエストが許可されます。

2.2 Trusted Domains for Inline Frames の設定

また、Salesforce の組み込みサービスで作成されたチャットのエンドポイント（サイト）の CSP 設定で、「Trusted Domains for Inline Frames」にも同様に Amplify のホスティング URL を追加する必要があります。これにより、Salesforce 側が指定するフレーム埋め込み可能なドメインに、Amplify にデプロイされているサイトが含まれるようになります。

サービスリリースの時に設定したドメインの「サイト」を開きます
サイトを開いたら、「Trusted Domains for Inline Frames」にて、Amplifyのエンドポイントのドメインを登録します
CORSの設定とサイトのTrusted Domains for Inline Framesを設定してもらえると下記のようにチャットのアイコンが表示されるようになると思います

3. まとめ

以上の手順により、既に稼働するチャットウィジェットを外部サイトに埋め込み、検証する環境が構築できます。

外部サイトの準備: コードスニペットを用いて index.html を作成し、S3にアップロード後、Amplify 経由で HTTPS ホスティングを実現。
Salesforce側の設定: Amplify のホスティングURLを CORS 設定と「Trusted Domains for Inline Frames」に追加。

以上、検証用のチャット環境の外部サイトへの埋め込み方法の紹介でした。この記事が皆さんの検証環境構築の参考になれば幸いです。