Salesforce Lightning Web Component(LWC)を使用して、チャット会話用の Agent Assist UI モジュールと統合します。
始める前に
Agent Assist UI モジュールを Salesforce と統合するには、次のリソースへのアクセス権が必要です。
-
オペレーティング システムの推奨インストール手順に沿って操作します。
-
npm
を使用して Salesforce CLI をインストールすると、互換性の問題が発生することがわかっています。この問題を回避するには、pkg
(macOS)、exe
(Windows)、TAR
(Linux)のいずれかのインストール オプションを使用します。 -
手順に沿って
gcloud
コマンドをインストールし、gcloud auth login
を使用して認証します。 Salesforce UI
- インスタンス URL または Salesforce のログインページでログインし、次の点に注意してください。
- Salesforce の My Domain URL。マイ ドメインの URL を確認する手順は次のとおりです。
- メニューバー > [設定] メニューに移動します。
- [Setup] をクリックします。
- [クイック検索] で [My Domain] を検索します。ドメイン名は
MY-DOMAIN-NAME.develop.my.salesforce.com
の形式で指定します。
- Salesforce 組織 ID。組織 ID を確認する手順は次のとおりです。
- メニューバー > [設定] メニューに移動します。
- [Setup] をクリックします。
- [クイック検索] で「会社情報」を検索します。注: これらの統合手順は、Salesforce Developer Edition でのみテストされています。別のエディションを使用している場合は、機能ライセンスと Salesforce インターフェースに違いが生じる可能性があります。
- Salesforce の My Domain URL。マイ ドメインの URL を確認する手順は次のとおりです。
- インスタンス URL または Salesforce のログインページでログインし、次の点に注意してください。
-
- 手順に沿って統合を設定します。
- デプロイ スクリプトを実行する前に、
deploy.sh
を使用するか、プロジェクト ルートの.env
ファイルで次の環境変数を構成します。AUTH_OPTION
:SalesforceLWC
に設定します。SALESFORCE_DOMAIN
:YOUR_SUBDOMAIN.develop.lightning.force.com
に類似したドメイン名。この値は、Salesforce UI の前提条件でメモしました。https://
は含めないでください。SALESFORCE_ORGANIZATION_ID
: この値は、Salesforce UI の前提条件でメモしました。
ステップ 1: プロジェクトを設定する
Agent Assist UI モジュールの統合を開始する手順は次のとおりです。
次のコードを実行して、Agent Assist 統合リポジトリのクローンを作成し、プロジェクトを開きます。
git clone https://github.com/GoogleCloudPlatform/agent-assist-integrations cd salesforce/aa-lwc
次のコマンドを実行して、後で静的リソースとしてデプロイされる JS ファイルをダウンロードします。
npm run generate-static-resources npm install
ステップ 2: 環境を設定する
Agent Assist UI モジュールは、本番環境や開発環境などの特定の環境に統合できます。Salesforce では、これらの環境を「組織(org)」と呼びます。
Salesforce コンソールで組織を構成する
Salesforce コンソールで、次の手順に沿って Agent Assist 統合用に組織を構成します。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] で「オムニチャネル設定」を検索し、[オムニチャネル設定] をクリックします。
- [Enable Omni-Channel] をオンにします。
- [新しいウィンドウまたはタブでエージェントをオムニチャネルに自動的にログインする] を選択します。
- [保存] をクリックします。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] に「コミュニティ」と入力し、[デジタル エクスペリエンス] > [設定] をクリックします。
- [Enable Experience Workspaces] をオンにします。
- [保存] をクリックします。
Salesforce CLI を使用して組織を構成する
Salesforce CLI を使用して Agent Assist 統合用に組織を構成する手順は次のとおりです。
次のコードを実行し、通常使用する Salesforce のログイン情報を使用して CLI を認証します。
npm run login
次のコードを実行して、LWC を組織にデプロイします。
npm run deploy
ステップ 3: 外部クライアント アプリを作成する
Salesforce LWC は、クライアント認証情報の OAuth 2.0 フローを使用してユーザーを認証します。外部クライアント アプリは、クライアント認証情報フローを有効にします。アプリのコンシューマ キーとコンシューマ シークレットを使用して Salesforce LWC を構成し、Salesforce でユーザーを認証します。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] で「外部クライアント アプリ マネージャー」を検索します。
- [External Client App Manager] > [New External Client App] > [Create] をクリックし、次の情報を入力します。
- Connected App Name:
lwc auth
- API 名:
lwc_auth
- Contact Email:
your_email@example.com
- API(OAuth 設定の有効化) > OAuth の有効化: 選択済み
- API (Enable OAuth Settings) > Callback URL:
https://login.salesforce.com/services/oauth2/callback
- [API (Enable OAuth Settings)] > [Selected OAuth Scopes]: ID URL サービスにアクセスする
- API(OAuth 設定の有効化)> クライアント認証情報フローを有効にする: 選択済み
- Connected App Name:
- [作成] をクリックします。
- [External Client App Manager] > [New External Client App] > [Create] をクリックし、次の情報を入力します。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] で「外部クライアント アプリ マネージャー」を検索します。
- 接続済みアプリの名前 > [編集] をクリックします。
- [OAuth Policies] > [OAuth Flows and External Client App Enhancements] に移動します。
- [Enable Client Credentials Flow] が選択されていることを確認します。
- [Run As] にログイン ユーザー名を入力します。
- [保存] をクリックします。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] で「外部クライアント アプリ マネージャー」を検索します。
- 接続済みアプリの名前 > [編集] をクリックします。
- [OAuth Settings] > [App Settings] > [Consumer Key and Secret] に移動します。
- メールに送信された確認コードを入力します。
- コンシューマー キーとコンシューマー シークレットを安全な場所にコピーします。これらの値は後の手順で必要になります。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] で「CORS」を検索し、[編集] をクリックします。
- [OAuth エンドポイントの CORS を有効にする] をオンにします。
- [保存] をクリックします。
接続アプリの詳細については、次の Salesforce のリソースをご覧ください。
ステップ 4: チャット クライアントを構成する
Salesforce で Agent Assist UI モジュールを使用するには、エージェントのデスクトップにチャット クライアントが必要です。
アプリ内とウェブのメッセージングを設定する
メッセンジャーを設定する手順は次のとおりです。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] で「信頼できる URL」を検索し、[新しい信頼できる URL] をクリックします。
- API 名(
ui_connector
)を入力します。 - Agent Assist 統合バックエンドでデプロイした UI コネクタ Cloud Run サービス エンドポイントの URL を入力します。この URL は Cloud Run コンソールで確認できます。例:
https://UI_CONNECTOR_SUBDOMAIN.us-central1.run.app
。 - [CSP ディレクティブ] で、すべてのオプションを選択します。
- [Save & New] をクリックします。
- API 名(
twilio_flex
)を入力します。 - URL
https://flex.twilio.com
を入力します。 - [CSP ディレクティブ] で、すべてのオプションを選択します。
- [Save & New] をクリックします。
- API 名(
salesforce_domain
)を入力します。 - Salesforce ドメインの URL を
https://YOUR_SUBDOMAIN.my.salesforce.com
の形式で入力します。 - [CSP ディレクティブ] で、すべてのオプションを選択します。
- [保存] をクリックします。
- API 名(
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] で「キュー」を検索し、[新規] をクリックします。
- 次の情報を入力します。
- ラベル: メッセージ キュー
- キュー名: Messaging_Queue
- ルーティング構成: Messaging_Routing_Configuration
- [Supported Objects] をクリックし、「Messaging User, Messaging Session」を追加します。
- [Queue Members] をクリックし、「User: Your Login User」を追加します。
- [保存] をクリックします。
- 次の情報を入力します。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] で「Permission Sets」を検索します。
- [Messaging Agents Permission Set] をクリックします。
- [Service Presence Statuses Access] > [Edit] をクリックします。
- ステータス [Busy] と [Online - Messaging] を選択します。
- [追加] > [保存] をクリックします。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] に「Users」と入力して検索し、[Users] をクリックします。
- ユーザー名をクリックし、[Service Cloud User] が有効になっていることを確認します。
- ページで [Permission Set License Assignments] を探します。
- [割り当てを編集] をクリックし、[アプリ内ユーザーとウェブ ユーザー向けのメッセージ] をオンにします。
- [保存] をクリックします。
- ページで [権限セットの割り当て] を探します。
- [Edit Assignments] をクリックし、[Messaging Agent Permission Set] を選択します。
- [追加] > [保存] をクリックします。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] で「Messaging Settings」を検索し、[New Channel] をクリックします。
- [Messaging for In-App and Web] を選択します。
- [名前] に「Messaging Channel」と入力します。
- [保存] をクリックします。
- [Routing Type] を [Omni-Queue] に、[Queue] を [Messaging Queue] に設定します。
- [保存] をクリックし、[メッセージ設定] に移動します。
- メッセージ チャネルの名前をクリックし、[有効にする] をクリックします。
- 利用規約を読んだら、利用規約に同意します。
- メニューバー > [設定] メニューに移動し、[設定] をクリックします。[クイック検索] で「Embedded Service Deployments」を検索し、[New Deployment] をクリックします。
- [アプリ内とウェブのメッセージ] > [次へ] > [ウェブ] > [次へ] をクリックします。
- 次の詳細を入力します。
- 名前: Messaging Embedded Service Deployment
- Developer Name: Messaging_Embedded_Service_Deployment
- ドメイン: example.com
- チャネル: メッセージ チャネル
- [保存] をクリックします。デプロイが完了するまで待ちます。
- [Embedded Service Deployment] 設定で、[公開] をクリックします。
- [更新]、[テスト メッセージ] の順にクリックします。
アプリ内とウェブのメッセージングをテストする
メッセンジャーをテストする手順は次のとおりです。
- [Test Messaging] をクリックします。
- 新しいタブが読み込まれたら、吹き出しをクリックして新しいテスト会話を開始します。
- 「
"Test"
」などのメッセージを送信します。 - Salesforce のブラウザタブに移動します。
- [設定] ツールバーで、[アプリランチャー] メニューをクリックし、[サービス コンソール] を選択します。
- ユーティリティ ツールバーの [オムニチャネル] をクリックします。
- ステータスを [オンライン - メッセージ] に設定します。
- 着信メッセージを承認します。会話の Service Console の新しいタブが開きます。チャットの文字起こしは表示されません。
- メニューバー > [設定] メニューに移動します。
- [ページを編集] をクリックします。
- [Components](コンポーネント)メニューから、[Enhanced Conversation](拡張会話)を [Conversation](会話)ペインにドラッグします。
- [保存] > [有効にする] > [組織のデフォルトとして割り当てる] > [デスクトップ] > [戻る ] をクリックします。
- ページを更新する。
- ユーティリティ ツールバーの [オムニチャネル] をクリックします。
- ステータスを [オンライン - メッセージ] に設定します。
- 「テスト」メッセージに返信して、メッセージ機能が動作していることを確認します。
行き詰まって詳細情報が必要な場合は、包括的な Salesforce Messaging for In-App and Web 設定ガイドを参照してください。
ステップ 5: Salesforce LWC をインストールする
Lightning Experience エディタを使用して、Salesforce LWC をメッセージング セッション ページに追加する手順は次のとおりです。手順 4 のテスト会話を続けます。
- メニューバー > [設定] メニューに移動し、[ページの編集] をクリックします。
[コンポーネント] サイドバーから、
agentAssistContainerModule
をサイドバーに移動します。前の手順で配置したコンポーネントをクリックします。
次の手順に沿ってフォームのフィールドに入力し、構成の詳細を追加します。
- エンドポイント: エージェント統合バックエンド UI コネクタの URL。たとえば、Cloud Run コンソールの URL(
https://UI-CONNECTOR-ENDPOINT.GCP-REGION.run.app
など)。 - features: 会話プロファイルで有効になっている Agent Assist 機能(
CONVERSATION_SUMMARIZATION
、KNOWLEDGE_ASSIST_V2
、SMART_REPLY
、AGENT_COACHING
など) conversationProfile
: Agent Assist 会話プロファイルのリソース名(例:projects/GCP-PROJECT-ID/locations/GCP-REGION/conversationProfiles/CONVERSATION-PROFILE-ID
)- consumerKey: 手順 3 の接続アプリケーションのコンシューマ キー
- consumerSecret: 手順 3 の接続アプリのコンシューマ シークレット
- エンドポイント: エージェント統合バックエンド UI コネクタの URL。たとえば、Cloud Run コンソールの URL(