はじめに
Salesforce では、主に顧客とチャットでやり取りするための Web チャットチャネルを作成することができます。
例えば、上のTrailheadモジュールに従えば簡単なWeb埋め込みチャットを作ることができるのですが、ここで1つ問題が発生します。
それは、顧客情報を入力する事前チャット画面で姓と名が逆に表示される、という点です。
おそらく名前の欄は英語圏を前提としているのでしょうが、Salesforce内部設定と異なりチャット設定には地域の設定がありません。
そのため、Salesforce設定レベルでは姓と名を入れ替えることができません。
そこで今回は、CSSを使って強引に姓と名の配置を変えることで入れ替えを実現します。
姓と名の入れ替えを実現する
※注意:以下コードはブログ投稿時点で動作を確認しておりますが、今後のリリースにより動作しない場合があります。
また、チャット画面はデフォルトを前提としています。既にチャット画面をカスタマイズ済みの場合は期待通り動作しない場合があります。
姓と名を入れ替えるには、組み込みサービスのコードスニペットのうち、CSS部分に以下を追記してください。
4項目バージョン
label[for="FirstName"] { position: relative; left: 142px } input[id="FirstName"] { position: relative; left: 142px } label[for="LastName"] { position: relative; right: 142px } input[id="LastName"] { position: relative; right: 142px }
コードスニペットがデフォルトのままの場合、CSS全体だとこうなります。
<style type='text/css'> .embeddedServiceHelpButton .helpButton .uiButton { background-color: #005290; font-family: "Arial", sans-serif; } .embeddedServiceHelpButton .helpButton .uiButton:focus { outline: 1px solid #005290; } label[for="FirstName"] { position: relative; left: 142px } input[id="FirstName"] { position: relative; left: 142px } label[for="LastName"] { position: relative; right: 142px } input[id="LastName"] { position: relative; right: 142px } </style>
2項目バージョン
.embeddedServiceSidebarFormField.inputSplitName:nth-of-type(1) { position: relative; left: 142px } .embeddedServiceSidebarFormField.inputSplitName:nth-of-type(2) { position: relative; right: 142px }
コードスニペットがデフォルトのままの場合、CSS全体だとこうなります。
<style type='text/css'> .embeddedServiceHelpButton .helpButton .uiButton { background-color: #005290; font-family: "Arial", sans-serif; } .embeddedServiceHelpButton .helpButton .uiButton:focus { outline: 1px solid #005290; } .embeddedServiceSidebarFormField.inputSplitName:nth-of-type(1) { position: relative; left: 142px } .embeddedServiceSidebarFormField.inputSplitName:nth-of-type(2) { position: relative; right: 142px } </style>
表示結果
この設定を見つけるまでの経緯は、長くなるため末尾に記載します。
CSS変更時の注意
ヘルプに以下記載がある通り、Salesforceはユーザが作成したCSSが正常に動作することを保証していません。
重要 組み込みコンポーネントへのカスタム CSS の追加はサポートされていません。ブランドオプションの使用がサポートされるのは、設定およびコードスニペットのカスタマイズ可能なパラメータのみです。組み込みコンポーネントでカスタム CSS を使用する場合は、リリースごとにチャットウィンドウをテストし、適切に機能することを確認してください。
今回のCSSも、タグの内容が変わってしまえば無効化されますし、ある日のSalesforceリリースによって見栄えが変わってしまうこともあり得ます。*1
そのため、見栄えが変わってしまった場合にどう対応するかは知っておいた方がいいでしょう。
まぁ一番いいのはチャット設定に地域項目を追加して、それによって姓と名を自動で入れ替える機能が追加されることですけどね…。Salesforceさんお願いします。
*1:ここでいうリリースは、年3回のメジャーリリースだけでなく、バグフィックス等のユーザ通知がないリリースも含みます