埋め込みチャットの姓と名を入れ替えたい

はじめに

Salesforce では、主に顧客とチャットでやり取りするための Web チャットチャネルを作成することができます。

trailhead.salesforce.com

例えば、上のTrailheadモジュールに従えば簡単なWeb埋め込みチャットを作ることができるのですが、ここで1つ問題が発生します。
それは、顧客情報を入力する事前チャット画面で姓と名が逆に表示される、という点です。

f:id:mark-hammer:20201108001618p:plain:w250 — 姓と名が逆の事前チャット画面

おそらく名前の欄は英語圏を前提としているのでしょうが、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>

表示結果

f:id:mark-hammer:20201108004743p:plain:w250 — 姓と名を正しい配置にした事前チャット画面

この設定を見つけるまでの経緯は、長くなるため末尾に記載します。

CSS変更時の注意

ヘルプに以下記載がある通り、Salesforceはユーザが作成したCSSが正常に動作することを保証していません。

重要組み込みコンポーネントへのカスタム CSS の追加はサポートされていません。ブランドオプションの使用がサポートされるのは、設定およびコードスニペットのカスタマイズ可能なパラメータのみです。組み込みコンポーネントでカスタム CSS を使用する場合は、リリースごとにチャットウィンドウをテストし、適切に機能することを確認してください。

今回のCSSも、タグの内容が変わってしまえば無効化されますし、ある日のSalesforceリリースによって見栄えが変わってしまうこともあり得ます。*1
そのため、見栄えが変わってしまった場合にどう対応するかは知っておいた方がいいでしょう。

まぁ一番いいのはチャット設定に地域項目を追加して、それによって姓と名を自動で入れ替える機能が追加されることですけどね…。Salesforceさんお願いします。

この設定を発見するまでの経緯

はじまり

この問題を最初に知ったのは、以下のツイートでした。

本当にこれがねぇ…。
「名」「姓」を逆になってるのがなぁ。。
姓だけ必須というのも「名前」でまとめて設定になってて
組み込みサービスのところでできないし。。という悩み。 pic.twitter.com/3sWQTz3B1Z
— ĸ y o н ĸ o (@KyokoKyohkot) 2020年10月29日

この時点では、自分の仕事では埋め込みチャットを使わず、解決法も思い浮かばなかったため「これは大変そうだなぁ…」と思ったのみでした。

その後、忘れたころに以下ツイートを見つけます。

同じ現象にぶつかって困ってる。。。ロケールの設定はなさそう。CSSで力技で配置を変えるとかできるかな。 https://t.co/Wx3CYIWhmz
— いっちー(Yohei Ichikawa) (@itchy_trumpet) 2020年11月7日

その返信には、「姓と名の入れ替えはCSS書き換えでできる」とありました。
また、最初のツイートの返信にて、入れ替え方法はマニュアルがあるとのこと。

service cloud チャット（旧称Live Agent）設定ガイドの69ページに載ってます！
— Misa (@Misa__pc) 2020年10月29日

さっそくGoogleでマニュアルを探そうとしたのですが…、
「『service cloud チャット（旧称Live Agent）設定ガイド』…ない、ないよ…。」*2
…見つけられませんでした。

CSS書き換えに挑む

「でもCSS書き換えでできるんでしょ？ならやってみるか。」ということで、一からやってみることにしました。
まずは、以下Trailheadモジュールの「埋め込みチャットへのブランド設定の追加」まで実施し、前提となる環境を構築。

trailhead.salesforce.com

この時、画面表示を日本語にするために組み込みサービスのコードスニペットのうち

embedded_svc.settings.language = 'ja';

の行のみ変更。
これでデフォルトの埋め込みチャットはできたので、ここから姓と名の要素を入れ替えればいいのですが…、「どうやればいいんだろう？」と悩む。

4項目バージョンのCSS書き換えまで

とりあえずChromeデベロッパーツールで、姓と名の要素がコードではどうなっているか見ます。

さらに姓と名の要素表示部分を抽出します。

// 名(FirstName)
<label class="uiLabel-left form-element__label uiLabel" for="FirstName" data-aura-rendered-by="352:0" data-aura-class="uiLabel">
    <span class="" data-aura-rendered-by="353:0">名</span>
    <span class="required" title="Required" data-aura-rendered-by="283:0">*</span>
</label>
<input class="FirstName slds-style-inputtext input" maxlength="121" type="text" aria-describedby="" placeholder="" required="" id="FirstName" data-aura-rendered-by="291:0" data-interactive-lib-uid="2" aria-required="true">

// 姓(LastName)
<label class="uiLabel-left form-element__label uiLabel" for="LastName" data-aura-rendered-by="361:0" data-aura-class="uiLabel">
    <span class="" data-aura-rendered-by="362:0">姓</span>
    <span class="required" title="Required" data-aura-rendered-by="300:0">*</span>
</label>
<input class="LastName slds-style-inputtext input" maxlength="121" type="text" aria-describedby="" placeholder="" required="" id="LastName" data-aura-rendered-by="308:0" data-interactive-lib-uid="3" aria-required="true">

ここで、「label要素の for="FirstName" と for="LastName" 、input要素の id="FirstName" と id="LastName" の位置を入れ替えればいい」と分かりました。

位置の変更手段としては、 position: relative; で最初に配置された位置から移動させ、left: 142pxとright: 142pxで具体的な移動幅を決定しました。
なお、具体的な移動幅については「値を変える→ブラウザ更新で事前チャット画面を確認→再度値を調整」という地道な作業を繰り返しました。

2項目バージョンのCSS書き換えまで

姓と名の要素のコードを、1段階上のdivタグから見てみます。

<div class="fieldList" data-aura-rendered-by="205:0">
    <div class="inputSplitName embeddedServiceSidebarFormField" data-aura-rendered-by="286:0" data-aura-class="embeddedServiceSidebarFormField">
    //以下「名」に関する要素のコード
    </div>
    <div class="inputSplitName embeddedServiceSidebarFormField" data-aura-rendered-by="303:0" data-aura-class="embeddedServiceSidebarFormField">
    //以下「姓」に関する要素のコード
    </div>
    <div class="inputEmail embeddedServiceSidebarFormField" data-aura-rendered-by="320:0" data-aura-class="embeddedServiceSidebarFormField">
    //以下「メール」に関する要素のコード
    </div>
    <div class="inputText embeddedServiceSidebarFormField" data-aura-rendered-by="336:0" data-aura-class="embeddedServiceSidebarFormField">
    //以下「件名」に関する要素のコード
    </div>
</div>

ここで、「div class="inputSplitName embeddedServiceSidebarFormField"の1番目を右に、2番目を左に移動させればよい」と分かりました。
位置の指定内容は4項目バージョンと同じです。