Zendesk Web Widget の位置とサイズをカスタマイズする方法

Zendesk Web Widget (Zendeskウェブウィジェット) の位置を正しく調整することは、役立つカスタマーサポートチャネルと迷惑な気晴らしとの違いを生む可能性があります。隅にきちんと隠したい場合でも、目立つように表示したい場合でも、位置調整のオプションは、使用しているウィジェットの種類によって異なります。

ここでは、各 Zendesk ウィジェットのバリアントの位置とサイズをカスタマイズする方法を正確に説明します。

どの Zendesk ウィジェットをお持ちですか？

位置調整を調整する前に、どのウィジェットを使用しているかを知る必要があります。Zendesk は 3 つの主要なウィジェットタイプを提供しており、それぞれに異なるカスタマイズ機能があります。

Web Widget (Messaging) は、Zendesk Suite (Zendeskスイート) または Support + Chat (サポート + チャット) の Team プラン以上で、メッセージングが有効になっているアカウントの現在の標準です。会話バブルを備えた最新のチャットインターフェースを備えており、セッション間で永続的な会話をサポートします。

Web Widget (Classic) は、メッセージングを有効にしていないアカウント向けのレガシーオプションです。ヘルプセンターの検索、お問い合わせフォーム、およびオプションのライブチャットを従来のインターフェースに組み合わせています。このバージョンは、カスタマイズのための最も広範な JavaScript API を提供します。

Chat-only Web Widget (Classic) は、Support 製品なしで Chat 製品のみをお持ちの場合に表示されます。これは基本的に、チケット機能のないチャットコンポーネントです。

ウィジェットを識別するには、管理センターを確認してください。チャネル > メッセージングとソーシャル > メッセージング が表示されている場合は、メッセージング Web Widget があります。チャネル > Classic > Web Widget が表示されている場合は、Classic バージョンを使用しています。

出典: Zendesk ウィジェット識別ガイド

Web Widget (Messaging) の位置調整

メッセージング Web Widget は、管理センターのインターフェースを通じて簡単な位置調整コントロールを提供します。

位置設定にアクセスするには:

1. 管理センターを開きます
2. サイドバーの チャネル をクリックします
3. メッセージングとソーシャル > メッセージング を選択します
4. 編集するチャネル名をクリックします
5. スタイル タブを開きます

位置オプション:

メッセージングウィジェットは、右下 (デフォルト) または 左下 の 2 つの位置をサポートしています。Classic ウィジェットとは異なり、UI を介してページの上部に配置することはできません。

オフセット構成:

オフセット値を使用して、正確な配置を微調整できます。デフォルトは、選択したエッジから 16 ピクセルです。これらの値を大きくすると、ウィジェットが角から内側に移動し、小さくすると、エッジに近づきます。

外観のカスタマイズ:

厳密には位置調整ではありませんが、これらの設定はウィジェットの視覚的なフットプリントに影響を与えます。

• 境界線の半径: 0px (鋭い角) から 20px (完全に丸い) まで調整します
• ランチャーの形状: 正方形 (調整可能な曲線付き)、円、またはカスタムランチャーを選択します
• サイズ要素: ランチャーボタンのサイズは固定されていますが、幅を広げるオプションのテキストを追加できます

モバイルに関する考慮事項:

モバイルで表示 を有効にして、モバイル SDK (ソフトウェア開発キット) にランチャーテキストを表示します。ウィジェットは、小さい画面に合わせてサイズを自動的に調整しますが、位置は選択した角に固定されたままです。

出典: Web Widget の外観の構成

Web Widget (Classic) の位置調整

Classic ウィジェットは、メッセージングウィジェットよりも位置調整の柔軟性が高く、画面の隅に配置できます。

位置設定にアクセスするには:

1. 管理センターを開きます
2. サイドバーの チャネル をクリックします
3. Classic > Web Widget を選択します
4. 位置 コンポーネントを見つけます

四隅の位置調整:

Classic ウィジェットは、次の 4 つの角をすべてサポートしています。

• 左上
• 右上
• 左下
• 右下

上部に配置すると、ウィジェットは開いたときに下方向に展開されます。下部に配置すると、上方向に展開されます。

基本的なオフセット調整:

位置コンポーネントには、選択した角からの配置を微調整するためのオフセットコントロールが含まれています。これは、ページ上の他の固定要素との競合を回避するのに役立ちます。

高度な JavaScript カスタマイズ:

正確な制御のために、Classic ウィジェットは window.zESettings を介して JavaScript 構成を受け入れます。このアプローチを使用すると、正確なピクセル値を設定したり、ページコンテンツに基づいて位置を動的に変更したりすることもできます。

出典: Web Widget の位置変更

レガシー Chat ウィジェットの位置調整

レガシー Chat 専用アカウントを使用している場合、ウィジェットの設定は別の場所にあります。

位置設定にアクセスするには:

1. Chat ダッシュボードを開きます
2. 設定 > ウィジェット に移動します
3. ウィジェットの位置 ドロップダウンを探します

利用可能なオプション:

レガシー Chat ウィジェットは、Classic Web Widget と同じ 4 つの角をサポートしています。ただし、カスタマイズオプションはより制限されています。Classic ウィジェットが提供する広範な JavaScript API にアクセスすることはできません。

重要な注意: 以前にスタンドアロン Chat ウィジェットを使用していた多くのアカウントでは、設定が Support 製品の Web Widget (Classic) 構成内で管理されるようになりました。Chat に位置設定が表示されない場合は、代わりに管理センター > チャネル > Classic > Web Widget を確認してください。

出典: レガシー Chat ウィジェットのカスタマイズ

JavaScript API を使用した高度な位置調整

正確な制御が必要な開発者向けに、Web Widget (Classic) JavaScript API は広範な位置調整機能を提供します。

基礎:

すべてのカスタマイズは window.zESettings オブジェクトを介して行われます。これは、ウィジェットスクリプトがロードされる前に定義する必要があります。

window.zESettings = {
  webWidget: {
    position: {
      vertical: 'top',
      horizontal: 'right'
    },
    offset: {
      horizontal: '20px',
      vertical: '100px'
    }
  }
};

位置プロパティ:

一般的な位置調整のシナリオ:

余裕のある右上:

window.zESettings = {
  webWidget: {
    position: { vertical: 'top', horizontal: 'right' },
    offset: { horizontal: '30px', vertical: '80px' }
  }
};

フッターを避ける左下:

window.zESettings = {
  webWidget: {
    position: { vertical: 'bottom', horizontal: 'left' },
    offset: { horizontal: '20px', vertical: '100px' }
  }
};

zIndex コントロール:

ウィジェットがナビゲーションバーやモーダルなどの他の要素の背後に表示される場合は、JavaScript 設定で zIndex 値を大きくします。

window.zESettings = {
  webWidget: {
    zIndex: 999999
  }
};

埋め込みモード:

配置を完全に制御するには、ウィジェットをフローティングさせるのではなく、ページ上の特定のコンテナ内に埋め込むことができます。これには追加の JavaScript が必要であり、通常はウィジェットをオーバーレイとしてではなく、ページレイアウトの一部として表示する場合に使用されます。

出典: Web Widget API の概要

ウィジェットの位置調整に関するベストプラクティス

位置を正しく設定することは、単に角を選択するだけではありません。効果的なウィジェットの配置に関する実用的なガイドラインを次に示します。

コンテンツのレイアウトを考慮する:

ウィジェットを重要なナビゲーションやコンテンツを妨げない場所に配置します。右利きのユーザーが多く、多くの Web サイトではその領域に重要度の低いコンテンツがあるため、右下が人気があります。ただし、サイトに固定フッターまたは右下に重要な CTA (コールトゥアクション) がある場合は、左下または上部の配置を検討してください。

モバイルレスポンシブ:

ブラウザのサイズ変更だけでなく、実際のモバイルデバイスで選択した位置をテストします。ウィジェットランチャーは、ナビゲーションメニュー、Cookie 同意バナー、またはフローティングアクションボタンを覆うべきではありません。小さい画面では、ネイティブブラウザ UI との重複を避けるために、より大きなオフセット値が必要になる場合があります。

アクセシビリティに関する考慮事項:

ウィジェットは WCAG (Web Content Accessibility Guidelines) のコントラストガイドラインを満たすように色を自動的に調整しますが、アクセシビリティにとっても位置調整が重要です。ランチャーがフォーカスインジケーターまたはスキップトゥコンテンツリンクを覆わないようにしてください。キーボードでナビゲートするユーザーは、過度のタブ操作なしにウィジェットに到達できる必要があります。

カスタムランチャーを使用する場合:

どちらのウィジェットタイプも、デフォルトのランチャーを非表示にして、独自のトリガーを作成することをサポートしています。これは、ナビゲーションの特定のボタンからウィジェットを開きたい場合、またはフローティングランチャーがデザインシステムと競合する場合に役立ちます。カスタムランチャーを使用するには、開閉状態を処理するための追加の開発作業が必要になることに注意してください。

テストの推奨事項:

• さまざまな画面サイズ (320px モバイルから 1920px デスクトップ) での位置を確認します
• ウィジェットが Cookie バナー、年齢確認モーダル、またはプロモーションポップアップと重複していないことを確認します
• 空白のページだけでなく、実際の Web サイトコンテンツでテストします
• サイトのスクロール動作で位置がどのように機能するかを検討します

一般的な位置調整の問題のトラブルシューティング

明確な設定でも、ウィジェットの位置が期待どおりに機能しない場合があります。最も一般的な問題を解決する方法を次に示します。

ウィジェットが期待される位置に表示されない:

まず、編集している設定が正しいウィジェットタイプであることを確認します。メッセージングウィジェットへの変更は、Classic ウィジェットには影響しません。ブラウザのキャッシュをクリアし、シークレットウィンドウでウィジェットを確認して、キャッシュされた JavaScript を除外します。

z-index の競合:

ウィジェットがナビゲーションバーやモーダルなどの他の要素の背後に表示される場合は、JavaScript 設定で zIndex 値を大きくします。999999 から始めて、他の問題が発生する場合は、値を小さく調整します。一部のサードパーティツールは非常に高い z-index 値を使用するため、試してみる必要がある場合があります。

モバイルの位置調整の問題:

モバイルブラウザは、デスクトップとは異なる方法でビューポートユニットを処理します。オフセット値がデスクトップでは機能するが、モバイルでは機能しない場合は、パーセントベースの位置調整を使用するか、モバイルビューポート専用の異なるピクセル値をテストしてみてください。メッセージングウィジェットには専用のモバイル設定がありますが、Classic ウィジェットでは、モバイル固有の位置調整に CSS メディアクエリが必要です。

変更が Web サイトに反映されない:

ウィジェットの設定が反映されるまでに数分かかる場合があります。待っても変更が表示されない場合は、ウィジェットが実際にインストールされているページを見ていることを確認してください。設定を有効にするには、ウィジェットスニペットがページに存在する必要があります。

キャッシュと CDN に関する考慮事項:

CDN (コンテンツデリバリーネットワーク) またはキャッシュレイヤーを使用している場合、ウィジェットの JavaScript がキャッシュされている可能性があります。位置調整の変更を行った後、CDN キャッシュをパージします。Classic ウィジェットの場合、window.zESettings への変更はページロード時にすぐに有効になるため、管理センターの変更ほどキャッシュは問題になりません。

AI で Zendesk ウィジェットを強化する

ウィジェットの位置を完璧に調整したら、AI がそこから来る会話をどのように処理できるかを検討してください。Zendesk は組み込みの AI 機能を提供していますが、応答を自動化し、会話をルーティングする方法にもっと柔軟性が必要になる場合があります。

これは、AI チームメイトがウィジェット戦略を補完できる場所です。チケットを収集するだけでなく、会話で一般的な問題を直接解決する AI エージェントを配置できます。AI は過去のチケットとヘルプセンターのコンテンツから学習するため、応答はブランドの声とポリシーに一致します。

基本的なチャットボット機能を超えることを検討している場合は、Zendesk と統合する AI 搭載のサポートオプション を検討してください。適切な AI セットアップは、ルーチンな質問を自動的に処理し、複雑な問題を人間のチームにシームレスにエスカレートできます。

完全な AI ソリューションを必要とするチームの場合、特定のナレッジベースでトレーニングされた AI チャットボット は、一般的な代替手段よりも正確な応答を提供できます。価格オプション を確認して、サポートボリュームに合うものを確認してください。