Salesforceでは、ボタンやカルーセルなどのリッチメッセージングをサポートしていません。そのため、独自のスクリプトを作成して、静的リソースとしてSalesforceに追加し、対話フロー内のリッチメッセージとしてボタンを有効にできるようにしました。この操作は、Salesforce管理者が行う必要があります。
プラグイン
これらのスクリプトにより、すべてのカスタマイズ機能とCSSでリッチメッセージングをレンダリングできます。
プラグインをダウンロードする
- こちらからassets.zipをダウンロードします。
- このzipファイルを解凍すると、rich-message-pluginフォルダと、次の2つのファイルが表示されます。
- CustomEvents_AddButtons.js
- CustomEvents_AddButtons_Stylesheet.css
プラグインをアップロードする
静的リソースとして、この2つのファイルを追加する必要があります。変更を元に戻すには
- Salesforceで、設定 > カスタムコード > Visualforceページ > デベロッパーコンソールに移動します（新しいウィンドウが開きます）。
- 新しいウィンドウで、ファイル > 新規 > 静的リソースを選択します。
- 以下のようにフィールドを設定します。
-
名前： CustomEvents_AddButtons
- メモ - （必要に応じて名前を変更できます。これは後でウィジェットコードで使用する参照であり、.jsまたは.cssである必要はありません）
- MIMEタイプ：text/javascriptまたはtext/css（アップロードするファイルに応じて）
-
名前： CustomEvents_AddButtons
- 送信をクリックします。
- CustomEvents_AddButtons_Stylesheet.cssファイルで、ステップ2～4を繰り返します。
チャットウィジェットを編集して、カスタムプラグインを参照する
- Webサイトのソースコードで、スナップインウィジェットスニペットを見つけます。
-
以下の行を
embedded_svc.init()の上に追加します。
embedded_svc.settings.externalScripts = ["CustomEvents_AddButtons"];
embedded_svc.settings.externalStyles = ["CustomEvents_AddButtons_Stylesheet"];
Lightning Component
Lightning Componentは、入力インジケータを有効にし、標準のチャットメッセージコンポーネントをHTMLロジックを理解できるコンポーネントに置き換えます。
Lightning Componentをダウンロードする
ダウンロードしたzipフォルダ内に、rich-message-lightning-web-componentフォルダがあります。
Lightning Componentをインストールし、デプロイする
Webコンポーネントを初めてデプロイする場合は、こちらのTrailheadのガイドを参照してください。
インストール
-
VS Codeでプロジェクトを作成します。Salesforce拡張機能を有効にし、Salesforce CLIをダウンロードする必要があります。
-
SFDXを選択してプロジェクトを作成します。ビュー > コマンドパレットからプロジェクトを作成します。
標準テンプレートを選択し、プロジェクト名にlwcchatpackと入力します。 -
force-app/main/defaultのlwcフォルダを右クリックし、SFDX：Lightning Webコンポーネントを作成を選択します。
-
新しいコンポーネントの名前に
lwcchatpackと入力し、デフォルトとします。 -
自動作成されたファイルをGoogleドライブからダウンロードしたファイルに置き換え、新しいcssファイルを追加します。すべてを保存します。
-
デプロイ
-
-
ビュー > コマンドパレットで、SFDX：組織を承認と入力します。
プロンプトが表示されたら、プロジェクトのデフォルトを選択し、Enterキーを押してデフォルトのエイリアスを許可します。アクセス許可のプロンプトが表示され、許可をクリックします。 -
デフォルトのフォルダを右クリックし、SFDX：このソースを組織にデプロイを選択します。
-
コードエディタのデプロイメントが機能しない場合は、CLIで次のコマンドを入力して実行できます。
cd Filepath/where/project/lives
sfdx force:source:deploy -p force-app/main/default
Salesforceの設定を更新する
この新しいコンポーネントを使用するには、チャットウィジェットで有効にする必要があります。
これは、現在使用している「埋め込みサービス」（使用しているウィジェット）から制御します。
設定を更新するには、設定 > 埋め込みサービスのデプロイメントに移動し、関連するウィジェットを選択してビューをクリックし、チャット設定を編集します。
次に、「Lightning Componentでカスタマイズ」セクションが表示され、デフォルトの「チャットメッセージ」コンポーネントを上記でインストールしたコンポーネントに置き換えることができます。前回使用したlwcchatpackプロジェクト名を必ず使用してください。
チャットの会話ログからHTMLを削除する
これらの優れたカスタマイズ機能と豊富なオプションを追加しましたが、さらにチャットの会話ログを読みやすくします。
Chatの会話ログトリガを追加して、HTMLがレンダリングされるように変更できます。
設定 >オブジェクトマネージャー >チャット会話ログ >トリガ > 新規に移動します。
trigger regexReplace on LiveChatTranscript (before insert, before update) {
for(LiveChatTranscript chatTranscript : Trigger.new){
if(String.isNotBlank(chatTranscript.Body)){
chatTranscript.Body=chatTranscript.Body.replaceAll('<','<').replaceAll('>','>').replaceAll('"','"').replaceAll('&','&');
}
}
}
推奨事項
チャットボックスの幅を調整する
エクスペリエンスを向上するために、チャットボックスの幅を広げることをお勧めします。350ピクセル以上をお勧めします（450ピクセルが最適）。
幅を調整するには、ウィジェットコードの次の行に必要な値を設定します。
embedded_svc.settings.widgetWidth =
デフォルトの色とフォントを調整する
ウィジェットコードのcssファイル内で、色セレクターを見つけます。デフォルトでは紫色ですが、最初にアップロードしたCustomEvents_AddButtons_Stylesheet.cssで調整できます。
important;例えば、設定した色を上書きする場合、タグを追加するだけで、残りの色をブランドの紫色ではなく黄色の星印にすることができます。