Zendeskのチャット前フォームをカスタマイズする方法：2026年完全ガイド

Zendeskのチャット前フォームをカスタマイズする方法：2026年完全ガイド

Zendeskのチャット前フォームは、ライブチャットが開始される前に訪問者の情報を収集します。名前、メールアドレス、電話番号を取得し、会話を適切な部門にルーティングすることができます。正しく設定すれば、やり取りの手間を減らし、エージェントは最初のメッセージから状況を把握した状態で対応できます。

しかし、課題もあります。Zendeskのドキュメントは、管理設定、JavaScript API、モバイルSDKの設定が別々のページに分かれて記載されています。このガイドでは、それらすべてを1か所にまとめました。

このガイドでは、管理ダッシュボード、JavaScript API、iOS SDKの3つの方法を使用して、5つの主要なチャット前フォーム要素（挨拶、訪問者プロフィール、電話番号、部門選択、メッセージフィールド）をカスタマイズする方法を学びます。また、一般的なトラブルシューティングの問題や、設定の複雑さを完全に排除できるAI搭載の代替案を検討すべきタイミングについても説明します。

Zendeskのチャット前フォームとは？

チャット前フォームとは、訪問者がライブチャットセッションを開始する前に表示されるダイアログです。サポートチームがより迅速かつ効果的に対応するために役立つ情報を収集します。

Zendeskのチャット前フォームに関するドキュメントで確認されている通り、このフォームはZendesk Webウィジェット（従来版）でのみ利用可能であり、新しい「メッセージング」ウィジェットでは利用できません。この違いは、設定オプションが大きく異なるため重要です。

チャット前フォームには、主に3つの目的があります。

• やり取りの削減: エージェントはチャットが始まる前に、顧客の名前、メールアドレス、最初の質問を把握できます。
• 適切なチームへのルーティング: 部門選択により、会話が適切なグループ（営業、テクニカルサポート、請求など）に確実に届くようになります。
• 連絡先情報の取得: チャットが切断された場合でも、フォローアップのための訪問者のメールアドレスを確保できます。

フォームには、カスタマイズ可能な5つの要素が含まれています。

要素	目的	デフォルトの状態
挨拶メッセージ	フォームの上部に表示されるウェルカムテキスト	有効
訪問者プロフィール（名前、メール）	基本的な身元確認フィールド	有効
電話番号	任意の連絡先フィールド	無効
部門選択	ルーティング用のドロップダウン	部門が存在する場合に表示
メッセージフィールド	最初の質問またはリクエスト	有効

Zendeskチケット管理システムの仕組みと、チャット前フォームがどのようにそこにデータを供給するかを理解することで、適切なデータを取得するフォームを設計できます。オムニチャネルサポートを運用しているチームにとって、チャット前フォームは顧客体験における最初の接点となることが多いです。

チャット前フォームに代わる選択肢：eesel AI

JavaScriptの設定に飛び込む前に、そもそも静的なフォームが必要かどうかを検討してみてください。eesel AIは、フォーム入力ではなく、会話を通じて顧客のコンテキストを収集する代替アプローチを提供します。

仕組みは次のとおりです。eesel AIをZendeskアカウントに接続すると、過去のチケット、マクロ、ヘルプセンターの記事、および接続されたドキュメントから即座に学習します。訪問者にフォームへの入力を求める代わりに、AIチャットボットが自然な会話を行い、動的に同じ情報を抽出します。

セットアッププロセスは数分で完了します。

1. eesel AIをZendeskアカウントに接続（ワンクリック統合）
2. 既存のナレッジソース（ヘルプセンター、過去のチケット、内部ドキュメント）でトレーニング
3. ウェブサイトにチャットバブルとして展開するか、Zendesk Chatと直接統合

従来のチャット前フォームと比較した主な利点は以下の通りです。

• JavaScriptの設定不要: コンテキストの収集は自動的に処理されます。
• 会話によるデータ収集: 訪問者は硬直したフォーム項目ではなく、自然に質問に答えます。
• インテリジェントなルーティング: AIが会話の内容に基づいて適切な部門を判断します。
• 継続的な学習: システムはエージェントによる修正や新しいチケットに基づいて改善されます。

このアプローチは、開発のオーバーヘッドを削減しつつ、必要な情報を取得したいチームに適しています。最初はAIの監視（人間が確認するための下書き作成）から始め、自信が深まるにつれて自律的なチケット処理へとレベルアップさせることができます。

従来のチャット前フォームを好む、あるいは必要とするチームのために、次のセクションではZendeskのネイティブなカスタマイズオプションについて説明します。

Zendesk管理画面でチャット前フォームをカスタマイズする方法

管理ダッシュボードでは、コードを使わずに基本的なカスタマイズが可能です。これは、最も一般的なユースケースのほとんどをカバーしています。

ステップ1：チャット前フォームの設定にアクセスする

管理センター > チャットダッシュボード > 設定 > ウィジェット > フォーム > チャット前フォームに移動します。

古いChatアカウントの場合、パスはダッシュボード > 設定 > ウィジェットである場合があります。

ステップ2：挨拶メッセージを設定する

挨拶はチャット前フォームの上部に表示されます。訪問者は段落を読むことではなくチャットを始めることを望んでいるため、簡潔にまとめましょう。

挨拶フィールドはプレーンテキストのみを受け付けます（HTML形式は不可）。以下のような用途に使用します。

• ウェルカムメッセージ（「こんにちは！何かお手伝いできることはありますか？」）
• 指示（「迅速に対応するため、以下のフォームにご記入ください。」）
• 営業時間のお知らせ（「弊社のチームは月曜日から金曜日の午前9時から午後6時（東部標準時）まで対応可能です。」）

ステップ3：訪問者プロフィール項目を設定する

訪問者プロフィールを切り替えて、名前とメールアドレスのフィールドを有効または無効にします。これらはフォローアップの連絡に不可欠です。

追加のオプションには以下が含まれます。

• ソーシャルログインを許可: 訪問者が情報を入力する代わりに、FacebookやGoogleでサインインできるようにします。
• メールアドレスを必須にする: メールアドレスフィールドを必須項目にします。

ここで注意点があります。訪問者プロフィールを完全に無効にすると、チャット終了後に訪問者をフォローアップする手段が失われます。連絡先情報が不要であると確信できる場合にのみ無効にしてください。

ステップ4：電話番号フィールドを追加する（任意）

訪問者プロフィールセクションの電話番号を許可を有効にして、電話番号の収集を可能にします。

電話番号を必須にするには、チャット前フォームの設定で電話番号を必須にするにチェックを入れます。

電話番号の収集は、以下の場合に役立ちます。

• 電話サポートが必要になる可能性があるコールバックシナリオ
• 代替の連絡先情報の収集
• 重要顧客の特定

ステップ5：部門選択を設定する

Zendesk Chatで部門を設定している場合、部門のドロップダウンが自動的に表示されます。表示されない場合は、まず設定 > 部門で部門を作成してください。

ドロップダウンのラベルはカスタマイズ可能です（例：「部門」を「チームを選択してください」や「どのようなご用件でしょうか？」に変更するなど）。

なお、管理ダッシュボードから特定の部門を非表示にすることはできません。表示される部門をフィルタリングするには、次のセクションで説明するJavaScript APIを使用する必要があります。

JavaScript APIを使用した高度なZendeskチャット前フォームのカスタマイズ

チャット前フォームをより詳細に制御するには、WebウィジェットJavaScript APIを使用します。これにより、言語ごとの挨拶のカスタマイズ、部門のフィルタリング、訪問者情報の事前入力などが可能になります。

zESettingsオブジェクト

zESettingsオブジェクトは、ウィジェットの設定を定義する場所です。重要なルールとして、HTML内のZendeskウィジェットスクリプトよりも「前」に配置してください。

window.zESettings = {
  webWidget: {
    chat: {
      prechatForm: {
        greeting: { '*': 'こんにちは！本日はどのようなご用件でしょうか？' },
        departmentLabel: { '*': 'チームを選択してください' }
      }
    }
  }
};

ウィジェットスクリプトが読み込まれた後にzESettingsを配置すると、設定が適用されません。これは、チャット前フォームをカスタマイズする際によくある間違いです。

挨拶と部門ラベルのカスタマイズ

greetingとdepartmentLabelはどちらもロケール固有の値をサポートしています。すべての言語に適用するにはワイルドカード'*'を使用し、多言語サポートの場合はロケールコードを指定します。

prechatForm: {
  greeting: {
    'ja': 'ようこそ！何かお手伝いしましょうか？',
    'en-US': 'Welcome! How can we help?',
    'fr': 'Bienvenue! Comment pouvons-nous vous aider?',
    '*': 'Hello!'
  },
  departmentLabel: {
    'ja': 'チームを選択してください',
    'en-US': 'Select your team',
    '*': 'Department'
  }
}

ウィジェットは訪問者のブラウザ言語を検出し、適切なメッセージを表示します。'*'ワイルドカードは、明示的に定義されていない言語のフォールバックとして機能します。

表示する部門のフィルタリング

departmentsオブジェクトを使用して、ドロップダウンに表示する部門を制御します。

chat: {
  departments: {
    enabled: ['Sales', 'Technical Support'],
    select: 'Sales'
  }
}

プロパティ	型	説明
enabled	配列	表示する部門名のホワイトリスト
select	文字列	事前に選択されるデフォルトの部門

重要：部門名は正確に一致させる必要があります（大文字と小文字を区別）。部門名が存在しない場合、エラーメッセージなしでドロップダウンが完全に非表示になることがあります。

訪問者情報の事前入力

ログイン済みのユーザーの場合、すでに持っている情報でフォームを事前に埋めることができます。Core APIには、このための2つのコマンドが用意されています。

identifyコマンドは名前とメールアドレスを設定します。

zE('webWidget', 'identify', {
  name: '山田 太郎',
  email: 'yamada@example.com'
});

prefillコマンドは、読み取り専用フィールドを含む、より詳細な制御を提供します。

zE('webWidget', 'prefill', {
  name: {
    value: '山田 太郎',
    readOnly: true
  },
  email: {
    value: 'yamada@example.com',
    readOnly: true
  },
  phone: {
    value: '03-1234-5678',
    readOnly: false
  }
});

readOnly: trueを設定すると、訪問者が事前入力された値を編集できなくなります。これは、ユーザーの身元をすでに確認済みの場合に便利です。

モバイルSDKでのZendeskチャット前フォーム設定

ネイティブiOSアプリの場合、Zendesk Chat SDKはSwiftクラスを通じて同等のカスタマイズを提供します。

ChatConfigurationを使用したiOSの設定

ChatFormConfigurationクラスを使用すると、各フォーム項目の要件を設定できます。各フィールドには3つの状態があります。

状態	説明
.required	続行するためにユーザーが入力する必要がある
.optional	ユーザーがスキップできる
.hidden	フィールドが表示されない

名前と部門を必須、メールを任意、電話番号を非表示にするチャット前フォームの設定例を以下に示します。

let formConfiguration = ChatFormConfiguration(
    name: .required,
    email: .optional,
    phoneNumber: .hidden,
    department: .required
)

let chatConfiguration = ChatConfiguration()
chatConfiguration.isPreChatFormEnabled = true
chatConfiguration.preChatFormConfiguration = formConfiguration

Objective-Cの場合：

ZDKChatFormConfiguration *formConfiguration = [[ZDKChatFormConfiguration alloc]
    initWithName:ZDKFormFieldStatusRequired
    email:ZDKFormFieldStatusOptional
    phoneNumber:ZDKFormFieldStatusHidden
    department:ZDKFormFieldStatusRequired];

ZDKChatConfiguration *chatConfiguration = [[ZDKChatConfiguration alloc] init];
chatConfiguration.isPreChatFormEnabled = YES;
chatConfiguration.preChatFormConfiguration = formConfiguration;

主要な設定フラグ

ChatConfigurationクラスには、いくつかの便利なフラグが含まれています。

フラグ	デフォルト	説明
isPreChatFormEnabled	true	フォーム全体の有効/無効を切り替える
isAgentAvailabilityEnabled	true	オンラインのエージェントがいない場合にメッセージを表示する
isOfflineFormEnabled	true	オフライン時に訪問者がメッセージを残せるようにする
isChatTranscriptPromptEnabled	true	チャット終了時にメールでのチャット履歴を提案する

ChatAPIConfigurationを使用したユーザー情報の事前入力

Chat.instance.configurationのvisitorInfoプロパティを設定すると、対応するフォーム項目は自動的に非表示になります。

Chat.instance?.configuration.visitorInfo = VisitorInfo(
    name: "山田 太郎",
    email: "yamada@example.com",
    phoneNumber: "03-1234-5678"
)

すべてのvisitorInfoプロパティが入力されている場合、チャット前フォームは完全にスキップされます。ユーザーはすぐにチャットを開始できます。

Zendeskチャット前フォームの一般的な問題のトラブルシューティング

正しく設定していても、いくつかの問題がよく発生します。解決策は以下の通りです。

部門のドロップダウンが表示されない

原因: その部門のすべてのエージェントがオフラインです。

解決策: 表示したい各部門に少なくとも1人のエージェントがオンラインであることを確認してください。または、JavaScript設定のdepartments.enabledで有効な部門名を使用しているか確認してください。テスト中の場合は、Chatダッシュボードで自分のステータスを「オンライン」に設定してください。

カスタムのdepartmentLabelが適用されない

原因: プロパティが間違ったネストレベルに配置されています。

解決策: departmentLabelをchatレベルではなく、prechatFormオブジェクトの「中」に移動してください。

// 間違い - 機能しません
chat: {
  departmentLabel: { '*': '選択してください' }
}

// 正解
chat: {
  prechatForm: {
    departmentLabel: { '*': 'チームを選択してください' }
  }
}

このネスト構造は、Zendesk APIにおいてよくある混乱の元です。

設定がまったく適用されない

原因: zESettingsオブジェクトがウィジェットスクリプトの後に配置されています。

解決策: window.zESettingsがHTML内のZendeskウィジェットスニペットよりも「前」にあることを確認してください。

<!-- 設定を先に記述 -->
<script>
  window.zESettings = {
    webWidget: {
      chat: {
        prechatForm: {
          greeting: { '*': 'こんにちは！' }
        }
      }
    }
  };
</script>

<!-- ウィジェットスクリプトを後に記述 -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=YOUR_KEY"></script>

プロアクティブトリガーでフォームがバイパスされる

原因: プロアクティブチャットトリガーは、チャット前フォームを必要とせずに会話を開始するように設計されています。

解決策: これはバグではなく、意図された動作です。プロアクティブトリガーが起動したときに訪問者情報が必要な場合は、identify APIを使用してチャット開始後にデータを取得してください。

zE('webWidget:on', 'chat:start', function() {
  // チャット開始後に情報を求める
});

ウィジェットが間違った言語を表示する

原因: ウィジェットはデフォルトでブラウザの言語設定を使用します。

解決策: setLocaleコマンドを使用して特定の言語を強制します。

zE('webWidget', 'setLocale', 'ja');

これによりブラウザの検出が上書きされ、指定した言語でウィジェットが表示されます。

eesel AIでZendeskチャットの設定を簡素化する

Zendeskのチャット前フォームの設定には、管理設定の操作、JavaScriptの記述、場合によってはモバイルアプリのコード修正が含まれます。専任の開発リソースがないチームにとって、この複雑さは導入の妨げになる可能性があります。

eesel AIは異なるアプローチを提供します。静的なフォームを設定する代わりに、以下を行うAIエージェントを導入します。

• Zendeskデータから学習: 過去のチケット、マクロ、ヘルプセンターの記事を活用。
• 会話によるコンテキスト収集: 硬直したフォーム項目はなく、自然な会話のみ。
• インテリジェントなルーティング: 会話の内容に基づいて適切な部門を判断。
• チケットの自律処理: 人間の介入なしに一般的な問題を解決。

セットアップには数時間ではなく数分しかかかりません。Zendeskアカウントを接続し、既存のナレッジでトレーニングして展開するだけです。最初はAIがエージェントのために回答の下書きを作成するようにし、自信が深まるにつれて自律的な対応へとレベルアップできます。

すでにZendeskを使用しているチームにとって、eesel AIは既存のセットアップと並行して機能します。何かを置き換える必要はなく、日常的な会話を処理するインテリジェントなレイヤーを追加するだけです。

料金はTeamプランで月額299ドルからで、1,000件のAIインタラクションが含まれています。オプションの詳細な比較については、Zendesk向けベストAIチャットボットガイドをご覧ください。

チャットの設定を簡素化する準備はできましたか？無料トライアルを開始して、eesel AIがどのように設定の複雑さを軽減し、顧客への対応時間を改善できるかを確認してください。

---

よくある質問

Q1: コードを全く書かずにZendeskのチャット前フォームをカスタマイズできますか？

A1: はい、可能です。Zendeskの管理ダッシュボードでは、挨拶メッセージ、訪問者プロフィール項目（名前とメールアドレス）、電話番号の収集、部門ドロップダウンのラベルなど、基本的なチャット前フォームのオプションを設定できます。部門のフィルタリングや訪問者データの事前入力など、より高度なZendeskチャット前フォームのカスタマイズにはJavaScript APIが必要です。

Q2: zESettingsコードを追加したのに、Zendeskのチャット前フォームのカスタマイズが反映されないのはなぜですか？

A2: 最も一般的な原因は、zESettingsオブジェクトをウィジェットスクリプトの読み込み後に配置していることです。Zendeskのチャット前フォームのカスタマイズを機能させるには、設定がHTML内のウィジェットスニペットよりも「前」に記述されている必要があります。また、departmentLabelなどのプロパティが、chatレベルではなくprechatFormオブジェクトの中にネストされていることも確認してください。

Q3: 特定の部門だけを表示するようにZendeskのチャット前フォームをカスタマイズするにはどうすればよいですか？

A3: JavaScript APIのdepartments.enabledプロパティを使用して、特定の部門をホワイトリストに登録します。例えば、enabled: ['Sales', 'Support']と設定すると、ドロップダウンにはその2つのオプションのみが表示されます。このZendeskチャット前フォームのカスタマイズが機能するためには、部門名が正確に一致している必要があります（大文字と小文字を区別します）。

Q4: 訪問者情報を収集するために、Zendeskのチャット前フォームのカスタマイズに代わるより簡単な方法はありますか？

A4: はい、あります。eesel AIのようなAI搭載チャットソリューションは、静的なフォームではなく、会話を通じて訪問者のコンテキストを収集します。フォーム項目やJavaScriptを設定する代わりに、AIが訪問者と自然に対話し、必要な情報を抽出します。これにより、名前、メールアドレス、ルーティング要件を把握しながら、複雑なZendeskチャット前フォームのカスタマイズの必要性を排除できます。

Q5: モバイルアプリ用にZendeskのチャット前フォームのカスタマイズを設定するにはどうすればよいですか？

A5: iOSアプリの場合、ChatFormConfigurationクラスを使用して項目の要件（.required、.optional、または.hidden）を設定し、ChatConfigurationクラスでフォームの有効/無効を切り替えます。visitorInfoプロパティに値を事前入力すると、対応するフォーム項目は自動的に非表示になります。これがモバイルにおけるZendeskチャット前フォームのカスタマイズのネイティブなアプローチです。

Q6: Zendeskのチャット前フォームから部門のドロップダウンが消えてしまうのはなぜですか？

A6: 部門のドロップダウンは、その部門の少なくとも1人のエージェントがオンラインである場合にのみ表示されます。すべてのエージェントがオフラインの場合、Zendeskはドロップダウンを非表示にします。また、JavaScriptのdepartments.enabled配列で無効な部門名を使用していることも原因として考えられます。適切なチャット前フォームのカスタマイズのために、部門名がZendesk Chatの設定と正確に一致しているか確認してください。

Q7: すでに持っている顧客データでZendeskのチャット前フォームを事前に埋めることはできますか？

A7: はい、可能です。identifyコマンドを使用して名前とメールアドレスを設定するか、読み取り専用フィールドを含むより詳細な制御にはprefillコマンドを使用します。モバイルアプリの場合は、チャット設定でvisitorInfoプロパティを設定します。すべての項目が事前入力されている場合、Zendeskのチャット前フォームのカスタマイズによってフォーム自体を完全にスキップし、すぐにチャットを開始することも可能です。