• 製品
    • ヘルプデスクAI

      フロントラインサポートを自動化

    • チームメイトAI

      チームの質問を自動化

    • ライブチャットAI

      サイト上のチャットバブル

    • 統合

      AIをツールと接続

  • リソース
    • ブログ
    • 顧客ストーリー
    • ヘルプセンター
  • 価格
Zendesk AI

Zendeskウェブウィジェット設定ガイドの完成版

Iohan Chan

Iohan Chan

Writer

サポートチケットに溺れるのにうんざりしていませんか?サポートチームが作業負荷を増やさずに問題を迅速に解決できることを望んでいませんか?それがまさにZendesk Web Widgetが実現することです。セルフサービスオプションとリアルタイムサポートを有効にすることで、Zendeskのベンチマークデータによると、平均で25%のサポートチケットを削減できます。

このガイドでは、インストール、カスタマイズ、そして高度な設定を通じて、シームレスで顧客に優しいサポート体験を作成する方法を説明します。さらに自動化を進めたい場合は、eesel AIのようなAIソリューションを統合することで、問題を迅速に解決し、チケットを回避し、チームが本当に重要なことに集中できるようにします。

eeselはZendeskメッセージングに直接追加できるため、ウェブウィジェットを設定し、eeselを追加して、サポートのための柔軟で完全にカスタマイズ可能なメッセージングシステムを作成できます。

Zendesk Web Widgetとは?

Zendesk Web Widgetは、ウェブサイトやヘルプセンターに直接埋め込まれる組み込みのカスタマーサポートツールであり、セルフサービスオプションを有効にし、最も必要な場所でリアルタイムサポートを提供することで、チケットの量を減らすのに役立ちます。 Zendeskのドキュメントによると、これはデジタルサポートハブとして機能し、24時間365日利用可能で、顧客がページを離れることなく回答を見つけたり、サポートとチャットしたり、チケットを提出したりするのを支援します。

Zendeskは、Web Widgetの2つの異なるバージョンを提供しています:

機能 Web Widget(メッセージング) Web Widget(クラシック)
最適な用途 継続的なサポートを必要とする現代のビジネス 詳細なフォームを必要とする組織
ライブチャット 継続的な会話 セッションベースのチャット
ヘルプセンター検索 記事の提案付きで可能 コンテキストヘルプ付きで可能
チケット作成 データキャプチャの簡素化 完全な連絡フォーム
ボット統合 ネイティブAIサポート 限定的な機能

 

メッセージングWeb Widgetは、AIによる支援を備えたインタラクティブで常時オンのサポートシステムを望むビジネス向けに設計されています。一方、クラシックWeb Widgetは、リアルタイムチャットよりも構造化されたチケット管理を優先するチームに適しています。

A split screen comparison of web widgets, on the left is the classic interface, on the right is the messaging interface

Web Widgetのインストール方法

Zendesk Web Widgetの設定は慎重な計画が必要ですが、顧客サポートの能力を大幅に向上させることができます。 Zendeskによると、クラシックとメッセージングの2つのバージョンがあります。このガイドは、現代のサポートニーズに対応する機能が強化されたメッセージングバージョンに焦点を当てています。

ステップ1: ZendeskでWeb Widgetを追加

  1. 管理センターで、チャネル > メッセージングとソーシャル > メッセージングに移動します
  2. チャネルを追加を選択し、Web Widgetを選びます
  3. 初期設定を完了します:
    • 明確なチャネル名を指定します
    • ブランドを選択します(マルチブランドアカウントの場合)
    • 基本的なメッセージングの設定を行います
A screenshot of Zendesk's Admin panel, highlighting the configuration options in the Web Widget setup wizard

ステップ2: Webウィジェットコードをウェブサイトに埋め込む

設定後、Webウィジェットを以下のスクリプトを使用してウェブサイトに埋め込む必要があります:

<!– このコードを閉じる </body> タグの前に追加してください –>
<script id=’ze-snippet’ src='<https://static.zdassets.com/ekr/snippet.js?key=YOUR_KEY>’></script>

Zendeskは推奨しています このスクリプトを閉じる </body> タグの直前に配置することで、最適なページロードパフォーマンスを確保します。WordPressのようなコンテンツ管理システム(CMS)を使用している場合、このコードは通常、テーマ設定やコードインジェクションプラグインを介して追加できます。

ステップ3: インストールを確認する

Webウィジェットが正しく動作していることを確認するには:

  1. 初めての訪問者をシミュレートするために、シークレットウィンドウでウェブサイトを開きます。
  2. ウィジェットが指定された場所に正しいブランディングで表示されることを確認します。
  3. 以下を含むコア機能をテストします:
    • ヘルプセンター検索
    • ライブチャットのやり取り
    • チケット提出フォーム
  4. テストチケットを提出し、サポートチームに正しくルーティングされることを確認します。

ウィジェットをカスタマイズする

インストールが成功した後、Webウィジェットの設定を個別に調整し始めることができます。カスタマイズプロセスは、ブランドアイデンティティに合ったシームレスな体験を作成することに焦点を当てています。

Screenshot of Zendesk's web widget customization panel showing branding and appearance settings

視覚要素を設定することから始めましょう。ボタンやヘッダーのブランドの主要な色を設定し、アクセシビリティを確保するためのコントラストチェックを組み込みます。エンタープライズユーザーはZendeskのブランディングを削除し、自社のロゴを追加できます。ランチャーアイコンをサイトのレイアウトに合わせて戦略的に配置します。

次に、ウィジェットの動作設定を定義します。左または右下のコーナー配置を選択し、デフォルトの状態(展開または折りたたみ)を設定し、モバイル対応を構成します。また、顧客の期待を管理するための営業時間を設定することもできます。

ボタンのテキスト、デフォルトの言語設定、自動応答を設定してウィジェットのをカスタマイズします。多言語サイトの場合、グローバルなオーディエンスをサポートするために適切な翻訳を追加します。

カスタマイズの変更は通常、すべてのウィジェットインスタンスに反映されるまで約10分かかることを覚えておいてください。異なるデバイスやブラウザで設定をテストし、一貫した体験を確保します。

Zendeskは強力なカスタマイズオプションを提供していますが、eesel AIと統合することで、インテリジェントな応答と高度な自動化を備えたウィジェットを強化し、よりパーソナライズされた顧客体験を創出できます。

コア機能の設定

Webウィジェットを正しく設定することで、顧客が迅速に回答を見つけ、必要に応じてサポートに接続できるようになります。重要な2つのコンポーネントは、ヘルプセンターの統合と連絡フォームのカスタマイズであり、シームレスで効率的なサポート体験を作り出す上で重要な役割を果たします。これらを適切に設定することで、チケットの量を減らし、応答時間を改善し、顧客が不必要な遅延なく必要なサポートを受けられるようにします。

ヘルプセンターの設定

よく構造化されたヘルプセンターは、顧客が自分で回答を見つけることを可能にし、サポートチケットの数を減らし、解決時間を改善します。この機能を有効にするには:

  1. 管理センター > チャンネル > ウィジェット > カスタマイズに移動します。
  2. ヘルプセンター検索をオンにして、顧客が記事を検索できるようにします。
  3. 設定をクリックして、主要なオプションを構成します:
    • コンテキストヘルプ – ページの内容に基づいて関連する記事を表示します。
    • 記事の推奨 – よくあるフォローアップ質問に対応する関連コンテンツを提案します。
    • アクセス制御 – 特定の記事をログインユーザーに制限します。

Screenshot of Zendesk's Help Center configuration panel for the classic web widget

ヘルプセンターが簡単にナビゲートでき、最新の状態であることを確認することで、顧客が必要な回答を迅速に見つけることができます。エンタープライズユーザー向けには、機密コンテンツへのアクセスを制限することで、顧客が自分に関連する情報のみを閲覧できるようにします。

お問い合わせフォームの設定

顧客が直接のサポートを必要とする場合、よく構築されたお問い合わせフォームは、問い合わせが効率的に適切なチームに届くことを保証します。フォームを設定しカスタマイズするには:

  1. ウィジェット設定を開き、お問い合わせフォームのトグルが有効になっていることを確認します。
  2. 関連する詳細を収集するためにフォームフィールドを調整します:
    • 名前とメール – 必須または任意として設定します。
    • カスタムチケットフィールド – 注文番号や問題のカテゴリなど、特定の情報を取得します。
    • ルーティングルール – チケットを自動的に適切な部門に割り当てます。

A screenshot highlighting the contact form settings of the web widget

高度なウィジェット設定

Zendesk Web Widgetの高度な設定を構成することで、企業は安全な認証とマルチブランドサポートを効果的に管理できます。ユーザー認証は顧客データの保護を確保し、マルチブランド管理は同じZendeskアカウントで異なるブランドに対してカスタマイズされたサポート体験を提供することを可能にします。これらの機能を正しく設定することで、シームレスで安全な顧客とのやり取りが保証されます。

ユーザー認証

Web Widgetへの安全なアクセスを確保することは、顧客との信頼を築き、機密データを保護するのに役立ちます。Zendeskは、ウィジェットにアクセスできる人と表示できるデータを細かく制御するための認証オプションを提供しています。

安全な認証を有効にするには:

  1. 管理センター > チャンネル > ウィジェット > セキュリティ設定 に移動します。
  2. アクセスを許可する前にユーザーを確認するために、JWT認証を有効にします。
  3. 特定のドメインへのウィジェットアクセスを制限するために、CORSポリシーを設定します。

A screenshot of the authentication settings in the admin panel of Zendesk

適切な認証により、許可されたユーザーのみが機密サポートコンテンツにアクセスできるようになり、セキュリティリスクを軽減しながら顧客の信頼を向上させます。代わりに、Zendeskの複雑な設定の手間をかけずに、より複雑なセットアップを希望する場合は、eesel AIを使用してカスタム検証アクションと個別のボットアクセスを設定できます。

マルチブランド管理

複数のブランドを管理する企業にとって、すべての顧客接点で一貫したサポート体験を確保することが重要です。Zendeskは、異なるブランドごとに個別のウィジェット設定を可能にし、各ブランドが独自のアイデンティティを維持しながら、単一のサポート構造の下で効率的に運営できるようにします。

マルチブランドサポートを設定するには:

  1. 管理センター > チャンネル > ウィジェットに移動します。
  2. 設定が必要な各ブランドに対してウィジェットを追加をクリックします。
  3. ウィジェットのスタイリング、ブランディング、ナレッジベースをカスタマイズして、ブランドのアイデンティティを反映させます。
A screenshot of Zendesk's multi-brand widget configuration interface showing brand selection

複数のブランドにわたって一貫した応答時間とナレッジベースの正確性を維持することは、どのブランドとやり取りしても顧客にシームレスな体験を提供するのに役立ちます。

Webウィジェットを最適化するためのベストプラクティス

適切に最適化されたZendesk Webウィジェットは、顧客が遅延や混乱、技術的な問題なしに必要なサポートを受けられるようにします。遅いまたは使いにくいウィジェットはユーザーを苛立たせ、問い合わせの放棄や不要なチケットの発生につながる可能性があります。パフォーマンス、応答性、使いやすさを少し改善するだけで、顧客満足度に大きな影響を与えることができます。

パフォーマンスの向上

パフォーマンスの問題は、過剰なコード、遅い読み込み時間、またはリソース管理の不備に起因することがよくあります。小さな非効率でも積み重なると、ウィジェットが遅く感じたり、応答しなくなったりします。パフォーマンスの最適化には以下が含まれます:

  • カスタムJavaScriptとCSSの削減 – カスタムスクリプトが多すぎると、特にモバイルデバイスでの読み込み時間が遅くなります。
  • 遅延読み込みの有効化 – 不要な要素が一度に読み込まれるのを防ぎ、機能を犠牲にすることなくページ速度を向上させます。
  • コンテンツデリバリーネットワーク(CDN)の使用 – CDNはウィジェットのアセットをより速く提供し、異なる場所のユーザーに対する遅延を減らします。

スムーズなユーザー体験の確保

Webウィジェットがすばやく読み込まれても、使いやすさの問題が摩擦を生むことがあります。さまざまなデバイス、ブラウザ、顧客シナリオでテストすることで、シームレスな体験を確保します。注力すべき主な領域は次のとおりです:

  • ブラウザ互換性 – ウィジェットはChrome、Firefox、Safari、Edgeでスムーズに動作する必要があります。
  • モバイル対応 – 多くのユーザーが携帯電話からサポートにアクセスするため、ウィジェットはさまざまな画面サイズに適切にスケールする必要があります。
  • 負荷テスト – 高トラフィックはウィジェットのパフォーマンスに負担をかける可能性があるため、ピーク使用時の処理能力をテストすることが重要です。
  • 認証設定 – サポートシステムがログイン認証を必要とする場合、遅延や繰り返しのエラーなしに動作する必要があります。

一般的な問題と解決策

問題 影響 解決策
モバイル表示の問題 顧客がサポートオプションをナビゲートするのに苦労する さまざまなデバイスでテストし、より良い応答性のためにレイアウトを調整する
遅いパフォーマンス ユーザーが長い読み込み時間を経験し、苛立ちを感じる カスタムスクリプトを削減し、アセットを最適化し、遅延読み込みを有効にする
認証エラー 顧客がログインできず、チケットを提出できない Zendeskの認証設定に従う
一貫性のないブランディング ウィジェットが場違いに見え、信頼を損なう 色、フォント、スタイルがウェブサイトのデザインと一致していることを確認する

 

プロのヒント: eesel AIのような自動監視ソリューションを実装して、顧客に影響を与える前にパフォーマンスの問題を積極的に特定することを検討してください。

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

幸いなことに、AIを活用した自動化により、手動の作業負荷を軽減し、応答の正確性を向上させ、一般的な顧客の問い合わせを即座に処理することで、Zendesk Webウィジェットの機能を拡張できます。エージェントを待つ代わりに、顧客は即座に回答を得たり、適切なリソースに案内されたりすることができ、より迅速な解決と優れたサポート体験を保証します。

eesel AIは、既に使用しているZendeskメッセージングウィジェットに直接統合でき、既に設定しているカスタムワークフローと併用することもできます。

ZendeskはネイティブのAI機能を提供していますが、eesel AIのようなサードパーティのソリューションは、Webウィジェットを強化するためのより柔軟でコスト効果の高いオプションを提供します。統合プロセスは次の4つの主要な領域に焦点を当てています:

  • ビジネスニーズに合わせたカスタマイズされたワークフローによるチケット解決の自動化
  • 効率的に分類および割り当てられるようにするチケットルーティングの強化
  • エージェントにエスカレーションする前に問題をトラブルシューティングできるスマートなチャットボットの対話の提供
  • AIから人間のサポートへのスムーズなエージェント引き継ぎの確保

A screenshot highlighting the Zendesk integration in eesel AI's integration panel

ウェブウィジェットをよりスマートに活用する

最終的に、Zendeskのウェブウィジェットは、チケット数を減らし、セルフサービスを強化し、リアルタイムのサポートを可能にすることで、カスタマーサポートを向上させる強力なツールです。AIを活用したチャットのためのメッセージングウェブウィジェットを使用する場合でも、構造化されたチケット管理のためのクラシックウェブウィジェットを使用する場合でも、適切な設定とカスタマイズにより、ビジネスニーズに合ったものにすることができます。

ウェブウィジェットから最大の価値を引き出すためには、主要なパフォーマンス指標を追跡し、ヘルプセンターを最新の状態に保ち、ワークフローを洗練して優れた顧客体験を提供することが重要です。多くの企業は、AIによる自動化が、作業負荷を増やすことなくサポートを拡大するのに役立つと感じています。

eesel AIを使用すると、チームは返信を自動化し、チケットを分類し、応答の正確性を向上させることができ、エージェントはより複雑な問題に集中することができます。AI駆動の自動化をウェブウィジェットで試してみたい場合は、こちらから無料の7日間トライアルを開始するか、hi@eesel.appまで詳細をお問い合わせください。

    他のブログを読む

    Zendesk AI

    AIを使用してZendeskのチケット量を減らす方法

    Zendeskのチケット量が多くて困っていますか?AIを活用した自動化は、チケットを減らし、問題を即座に解決し、サポートのワークフローを効率化するのに役立ちます。AIがどのようにカスタマーサービスの効率を変革するかをご覧ください。

    Kenneth Pangan

    Kenneth Pangan

    Writer
    Zendesk AI

    ZendeskナレッジベースにAIを実装する方法:完全ガイド

    Zendeskのナレッジベースを整理し、最新の状態に保つことは難しいかもしれませんが、AIを活用することでそれを容易にすることができます。

    Iohan Chan

    Iohan Chan

    Writer

    7日間の無料トライアルを始めましょう

    クレジットカードは必要ありません。