モダンなデザインは、製品サポート業務にプロフェッショナルな外観と雰囲気をもたらし、ユーザーエクスペリエンスを向上させるのに役立ちます。

SDK Xの登場により、サポートメッセージング用のHelpshiftチャットサービスが更新されました。チャットサービスの最新のルックアンドフィールへの変更は、2021年6月15日に実施され、チャットUIの多くの側面を高度に制御できるようになりました。 

注：2021年6月15日より前にサブスクリプションを開始したHelpshiftのお客様は、従来のバージョンのウェブチャットウィジェット埋め込みコードを現在の実装にアップグレードできます。

ブランディングとカスタマイズ

「ブランディングとカスタマイズ」ページの機能を使用すると、標準のチャットUI要素のカラーオプションを設定できます。図1に示すように、便宜上、システムデフォルト（「プリセット」）の配色も含まれています。もちろん、いつでもお好みのカラーパレットで上書きできます。
   

図1 — カラープリセット

図2は、デスクトップブラウザでのチャットUIにおけるHelpshiftカラープリセットの外観を示しています。

図2 — デスクトップブラウザのルックアンドフィール

「ブランディングとカスタマイズ」ページでわずか5つの*基本色を設定するだけで、20を超えるチャットUI領域と要素の外観を調整できます。

• 保存された「アクセントカラー」は、バナー、ヘッダー、チャットランチャーボタン、およびエンドユーザーのメッセージバブルに適用されます。
• 保存された「アクションカラー」は、リンク、ボタン、およびハイライトに適用されます。
• 保存された「背景色」は、ページ全体とチャットの背景に適用されます。
• 保存された「前景色」は、バナーテキスト、カード、ポップアップ、モーダル、エージェントのメッセージバブル、ボットのメッセージバブル、チャットウィジェットの返信フッター、クリック可能なオプションの「ピル」、リストピッカー、およびインテントピッカーに適用されます。
• 保存された「コンテンツカラー」は、メッセージテキスト、アイコン、線、およびエージェントのメッセージバブルテキストに適用されます。

注：チャットUIでは、「セカンダリ背景」色は使用しません。

• 一部のチャットUI要素は、保存された色の1つを色合いとして使用し、100％未満の不透明度で適用します。

• 色関連の設定に加えて、「ブランディングとカスタマイズ」ページには、ロゴ、バナー、画像、ファビコン、およびフォントの使用に関する設定が含まれています。

図3は、さまざまなチャット画面とUI要素に対する色の効果を示しています。これらはすべて、製品または会社のブランドアイデンティティに合わせて色を変更できます。

図3 — チャットウィジェットの画面サンプル 

色はチャットフレームの外観に影響します

チャットUIの他のすべての要素を囲み、背後にロードされる視覚的な境界線は、チャットフレームと呼ばれます。

チャットフレームのルックアンドフィールは、表示場所によってわずかに異なる場合があります。（図4を参照。）

• デスクトップブラウザでは、標準のWebページの一部のみをカバーするウィジェットとしてロードされます。
• モバイルブラウザでは、ブラウザウィンドウ全体に表示されます。
• iOSデバイスのアプリ内では、画面全体に表示されます。
• Androidデバイスのアプリ内では、画面全体に表示されます。

図4 — 可変のルックアンドフィール

図5は、Helpshiftカラープリセットを使用して、チャットフレームにさまざまな色の選択を適用する場所を具体的に示しています。

図5 — チャットフレームの色

色はエージェントとボットからのメッセージの外観に影響します

図6は、Helpshiftカラープリセットを使用して、ボットとカスタマーサービスエージェントが送信するメッセージに色の選択を適用する方法を示しています。

図6 — エージェントとボットからのメッセージ

色はエンドユーザーからのメッセージの外観に影響します

図7は、Helpshiftカラープリセットを使用して、エンドユーザーが送信するメッセージに色の選択を適用する方法を示しています。

図7 — エンドユーザーからのメッセージ

色はフォームの外観に影響します

図8は、Helpshiftカラープリセットを使用して、エンドユーザーが次の状況で表示するフォームに色の選択を適用する方法を示しています。

• カスタマーサービスチームの営業時間外にチャットしようとした場合
• カスタマーサービスエージェントが利用できないときにチャットしようとした場合

送信されたフォームからの出力は、エンドユーザーが応答を待っていることをカスタマーサービス組織に警告します。

図8 — フォーム

色はCSAT(顧客満足度)調査の外観に影響します

図9は、Helpshiftカラープリセットを使用して、CSAT(顧客満足度)調査に色の選択を適用する方法を示しています。

図9 —CSAT(顧客満足度)調査

UI要素の状態は、リストとオプションの色に影響を与える可能性があります

図10は、Helpshiftカラープリセットを使用して、エンドユーザーがオプションの「ピル」を操作する前と後に、色の選択を適用する方法を示しています。

図10 — オプションの「ピル」

図11は、Helpshiftカラープリセットを使用して、リストに色の選択を適用する方法を示しています。

図11 — リストピッカー

チャットUIの返信フッターの可変的な外観について

特定の状況下では、チャットフレームの下部にあるUI要素の外観が異なる場合があります。次に例を示します。

• 要素の色または不透明度が変わる場合があります。
• UIコーチングテキストが表示される場合があります。
• 英数字キーボードが表示される場合があります。
• 絵文字キーボードが表示される場合があります。

図12は、Helpshiftカラープリセットを使用して、チャットUIの返信フッターの条件付きのルックアンドフィールを示しています。

図12 — 可変チャットUI返信フッター