埋め込みチャットへのブランド設定の追加
ブランド設定の計画
Maria は、Sita と Roberto に Web チャットのデモができるのでワクワクしていますが、その前に、顧客のチャットウィンドウが Ursa Major Solar のブランドとシームレスに見えるようにしたいと考えています。そこで、いくつか Sita への質問を考えました。その答えは、すべてをあるべき姿で表示するのに役立ちます。
質問 | 回答 |
---|---|
Ursa Major Solar のマーケティング素材ではどのフォントと色を使用していますか? | ブランド設定ガイドラインによると、Ursa Major Solar では Salesforce Sans を使用しています。ブランドの色は、#006937、#565656、#F5B335 です。 |
Ursa Major Solar にはロゴがありますか? | はい、次の画像を使用できます。![]() |
顧客のチャットウィンドウに表示されるエージェントのアバターを追加しますか? | はい、次の画像を使用できます。![]() |
ブランド設定による美化
ブランド設定素材に関する情報を入手できたので、Maria は組み込みサービスの設定にアクセスして、Ursa Major Solar の色、フォント、画像を追加します。これらのデザイン要素で、チャットウィンドウが Web サイトとシームレスに調和します。
Maria と一緒に、カスタムブランド設定をチャットウィンドウに追加しましょう。
まず、画像を Salesforce に追加して、リンクを組み込みサービスの設定で使用できるようにします。画像がすでに公開リンクでどこかにホストされている場合、これは必要ありません。ここではテスト Web サイトを使用するため、画像を静的リソースとして Salesforce にアップロードしてリンクを作成できます。
-
次のロゴとエージェントのアバターの画像をデスクトップに保存します。
- ロゴ画像:
- エージェントのアバター画像:
- ロゴ画像:
- [設定] から、[クイック検索] ボックスに「静的リソース」と入力し、[静的リソース] を選択します。
- [新規] をクリックします。
- 名前として「Logo」 (ロゴ) と入力します。
- [ファイルの選択] をクリックし、保存したロゴ画像 (Ursa Major Solar ロゴの画像) を選択します。
- キャッシュコントロールについては [公開] を選択します。
- [保存] をクリックします。
- [静的リソース] 詳細ページで、[ファイルを表示] をクリックして新しいタブで画像を開きます。
- URL をコピーしてどこか安全な場所に貼り付けるか、タブを開いたままにして後で URL をコピーできるようにします。すぐにこの URL が必要になります。
-
エージェントのアバター画像 (人物の顔の画像) について、ステップ 3 ~ 9 を繰り返します。名前に「AgentAvatar」と入力します。次に、Maria は、Ursa Major Solar の ブランド設定と一致する色をチャットウィンドウに設定します。
- [設定] から、[クイック検索] ボックスに「組み込みサービス」と入力し、[組み込みサービスリリース] を選択します。
- 組み込みサービスリリースの横にある矢印をクリックして、[表示] を選択します。
- [ブランド] の横にある [編集] をクリックします。
-
色とフォントを選択すます。ライブプレビューを使用して色がどこに表示されるか確認します。
- [ブランドプライマリ] と [ナビゲーションバー] の色として「#006937」と入力します。
- [ブランドセカンダリ] の色として「#565656」と入力します。
- [フォント] は、Salesforce Sans が選択されたままにします。
- [コントラストプライマリ] の色はそのままにします。
-
[完了] をクリックします。簡単です。後は、チャットウィンドウにもう少し仕上げをするだけです。
- [チャット設定] の横にある [編集] をクリックします。
- [事前チャット] スライダが有効に設定されている場合は、[無効] に変更します。
- [追加のブランド設定] の横にある [編集] をクリックします。
- [ロゴ] 項目にロゴ画像の URL を貼り付けます。
- [エージェントのアバター] 項目にエージェントのアバター画像の URL を貼り付けます。
- [保存] をクリックします。
わずか数クリックの操作で、お客様のチャットウィンドウが Ursa Major Solar のブランドとシームレスに調和しました。
動作のテスト
すべて順調で、Web チャット実装をテストする準備ができました。
Maria は、次のように Web チャットのテストを行う予定です。
- 最初の単元で作成した Visualforce ページを開き、オフラインチャットウィンドウを確認します。
- 標準のサービスコンソールを開き、オムニチャネルユーティリティで [対応可能 - チャット] 状況を使用してオンラインにします。
- Visualforce ページを更新し、チャットウィンドウをクリックしてチャットを開始します。
- お客様として、およびエージェントとしてチャットを送信し、すべてが適切に動作することを確認します。
- お客様またはエージェントのチャットウィンドウからチャットを終了します。
では一緒に Web チャット実装をテストしましょう。
-
[設定] から、[クイック検索] ボックスに「Visualforce」と入力し、[Visualforce ページ] を選択します。[Visualforce ページ] がオプションとして表示されない場合は、表示されている画面が [サービスの設定] ではなく [設定] であることを確認してください。
-
[Web Chat (Web チャット)] Visualforce ページの横にある
をクリックして、新しいタブまたはウィンドウで開きます。チャットウィンドウで右下隅にオフラインチャットボタンが表示されます。
-
アプリケーションランチャーで、[サービスコンソール] を見つけて選択します。
- オムニチャネルユーティリティを開き、状況を [対応可能 - チャット] に変更します。これで、エージェントとしてチャットを受けることができます!
-
Visualforce ページが表示されたタブに戻り、更新します。チャットウィンドウでオンラインチャットボタンが表示されます。
-
チャットウィンドウをクリックしてチャットを要求します。チャットを要求したら、お客様のチャットウィンドウを最小化して、チャットウィンドウ上のロゴ画像を確認します。
- コンソールのオムニチャネルユーティリティで、チャット要求を受け入れます。チャットトランスクリプトがコンソールで開きます。
-
しばらく自分自身とチャットをやりとりします。お客様のチャットウィンドウで、Ursa Major Solar の色とエージェントのアバター画像を確認します。
- エージェントまたはお客様のチャットウィンドウからチャットを終了します。コンソールでチャットトランスクリプトレコードと関連するレコードを閉じます。
素晴らしいですね。Maria は Web チャットを設定してテストしました。しかも、それには数分しかかかりませんでした。
これで Sita と Roberto に、実際に動作する Web チャットのデモができます。会話のエージェント側でもお客様側でも、操作がいかに簡単かを見せるのが楽しみです。