Guideインターフェイスを構成する

Guideは、ウェブサイト上のGuideウィジェットの外観を決定するために定義するデフォルトのブランディングとチャネルボタンを使用します。

ベストプラクティス

  • マーケティング部署と協力して、ウェブサイトを補完するチャネルボタンの画像とブランディングカラーを選択します。

  • ウェブサイト全体で一貫したチャネルボタンとブランディングを使用します。

  • 複数のウェブサイトがある場合、それぞれのウェブサイトに独自のブランディングを定義する必要があるかどうかを判断します。

  • デフォルトのブランディングカラーに依存するには、ボタンまたはテンプレートを定義する際にTheme colorを設定しないでください。

  • デフォルトのブランディングカラーをオーバーライドするには、特定のボタンまたはテンプレートで異なる色を設定できます。 次のことに留意してください：

    • [Theme color]をテンプレート用に設定した場合、その色はブランドカラーの設定を上書きします。

    • テンプレート用にTheme colorを設定し、ボタン用にTheme color を設定した場合、ボタンの色はテンプレートとブランドカラーの設定を上書きします。

  • 高度なカスタムスタイリングについては、GuideAPI を使用するか、CXoneアカウント担当者で作業してカスタム外観を作成することができます。

ブランディングを作成する

このセクションのコンテンツは、制御リリース（CR）の製品または機能用です。 CRグループに参加していない場合で、詳細情報を知りたい方は、CXoneアカウント担当者にお問い合わせください。

ブランディングでは、テンプレート、ボタン、およびプロアクティブオファーで使用するデフォルトの色を設定します。 Guideは、必要に応じてカスタマイズ可能なDefaultのブランディングを提供します。 必要であれば、複数のブランディングを作成することもできます。 たとえば、異なるWebサイトでガイドガイドテンプレートを提供する予定の場合、Webサイトごとに独自のブランディングを使用できます。 テンプレートやプロアクティブオファーを表示するルールを定義する際には、Guide Set Brandingアクションを使用して、適用するブランディングを指定します。

  1. アプリセレクターをクリックして、次を選択します：Guide.

  2. Brandingをクリックします。

  3. New Brandingをクリックします。

  4. Branding Titleに一意のブランド名を入力します。

  5. Theme ColorをGuideウィジェットで使用するプライマリカラーに設定します。 色を設定するには、16進数の値を入力するか、カラードロッパーをクリックして色を選択します。

    Theme Colorは以下に使用されます。

    • ヘッダーの背景色

    • 最小化ボタン
    • チャネルボタンの背景色

    以下の場合は使用されません。

    • チャネルボタンがテーマカラーを設定し、ブランディングカラーを上書きする場合。

    • テンプレートがテーマカラーを設定し、ブランディングカラーを上書きする場合。

    • プライマリ設定以外の詳細なブランディング設定を指定した場合。 たとえば、プロアクティブオファーのボタンの色を設定している場合などです。

  6. Font ColorをGuideウィジェットに表示されるテキストに使用する色に設定します。 この色は、ヘッダー内のテキストや、最小化ボタンや戻るボタンに表示される矢印に使用されます。

    視覚障害のある方への配慮として、Theme ColorとFont Colorの間のコントラスト比を4.5:1に保ってください。 コントラストを確認するためのオンラインツールが利用可能です。

  7. 必要に応じて、[General]、[Guide Template]、[Knowledge Base]、[Proactive Offer]タブを使用して、ブランディングをさらに細かく調整できます。

    Generalタブ
    フィールド 詳細
    Width (EM)

    Guideウィジェットの幅(em単位)。

    デフォルトのemサイズは、CSS設定またはブラウザ設定に基づきます。 最適な結果を得るには、顧客ポータルテンプレートをプレビューで選択し、必要に応じてGuideウィジェットの幅を調整してください。

    Height (EM)

    Guideウィジェットの高さ(em単位)。

    デフォルトのemサイズは、CSS設定またはブラウザ設定に基づきます。 最適な結果を得るには、顧客ポータルテンプレートをプレビューで選択し、必要に応じてGuideウィジェットの高さを調整してください。
    Close Button Icon Color ウィジェットの閉じるアイコンに使用する色。
    Close Button Background Color ウィジェットの閉じるアイコンの背景色。
    Guide Templateタブ
    フィールド 詳細
    Background Color 顧客ポータルテンプレートに使用する背景色。

    Font and Icon Color

    顧客ポータルテンプレートに使用するフォントとアイコンの色。
    Heading Font Size (EM)

    顧客ポータルテンプレートに使用する見出しのフォントサイズ(em単位)。

    デフォルトのemサイズは、CSS設定またはブラウザ設定に基づきます。 最適な結果を得るには、顧客ポータルテンプレートをプレビューで選択し、必要に応じて見出しのフォントサイズを調整してください。
    Subheading Font Size (EM)

    顧客ポータルテンプレートに使用する小見出しのフォントサイズ(em単位)。

    デフォルトのemサイズは、CSS設定またはブラウザ設定に基づきます。 最適な結果を得るには、顧客ポータルテンプレートをプレビューで選択し、必要に応じて小見出しのフォントサイズを調整してください。
    Knowledge Baseタブ
    フィールド 詳細
    Background Color 知識ベースの記事を表示する際に使用する背景色。

    Font and Icon Color

    知識ベースの記事を表示する際に使用するフォントとアイコンの色。
    Proactive Offerタブ
    フィールド 詳細
    Heading Font Size (EM)

    プロアクティブオファーの見出しに使用するフォントサイズ(em単位)。

    デフォルトのemサイズは、CSS設定またはブラウザ設定に基づきます。 最適な結果を得るには、プロアクティブオファーのプレビュー画像を確認し、必要に応じて見出しのフォントサイズを調整してください。

    Body Text Font Size (EM)

    プロアクティブオファーの本文テキストに使用するフォントサイズ(em単位)。

    デフォルトのemサイズは、CSS設定またはブラウザ設定に基づきます。 最適な結果を得るには、プロアクティブオファーのプレビュー画像を確認し、必要に応じて本文のフォントサイズを調整してください。
    Header Color プロアクティブオファーのヘッダー領域に使用する色。
    Background Color プロアクティブオファーの背景に使用する色。
    Font Color プロアクティブオファーに使用するフォントカラー。 これには見出しテキストや本文テキストが含まれます。
    Primary Button Background and Font Color プロアクティブオファー内のプライマリコールトゥアクションボタンの背景とフォントの色。
    Secondary Button Background and Font Color プロアクティブオファー内のセカンダリボタンの背景とフォントの色。
    Position on Mobile プロアクティブオファーをモバイルデバイスで画面のTop またはBottom のどちらに表示するかを指定します。
  8. ブランディング設定をプレビューするには、ページ右側のドロップダウンリストからテンプレートを選択します。 また、プロアクティブオファーのブランディングをプレビューするには、[Proactive Offer]タブをクリックします。 これらの設定をカスタマイズすると、右側にプレビューが表示されます。

  9. [Default]をクリックして、この設定をデフォルトのブランディングとして指定します。 ブランディングをデフォルトに設定すると、すべての既存および新規テンプレートに適用されます。

  10. Saveをクリックします。

チャネルボタンを作成する

Guideで提供する予定のチャネル閉じた コンタクトがエージェントやボットとやり取りする方法。 チャネルには、音声、Eメール、チャット、ソーシャルメディアなどが含まれます。ごとにボタンを作成します。 ボタンを作成したら、 それらをエントリーポイントに関連付けます。 エントリーポイント用に違うボタンを設定することでテンプレートを定義する際、ボタンをオーバーライドすることができます。

View a short video on creating channel buttons.

  1. アプリセレクターをクリックして、次を選択します：ACD。

  2. [Digital]>[Points of Contact Digital]に移動します。

  3. General channel featuresで、[Guide]をクリックします。

  4. [Buttons ]セクションにスクロールダウンし、[Add button]をクリックします。

    ボタンのページ。 作成されたすべてのボタンと、そのボタンを使用するテンプレートとエントリーポイントのリストが表示されます。

  5. ボタンのNameを入力します。

  6. [Choose File ]をクリックしてボタンのIconをアップロードします。

    アイコン画像は50 KB以下である必要があり、SVGファイルの使用が推奨されます。

  7. 必要に応じて、Theme color フィールドでチャネルボタンの背景色を設定します。

    ブランド用に設定されたデフォルトのチャネルボタンの背景色を使用するには、このフィールドを空白のままにします。

    ボタンに透明な背景を使用するには、[Transparent background]を選択します。

  8. Saveをクリックします。

翻訳のために言語バリアントを追加する

Guideで使用するカスタム言語バリアントを作成できます。 さらに、Guideユーザーインターフェイス要素用のラベルを編集することもできます。

デフォルト言語用の翻訳は、将来のリリースで利用可能になります。

カスタム言語を追加する

  1. アプリセレクターをクリックして、次を選択します：ACD。

  2. [Digital]>[Points of Contact Digital]に移動します。

  3. General channel featuresで、[Guide]をクリックします。

  4. Translationsをクリックします。

  5. [ Add Language]をクリックして新しい言語を追加します。

    フィールド 詳細
    Name 言語を識別するための名前を入力します。

    Language

    ドロップダウンリストから[Language ]を選択します。
    Country ドロップダウンリストから[Country ]を選択します。
    Fallback 特定のラベルの翻訳がない場合、使用するFallback 言語を選択します。
  6. Saveをクリックします。 Guideで入力されたデフォルトのラベルが表示されます。
  7. 各Translation Keyに対して、Translation Valueを入力します。 これは、Guideウィジェットで訪問者に表示される文字列です。 Guideで提供されたデフォルトラベル用のTranslation Keyは変更できません。
  8. 必要に応じて、ページ下部の追加をクリックして、新規の翻訳キーを作成します。 Translation KeyとTranslation Valueを設定します。 作成する任意の新規ラベル用のTranslation Keyを変更することができます。 新規の翻訳キーを追加する場合は、必ず訪問者に提供するすべての言語で翻訳された値を入力するようにしてください。

  9. [保存]をクリックします。

言語用のラベルを編集する

  1. アプリセレクターをクリックして、次を選択します：ACD。

  2. Points of Contact Digitalに移動します。

  3. General channel featuresで、[Guide]をクリックします。

  4. Translationsをクリックします。

  5. 編集する言語の横にある[Edit]をクリックします。

  6. ラベルまでスクロールして、Translation Valueを編集して更新します。 たとえば、チャットを開始するボタンのラベルを Begin ChatからStart Chatに変更することができます。

  7. Saveをクリックします。

Guideウィジェットとインタラクトする

訪問者は、マウスやキーボードを使ってボタンの間を移動することで、Guideウィジェットとインタラクトすることができます。 SafariまたはFirefoxブラウザーでMacを使用している場合、ブラウザーで有効になっていない限り、キーボードナビゲーションは訪問者用に制限されることに注意してください。 Chromeブラウザーを使用している場合、キーはデフォルトで期待通りに作動します。