Salesforce B2B Commerce の LWR テンプレートで Einstein Bot を利用してみる

※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。



今回の記事では Service Cloud の [MIAW](https://help.salesforce.com/s/articleView?id=sf.reimagine_miaw.htm&type=5) (Messaging for In-App and Web) を利用して [B2B Commerce の LWR テンプレート](https://developer.salesforce.com/docs/commerce/lwr-migration/guide/create-lwr-template.html)に [Einstein Bot](https://developer.salesforce.com/docs/atlas.ja-jp.bot_cookbook.meta/bot_cookbook/bot_cookbook_overview.htm) を[組み込みメッセージングコンポーネント](https://help.salesforce.com/s/articleView?id=sf.rss_embedded_messaging.htm&type=5)を利用して組み込んでいきたいと思います。
※ 今回は B2B Commerce サイトの設定は含みませんのでご了承ください。設定方法は [PDF](https://resources.docs.salesforce.com/latest/latest/en-us/sfdc/pdf/b2b_standalone_setup.pdf) や[ヘルプ](https://help.salesforce.com/s/articleView?id=sf.comm_intro.htm&type=5)をご確認ください。


## 完成系

最終的に出来上がる見た目はこのようになります。Einstein Bot の設定は変更しないので、挨拶のみ表示されます。
![スクリーンショット 2023-06-22 12.46.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/68c95006-2031-6580-f9f4-deec1a177b4b.png)




## やってみる

### 1. ルーティングの作成

設定から「ルーティング」で検索し、**ルーティング設定** に遷移。下記のように「Sample Routing」という設定を新規で作成します。
![スクリーンショット 2023-06-22 12.44.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/3f7d367d-c2dd-1cb5-23bf-8cfe5d493db6.png)




### 2. キューを作成

設定から「キュー」で検索し、**ユーザ ＞ キュー** に遷移。下記のように「Sample Queue」という設定を新規で作成します。
この際 MessagingSession（メッセージングセッション） をキューの取り扱うオブジェクトの設定に追加し、先ほど設定したルーティングも設定します。
![スクリーンショット 2023-06-22 12.45.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/c0acb7bb-5b71-1a6c-2268-1086620af74b.png)




### 3. Einstein Bot （必須：拡張）を作成。有効化。

設定から「 ボット」で検索し、**Einstein ＞ Einstein プラットフォーム ＞ Einstein ボット** に遷移し、新たなボットを作成します。 

:::note warn
この際必ず「拡張ボット」を選択してください。
:::
![スクリーンショット 2023-06-22 11.18.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/221659c5-fcc8-4a4c-7498-9e8adf88c7ce.png)



今回は拡張ボットを選択後、次に進んでいくと設定があります。今回は作成するボットの方法として「最初から開始」を選択し、「Sample Bot」という名前をつけ、使用する言語として「日本語」を選択しました。
挨拶はデフォルトのまま次に進むと、下記の「自分のボットの受信オムニチャネルフローを作成」にチェックした状態で次に進んでください。
![スクリーンショット 2023-06-22 11.19.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/43a2e2b8-8b95-b305-3801-bf2ad97a8ca0.png)

最後に「続行」を選択して完了します。
![スクリーンショット 2023-06-22 11.19.21 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/c943c947-46a3-c3d0-bd10-008f8f88b8ca.png)



すると下記のようなボットがされるので右上の「有効化」ボタンから有効化しておきましょう。

:::note warn
有効化しておかないと後の設定に表示されないので注意。
:::
![スクリーンショット 2023-06-22 11.23.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/35caa3c3-b2ff-6e93-15da-eeae078217e9.png)



### 4.  フローの設定

設定から「フロー」で検索し、**プロセスの自動化 ＞ フロー** に遷移。
下記のように作成したEinstein ボットの名前がついたフローがあるのでそちらを選択します。

![スクリーンショット 2023-06-22 11.23.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/54937ec2-a493-6b50-3b4a-93a2fe2113bb.png)


フロー内の「作業を転送」アクション内の代替キューに先ほど作成したキューを設定します。最後に右上の「別名で保存」から保存し、「有効化」ボタンで有効にしておきましょう。

:::note warn 
ここでも必ず有効化は忘れずに！
:::
![スクリーンショット 2023-06-22 12.45.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/8e4d7890-48e0-0229-94a6-8b79b5cb2bf8.png)



### 5. メッセージング設定を行う

設定から「メッセージング」で検索し、**機能設定 ＞ サービス ＞ メッセージング ＞ メッセージング設定** に遷移し、新たなチャネルを作成する。今回は「Sample Messaging Channel」という名前にしました。
![スクリーンショット 2023-06-22 12.17.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/8eaa55a4-080e-77e2-8138-5f49ff4b6b19.png)


保存後さらに、下記のようにオムニチャネルルーティングに「オムニフロー」を設定し、先ほど作成したフローとキューを設定しておきます。
![スクリーンショット 2023-06-22 12.19.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/e414e435-1f46-77c8-4510-39184360a6fb.png)


設定が完了したら必ず有功化しておきましょう。

:::note warn 
ここでも必ず有効化は忘れずに！
:::
![スクリーンショット 2023-06-22 12.30.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/7375cd48-d163-d1db-e3bf-7cee6b0b909c.png)




### 6. 組み込みサービスの作成

設定から「リリース」で検索し、**機能設定 ＞ サービス ＞ 組み込みサービス ＞ 組み込みサービスリリース** に遷移し、新たなリリースを作成します。
まずは「アプリ内および Web のメッセージング」を選択します。
![スクリーンショット 2023-06-22 12.19.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/a14fb1be-89ad-d2ec-5952-b025edf4f981.png)


次に「Web」を選択します。
![スクリーンショット 2023-06-22 12.19.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/18f00466-d840-c641-0fcf-b4ebb47c927a.png)


最後に名前（今回は「Sample Embedded Chat Release」）と使用する B2B サイトのドメインと先ほど作成したチャネルを設定し、保存します。
![スクリーンショット 2023-06-22 12.21.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/01899c91-52ec-9884-fcbe-76230c014f65.png)

保存後、詳細ページに行き、公開します。

:::note warn 
ここでも必ず公開は忘れずに！
:::

![スクリーンショット 2023-10-18 18.01.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/e35dfa0d-b2ac-675c-59e1-2d98b18db371.png)

### 7. ストアフロントのサイト URL をCORS に設定


設定から「CORS」で検索し、**セキュリティ ＞ CORS** に遷移します。B2B サイトの URL に対してを CORS を設定します。
![スクリーンショット 2023-06-22 17.27.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/ce1eeb97-065b-e690-8692-bc6eee8349f8.png)




### 8. （ゲストユーザを有効にしている時のみ） サイトの設定

:::note warn 
この内容は正式かはわかりませんが、この方法でチャット表示後にセッションが消えてしまう問題を解決できたので記載しています。
:::
設定から「サイト」で検索し、**機能設定 ＞ デジタルエクスペリエンス ＞ すべてのサイト** に遷移します。
チャットメッセージ用のサイト（「ESW_」から始まる）の横にある「ワークスペース」をクリックし、さらに「管理 > メンバー」と遷移していきます。
![スクリーンショット 2023-06-22 17.32.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/48d1f3e5-6acb-f099-cb5e-a38e0228317d.png)


B2B サイトに設定いるプロファイルと同じプロファイルを設定し、保存します。
![スクリーンショット 2023-06-22 17.33.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/52cc146d-8b53-b077-85fa-5e97ef1aaa6b.png)


### 9. エクスペリエンスビルダーからのコンポーネントの設定

最後にB2B サイトのエクスペリエンスビルダーから「組み込みメッセージング」をフッターに設置します。
![スクリーンショット 2023-06-22 12.22.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/82aee4b0-5a59-affb-3dae-a9505bc9a69f.png)



これまで設定きた内容を入力したら、「公開」ボタンを押して公開してください。

:::note warn 
公開ボタンを押すのをお忘れなく！
:::
![スクリーンショット 2023-06-22 12.23.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/f041d9b7-87f6-3236-817c-2a727fc972af.png)



## 参考

* [組み込みメッセージングについて](https://help.salesforce.com/s/articleView?id=sf.rss_embedded_messaging.htm&type=5)
* [チャット画面の色など、チャットをカスタマイズしたい時](https://help.salesforce.com/s/articleView?id=sf.miaw_deployment_web_2.htm&type=5)
* MIAW に関するYoutube
    * https://www.youtube.com/watch?v=hL_X-Kxf9Nc
    * https://www.youtube.com/watch?v=nzJtlzWBCoo