Zendesk Web Widget埋め込みコードの取得とインストール方法

Zendesk Web Widget（Zendeskウェブウィジェット）は、Webサイトにカスタマーサポートを追加する最も簡単な方法の1つです。これは、サイトの隅に表示される小さなチャットバブルで、訪問者はページを離れることなく、ヘルプセンターを検索したり、会話を開始したり、チケットを送信したりできます。

しかし、顧客がそれを使用する前に、埋め込みコードを取得してサイトに追加する必要があります。このガイドでは、新しいMessaging（メッセージング）ウィジェットまたはClassic（クラシック）バージョンのどちらを使用している場合でも、その方法を正確に説明します。

2つのZendesk Web Widgetバージョンについて

Zendeskは2つの異なるウィジェットタイプを提供しており、どちらを使用しているかを知ることがインストールにとって重要です。

**Messaging Web Widget（メッセージングウェブウィジェット）**は、最新バージョンです。継続的な会話（顧客は同じチャットを離れて戻ってくることができます）、ネイティブAIエージェント、およびリアルタイムメッセージングをサポートします。これは、Zendeskが新しいセットアップに推奨するものです。詳細については、Messagingインストールガイドをご覧ください。

**Web Widget (Classic)（ウェブウィジェット（クラシック））**は、レガシーバージョンです。セッションベースのチャットを使用し、より詳細なフォームオプションを提供します。一部の古いZendeskアカウントではまだこれを使用しており、完全にサポートされています。詳細については、Classicウィジェットのドキュメントをご覧ください。

両者の比較は次のとおりです。

どちらを使用しているかわからない場合は、管理センターを確認してください。ナビゲーションパスですぐにわかります。詳細については、Zendeskの開発者ドキュメントをご覧ください。

開始する前に必要なもの

埋め込みコードを取得する前に、次のものがあることを確認してください。

• 管理者アクセス権を持つZendeskアカウント
• WebサイトのHTMLまたはコンテンツ管理システムへのアクセス
• 有効化されたヘルプセンター（Messagingウィジェットの自動埋め込みオプションに必要）
• サイトにスクリプトを配置する場所に関する基本的な知識

WordPress（ワードプレス）、Shopify（ショッピファイ）、またはその他のプラットフォームを使用している場合は、テーマファイルを編集したり、プラグインをインストールしたりするための管理者アクセス権が必要です。AI搭載の応答をウィジェットに追加しようとしているチーム向けに、eesel AIは、ヘルプセンターと過去のチケットから学習するZendesk統合を提供しています。

ステップ1：Zendeskでウィジェットの設定にアクセスする

まず、Zendesk管理センターの適切な場所に移動します。

**Messaging Web Widget（メッセージングウェブウィジェット）**の場合：管理センター > チャネル > メッセージングとソーシャル > メッセージングに移動します。

**Classic Web Widget（クラシックウェブウィジェット）**の場合：管理センター > チャネル > Classic > Web Widgetに移動します。

複数のウィジェットが構成されている場合は、ウィジェットのリストが表示されます。インストールするウィジェットの名前をクリックします。これにより、コードを生成する前に外観と動作をカスタマイズできる構成パネルが開きます。

ステップ2：ウィジェットの外観と機能を構成する

埋め込みコードを生成する前に、ウィジェットの外観と機能を設定します。これにより、後で更新する必要がなくなります。

構成する視覚的な設定：

• 色（Colors）：ボタンとヘッダーにブランドのプライマリカラーを設定します
• 位置（Position）：左下隅または右下隅を選択します
• ランチャースタイル（Launcher style）：ボタンに表示されるアイコンとテキストを選択します
• ロゴ（Logo）：会社のロゴをアップロードします（エンタープライズプランでは、Zendeskのブランドを削除できます）

有効にする機能コンポーネント：

• ヘルプセンター検索（Help Center search）：顧客が連絡する前に記事を見つけることができます
• 連絡フォーム（Contact form）：ウィジェットから直接チケットを送信できます
• ライブチャット（Live chat）：エージェントとのリアルタイムの会話を有効にします
• コールバックリクエスト（Callback requests）：顧客が電話をリクエストできます（Zendesk Talkが必要）

動作設定：

• 営業時間（Business hours）：ウィジェットが表示される時間またはメッセージングが変更される時間を設定します
• 挨拶（Greetings）：自動ウェルカムメッセージを構成します
• モバイルレスポンシブ（Mobile responsiveness）：ウィジェットが電話やタブレットで動作することを確認します

少し時間を取って変更をプレビューします。Zendeskはライブプレビューを提供するため、ウィジェットが顧客にどのように表示されるかを正確に確認できます。

ステップ3：埋め込みコードを生成してコピーする

構成に満足したら、実際のコードを取得する時間です。

**インストール（Installation）**セクションまでスクロールしてクリックし、展開します。次のようなJavaScriptスニペットが表示されます。

<!-- Start of Zendesk Widget script -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=YOUR_WIDGET_KEY"></script>
<!-- End of Zendesk Widget script -->

**コピー（Copy）**アイコンをクリックして、スニペット全体をクリップボードにコピーします。このコードには、ウィジェットを特定のZendeskアカウントに接続する一意のウィジェットキーが含まれています。インストールプロセスの詳細については、ZendeskのMessagingインストールガイドをご覧ください。

このコードを開発者に送信する必要がある場合は、代わりに**コードをチームメンバーにメールで送信（Email code to a team member）**をクリックします。

ステップ4：コードをWebサイトに追加する

次に、このコードをWebサイトのHTMLに貼り付ける必要があります。配置が重要です。ウィジェットを表示するすべてのページの閉じタグ</body>の直前に追加します。

標準HTML Webサイト

WebサイトのHTMLファイルを開き、</body>の前にスニペットを貼り付けます。テンプレートシステムを使用している場合は、すべてのページに表示されるように、ベーステンプレートに追加します。

WordPress（ワードプレス）

いくつかのオプションがあります。

• テーマエディター（Theme Editor）：「外観」>「テーマファイルエディター」に移動し、footer.phpを開き、</body>の前に貼り付けます
• カスタマイザー（Customizer）：一部のテーマには、「外観」>「カスタマイズ」に「カスタムスクリプト」または「フッターコード」セクションがあります
• プラグイン（Plugin）：「Insert Headers and Footers」のようなプラグインを使用して、テーマファイルを編集せずにコードを追加します

Shopify（ショッピファイ）

• **オンラインストア > テーマ（Online Store > Themes）**に移動します
• アクティブなテーマの**アクション > コードを編集（Actions > Edit code）**をクリックします
• レイアウトフォルダでtheme.liquidを開きます
• 閉じタグ</body>の前にスニペットを貼り付けます
• 保存

その他のプラットフォーム

ほとんどのコンテンツ管理システムには、カスタムスクリプトを追加する方法があります。

• Wix（ウィックス）：設定 > カスタムコード
• Squarespace（スクエアスペース）：設定 > 詳細設定 > コードインジェクション
• Webflow（ウェブフロー）：プロジェクト設定 > カスタムコード

コードを追加した後、変更を保存し、キャッシュをクリアします。プラットフォーム固有のガイダンスについては、Zendeskの開発者ドキュメントを参照してください。

ステップ5：インストールを確認する

動作したと決めつけないでください。少し時間を取って、すべてが正しく機能していることを確認してください。

シークレットまたはプライベートブラウジングウィンドウでWebサイトを開きます。これにより、キャッシュされたデータが干渉することなく、新しい訪問者として表示されることが保証されます。

次のことを確認してください。

• 選択した隅にウィジェットランチャーが表示されます
• クリックすると、ウィジェットインターフェースが開きます
• ブランディング（色、ロゴ）が正しく表示されます
• ヘルプセンター検索が有効になっている場合は機能します
• チャットを開始するか、テストチケットを送信できます

デスクトップとモバイルの両方でテストして、レスポンシブな動作を確認します。ウィジェットは、サイトのレイアウトを壊すことなく、小さな画面に適応する必要があります。

ウィジェットが表示されない場合は、ブラウザの開発者コンソールでJavaScriptエラーを確認してください。一般的な問題は次のとおりです。

• スクリプトがコンテンツセキュリティポリシーによってブロックされている
• 他のチャットウィジェットとの競合
• コードが間違った場所に配置されている

基本設定を超えたウィジェットのカスタマイズ

基本的なウィジェットが動作したら、JavaScript APIを通じて高度なカスタマイズオプションを調べることができます。

プログラムによる制御

JavaScriptコマンドでウィジェットの動作を制御できます。

// Open the widget
zE('webWidget', 'open');

// Set the visitor's name
zE('webWidget', 'prefill', {
  name: 'John Doe',
  email: 'john@example.com'
});

埋め込みモード

配置をより細かく制御するには、埋め込みモードを使用して、ウィジェットを特定のコンテナ内に配置します。

window.zEMessenger = {
  autorender: false
};

zE('messenger', 'render', {
  mode: 'embedded',
  widget: {
    targetElement: '#support-container'
  }
});

これは、専用のサポートページを作成したり、ウィジェットをダッシュボードに統合したりする場合に役立ちます。詳細については、埋め込みモードのドキュメントをご覧ください。

認証された訪問者

ユーザーがWebサイトにログインする場合、ウィジェットで認証して、会話履歴を表示したり、連絡先の詳細を再入力したりする必要がないようにすることができます。これには、Zendesk設定でJWT認証を設定する必要があります。

一般的な埋め込み問題のトラブルシューティング

明確な指示があっても、うまくいかない場合があります。一般的な問題の修正方法を次に示します。

ウィジェットが表示されない

• キャッシュをクリアする（Clear your cache）：ブラウザは頻繁にキャッシュします。ハードリフレッシュ（Ctrl + F5またはCmd + Shift + R）を試してください
• JavaScriptエラーを確認する（Check for JavaScript errors）：ブラウザの開発者ツールを開き、コンソールで赤いエラーを探します
• スクリプトがロードされたことを確認する（Verify the script loaded）：開発者ツールのネットワークタブで、Zendeskスクリプトリクエストが成功したかどうかを確認します
• ファイアウォールによるブロック（Firewall blocking）：ファイアウォールがzdassets.comおよびzendesk.comへのリクエストを許可していることを確認します

コード配置エラー

• コードが</body>の前にあることを確認します。後ではありません
• <head>内に入れないでください（ページの読み込みが遅くなる可能性があります）
• 貼り付けるときにHTML構造を誤って壊していないことを確認します

他のツールとの競合

他のチャットウィジェット（Intercom（インターコム）、Drift（ドリフト）など）を使用している場合、競合する可能性があります。混乱や技術的な問題を避けるために、ページごとに1つのチャットウィジェットのみを使用してください。

モバイル表示の問題

• Webサイトのビューポートメタタグが正しく設定されていることを確認します
• ウィジェットのz-indexがCSSによって上書きされていないことを確認します
• ブラウザエミュレーターだけでなく、実際のデバイスでテストします

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

Webウィジェットが実行されたら、それでもかなりの手作業が必要になることに気付くかもしれません。エージェントはすべての会話に応答する必要があり、簡単な質問には貴重な時間がかかります。

ここでAIが役立ちます。eesel AIはZendeskと直接統合して、既存のヘルプセンターの記事と過去のチケットデータを使用して応答を自動化します。

仕組みは次のとおりです。

• コンテンツでトレーニングする（Train on your content）：eeselは、ヘルプセンター、マクロ、および解決済みのチケットから学習します
• AI応答をドラフトする（Draft AI responses）：顧客がWebウィジェットを使用すると、eeselはエージェントがレビューするための完全な応答を提案します
• 自律的な解決（Autonomous resolution）：一般的な質問については、エージェントの関与なしにeeselが直接応答できます
• インテリジェントにエスカレートする（Escalate intelligently）：複雑な問題は、完全なコンテキストで自動的に人間のエージェントにルーティングされます

統合は、既存のZendeskセットアップ内で行われます。Webウィジェットを置き換えたり、顧客とのやり取り方法を変更したりする必要はありません。eeselは、それらのやり取りをより効率的にするだけです。

品質を維持しながら応答時間を短縮しようとしているチームにとって、eesel AIのAIエージェントは、基本的なウィジェットを設定した後の実用的な次のステップになる可能性があります。