•
進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

埋め込みチャットへのブランド設定の追加

学習の目的

この単元を完了すると、次のことができるようになります。
  • 顧客のチャットウィンドウにブランド設定を追加する。
  • Web サイト実装をテストする。

ブランド設定の計画

Maria は、Sita と Roberto に Web チャットのデモができるのでワクワクしていますが、その前に、顧客のチャットウィンドウが Ursa Major Solar のブランドとシームレスに見えるようにしたいと考えています。そこで、いくつか Sita への質問を考えました。その答えは、すべてをあるべき姿で表示するのに役立ちます。
質問 回答
Ursa Major Solar のマーケティング素材ではどのフォントと色を使用していますか? ブランド設定ガイドラインによると、Ursa Major Solar では Salesforce Sans を使用しています。ブランドの色は、#006937、#565656、#F5B335 です。
Ursa Major Solar にはロゴがありますか? はい、次の画像を使用できます。Ursa Major Solar ロゴ
顧客のチャットウィンドウに表示されるエージェントのアバターを追加しますか? はい、次の画像を使用できます。Ursa Major のエージェントのアバター

ブランド設定による美化

ブランド設定素材に関する情報を入手できたので、Maria は組み込みサービスの設定にアクセスして、Ursa Major Solar の色、フォント、画像を追加します。これらのデザイン要素で、チャットウィンドウが Web サイトとシームレスに調和します。

Maria と一緒に、カスタムブランド設定をチャットウィンドウに追加しましょう。

まず、画像を Salesforce に追加して、リンクを組み込みサービスの設定で使用できるようにします。画像がすでに公開リンクでどこかにホストされている場合、これは必要ありません。ここではテスト Web サイトを使用するため、画像を静的リソースとして Salesforce にアップロードしてリンクを作成できます。

  1. 次のロゴとエージェントのアバターの画像をデスクトップに保存します。
    1. ロゴ画像: Ursa Major Solar ロゴ
    2. エージェントのアバター画像: Ursa Major のエージェントのアバター
  2. [設定] から、[クイック検索] ボックスに「静的リソース」と入力し、[静的リソース] を選択します。
  3. [新規] をクリックします。
  4. 名前として「Logo」 (ロゴ) と入力します。
  5. [ファイルの選択] をクリックし、保存したロゴ画像 (Ursa Major Solar ロゴの画像) を選択します。
  6. キャッシュコントロールについては [公開] を選択します。
  7. [保存] をクリックします。
  8. [静的リソース] 詳細ページで、[ファイルを表示] をクリックして新しいタブで画像を開きます。[静的リソース] 詳細ページの [ファイルを表示] リンク
  9. URL をコピーしてどこか安全な場所に貼り付けるか、タブを開いたままにして後で URL をコピーできるようにします。すぐにこの URL が必要になります。
  10. エージェントのアバター画像 (人物の顔の画像) について、ステップ 3 ～ 9 を繰り返します。名前に「AgentAvatar」と入力します。
    次に、Maria は、Ursa Major Solar の ブランド設定と一致する色をチャットウィンドウに設定します。
  11. [設定] から、[クイック検索] ボックスに「組み込みサービス」と入力し、[組み込みサービスリリース] を選択します。
  12. 組み込みサービスリリースの横にある矢印をクリックして、[表示] を選択します。
  13. [ブランド] の横にある [編集] をクリックします。
  14. 色とフォントを選択すます。ライブプレビューを使用して色がどこに表示されるか確認します。 Snap-in ブランド設定オプション
    1. [ブランドプライマリ] と [ナビゲーションバー] の色として「#006937」と入力します。
    2. [ブランドセカンダリ] の色として「#565656」と入力します。
    3. [フォント] は、Salesforce Sans が選択されたままにします。
    4. [コントラストプライマリ] の色はそのままにします。
  15. [完了] をクリックします。
    簡単です。後は、チャットウィンドウにもう少し仕上げをするだけです。
  16. [チャット設定] の横にある [編集] をクリックします。
  17. [事前チャット] スライダが有効に設定されている場合は、[無効] に変更します。
  18. [追加のブランド設定] の横にある [編集] をクリックします。
  19. [ロゴ] 項目にロゴ画像の URL を貼り付けます。
  20. [エージェントのアバター] 項目にエージェントのアバター画像の URL を貼り付けます。
  21. [保存] をクリックします。

わずか数クリックの操作で、お客様のチャットウィンドウが Ursa Major Solar のブランドとシームレスに調和しました。

動作のテスト

すべて順調で、Web チャット実装をテストする準備ができました。

Maria は、次のように Web チャットのテストを行う予定です。
  • 最初の単元で作成した Visualforce ページを開き、オフラインチャットウィンドウを確認します。
  • 標準のサービスコンソールを開き、オムニチャネルユーティリティで [対応可能 - チャット] 状況を使用してオンラインにします。
  • Visualforce ページを更新し、チャットウィンドウをクリックしてチャットを開始します。
  • お客様として、およびエージェントとしてチャットを送信し、すべてが適切に動作することを確認します。
  • お客様またはエージェントのチャットウィンドウからチャットを終了します。

では一緒に Web チャット実装をテストしましょう。

  1. [設定] から、[クイック検索] ボックスに「Visualforce」と入力し、[Visualforce ページ] を選択します。
    [Visualforce ページ] がオプションとして表示されない場合は、表示されている画面が [サービスの設定] ではなく [設定] であることを確認してください。
  2. [Web Chat (Web チャット)] Visualforce ページの横にある ポップアウトアイコン をクリックして、新しいタブまたはウィンドウで開きます。チャットウィンドウで右下隅にオフラインチャットボタンが表示されます。
    メモ

    メモ

    Visualforce ページでチャットウィンドウが少し不自然に見えるかもしれません。それは、ページにスタイルや書式が一切含まれていないせいです。実際の Web サイトやコミュニティでは、次のように表示されます。 コミュニティのオフライン Snap-in

  3. アプリケーションランチャーで、[サービスコンソール] を見つけて選択します。
    メモ

    メモ

    作成したコンソールアプリケーションではなく、標準のサービスコンソールを使用します。チャット設定フローでは、ここですべてを有効にしました。

  4. オムニチャネルユーティリティを開き、状況を [対応可能 - チャット] に変更します。これで、エージェントとしてチャットを受けることができます!コンソールのオムニチャネルユーティリティの状況
  5. Visualforce ページが表示されたタブに戻り、更新します。チャットウィンドウでオンラインチャットボタンが表示されます。
    メモ

    メモ

    Visualforce ページでチャットウィンドウが少し不自然に見えるかもしれません。それは、ページにスタイルや書式が一切含まれていないせいです。実際の Web サイトやコミュニティでは、次のように表示されます。 コミュニティのオンライン Snap-in

  6. チャットウィンドウをクリックしてチャットを要求します。
    チャットを要求したら、お客様のチャットウィンドウを最小化して、チャットウィンドウ上のロゴ画像を確認します。
    ヒント

    ヒント

    チャットを起動できない場合は Visualforce ページの URL を確認してください。URL の末尾が .force.com ではなく .visualforce.com になっている場合は、CORS 設定で https://*.visualforce.com をホワイトリストに登録する必要があります。

  7. コンソールのオムニチャネルユーティリティで、チャット要求を受け入れます。チャットトランスクリプトがコンソールで開きます。
  8. しばらく自分自身とチャットをやりとりします。
    お客様のチャットウィンドウで、Ursa Major Solar の色とエージェントのアバター画像を確認します。
  9. エージェントまたはお客様のチャットウィンドウからチャットを終了します。コンソールでチャットトランスクリプトレコードと関連するレコードを閉じます。

素晴らしいですね。Maria は Web チャットを設定してテストしました。しかも、それには数分しかかかりませんでした。

これで Sita と Roberto に、実際に動作する Web チャットのデモができます。会話のエージェント側でもお客様側でも、操作がいかに簡単かを見せるのが楽しみです。