日本語
  1. Zendeskヘルプ
  2. Support
  3. Supportの使い方
  4. チャネル

カスタムチケットフィールドとチケットフォームのWeb Widgetでの使用

Aimee Spanier
  • 編集済み

すべてのプラン

Web Widgetを使用して、問い合わせフォームに表示する情報をさまざまな手段でカスタマイズできます。この記事では、次のカスタマイズについて説明します。

  • カスタムチケットフィールドをウィジェットのデフォルトの問い合わせフォームに追加する（Supportの全プランのユーザーが対象）
  • デフォルトの問い合わせフォームから名前を削除する
  • デフォルトの問い合わせフォームの名前フィールドを必須フィールドにする
  • ウィジェットでチケットフォームを使用する（Enterpriseプラン、または生産性向上パック付きのProfessionalプランのユーザーが対象）

この記事では、次のトピックについて説明します。

関連記事

カスタムチケットフィールドをデフォルトの問い合わせフォームに追加する

Supportのどのプランでも、表示かつ編集可能なカスタムチケットフィールドを1つ、2つ、または全部、Web Widgetの問い合わせフォームに含めるように選択できます。Enterpriseプランをご使用の場合、または生産性向上パックを付けたProfessionalプランをご使用の場合は、デフォルトの問い合わせフォームに含めるカスタムチケットフィールドの数を任意に指定できます。

「優先度」フィールドなどのシステムフィールドは、Web Widgetでサポートされません。これは、すべてのプランタイプで共通です。ヘルプセンターからアクセスした場合、これらのフィールドはデフォルトの問い合わせフォーム（およびその他のチケットフォーム）に表示されますが、Web Widgetには表示されません。

メモ： 正規表現、日付、およびマルチセレクトタイプのカスタムフィールドは、Web Widgetでは使用できません。

カスタムチケットフィールドおよびその動作に関する一般的な説明については、「チケットおよびサポートリクエストフォームにカスタムフィールドを追加する方法」を参照してください。

デフォルトの問い合わせフォームにカスタムチケットフィールドを表示するには

  1. サイドバーにある管理アイコン（）をクリックし、「チャネル」>「ウィジェット」を選択します。
  2. 更新する組織を選択し、「カスタマイズ」タブをクリックします。
  3. カスタムチケットフィールドコンポーネントで、「カスタムチケットフィールド」ドロップダウンをクリックします。

  4. 問い合わせフォームに含めるカスタムチケットフィールドオプションを選択します。
    • Essentialプラン、Teamプラン、および大部分のProfessionalプランのユーザーは、カスタムフィールド1個、カスタムフィールド2個、またはカスタムフィールド全部のいずれかを選択できます。
    • Enterpriseプランまたは生産性向上パックを付けたProfessionalプランのユーザーは、表示するカスタムフィールドの個数を任意に指定するか、またはすべてのカスタムフィールドを含めるように選択できます。
  5. 「保存」をクリックします。

デフォルトの問い合わせフォームで名前を管理する

Web Widget管理設定には、Web Widgetに表示されるデフォルトの問い合わせフォームの名前フィールドを制御するた2つのオプションがあります。

  • 名前フィールドを表示：Web Widgetの既定の問い合わせフォームから名前フィールドを削除します。

  • 必須：名前フィールドを必須フィールドにします。必須フィールドは、ユーザーがWeb Widgetを介してデフォルトの問い合わせフォームを送信する際に入力を求められるフィールドです。それ以外の場合、名前フィールドには「オプション」と表示されます。

これらのオプションの詳細については、 「Web Widgetでコンポーネントを設定する方法」 を参照してください。

Web Widgetでチケットフォームを有効にする

Enterprise Supportプランまたは生産性向上パックを付けたProfessionalプランをご使用の場合、Web Widgetでチケットフォームを使用できます。

チケットフォームでは、問い合わせフォームに含めるフィールドを顧客のリクエストのタイプに基づいてカスタマイズできます。この機能を実現するには、複数のチケットフォームをあらかじめ作成しておく必要があります。

チケットフォームの一般的な情報とその仕組みについては、「各種リクエストに応じたさまざまなチケットフォームの作成」を参照してください。

Web Widgetでチケットフォームを有効にするには

  1. サイドバーにある管理アイコン（）をクリックし、「チャネル」>「ウィジェット」を選択します。
  2. 更新する組織を選択し、「カスタマイズ」タブをクリックします。
  3. チケットフォームコンポーネントで、トグルをクリックしてオン（緑色）にします。

  4. 「保存」をクリックします。

チケットフォームのトグルがオンになっている場合、顧客が「メッセージを残す」ボタンをクリックすると、アクティブなチケットフォームのリストからニーズに合ったフォームを選択するよう求められます。

チケットフォームを選択すると、そのチケットフォームに固有のフィールドが問い合わせフォームに表示されます。

Web Widgetでフィールドの説明をカスタマイズする

カスタムチケットフィールドとその説明を、Web Widgetのデフォルトの問い合わせフォームに追加できます。これらを表示するには、Web Widget管理設定の「カスタムチケットフィールド」オプションから目的のフィールドを選択する必要があります。

ただし、「優先度」フィールドなどのシステムフィールドは、Web Widgetでサポートされません。これは、すべてのプランタイプで共通です。ヘルプセンターからアクセスした場合、これらのフィールドはデフォルトの問い合わせフォーム（およびその他のチケットフォーム）に表示されますが、Web Widgetには表示されません。

チケットフォームは、Enterpriseプランで提供されます。また、Professionalプランの生産性向上パックでも提供されます。これらのプランのいずれかをご利用の場合、カスタムフォームとその説明をチケットフォームに含めることもできます。カスタムチケットフィールドとその説明を表示するには、Web Widget設定で「チケットフォーム」オプションを有効にする必要があります。

メモ： 「チケットフォーム」トグルをオフにしている場合、デフォルトの問い合わせフォームにはカスタムフィールドやカスタムフィールドの説明が表示されません。代わりに、「メッセージを入力してください。」というメッセージが表示されます。

チケットフィールドの説明は、「チケットフィールド」管理ページから作成および編集できます。チケットフィールドに関する情報については、「チケットフィールドについて」を参照してください。

フィールドの説明を追加するには

  1. サイドバーにある管理アイコン（）をクリックし、「管理」>「チケットフィールド」を選択します。
  2. 説明を必要とするフィールドの名前をクリックします。
  3. 「エンドユーザー用」セクションで、「編集可能」をクリックします。
  4. フィールドの説明を入力して、「フィールドを更新」をクリックします。

高度なカスタマイズ：状況に応じたチケットフォーム

Web Widget JavaScript APIのzESettingsオブジェクトを編集して、エンドユーザーが現在表示しているWebページに即したチケットフォームを提示することで、よりカスタマイズされたエクスペリエンスを生み出せます。APIの使用について詳しくは、「Web Widgetの高度なカスタマイズ」を参照してください。

編集するWebページのコードに含まれるzESettingsオブジェクトに変更を加え、ユーザーに提示するチケットフォームのID番号を追加します。チケットフォームIDは、チケットフォーム管理ページの「URL」に表示されています。

チケットフォームID番号を見つけるには

  1. サイドバーにある管理アイコン（）をクリックし、「管理」>「チケットフォーム」を選択します。
  2. ユーザーに提示するフォームまたはスタンドアロンフォームとして使用するフォームの名前をクリックします。
  3. アドレスバーのフォームIDをメモしておきます。

Webサイトのコードを編集するには、次のコード例を使用します。

1個のチケットフォームを提示するには：

<script type="text/javascript">
window.zESettings = {
  webWidget: {
    contactForm: {
      ticketForms: [
        { id: ###### }
      ]
    }
  }
};
</script>

2個のチケットフォームを提示するには：

<script type="text/javascript">
window.zESettings = {
  webWidget: {
    contactForm: {
      ticketForms: [
        { id: ###### },
        { id: ###### }
      ]
    }
  }
};
</script>

必要な数だけフォームIDをzESettingsオブジェクトに追加します。

高度なカスタマイズ：テキストフィールドにテキストを事前入力する

特定のフィールドにテキストを事前入力できるよう、新しい設定が追加されました。ロケールごとに異なる文字列を使用できますが、1つの文字列をすべてのロケールに適用する場合は、ロケールにアスタリスク（*）を指定します。これは、問い合わせフォームのタイトルなど、他のカスタマイズ可能なテキスト文字列でも同様です。

メモ： このセクションでは、システムフィールドの事前入力方法について説明します。ユーザー名およびメールアドレスの事前入力について詳しくは、Web Widget APIの「 zE.identify」を参照してください。

'subject'や'description'などのシステムフィールドを事前入力するには、次に示す方法でzESettingsオブジェクトを編集します。

例：事前入力された説明テキスト

次のコードを使用します。

<script type="text/javascript">
zESettings = {
  webWidget: {
    contactForm: {
      fields: [
        { id: 'description', prefill: { '*':'This is prefilled description text' } }
      ]
    }
  }
};
</script>

例：事前入力されたカスタムフィールド：

次のコードを使用します。

<script type="text/javascript">
zESettings = {
  webWidget: {
    contactForm: {
      fields: [
        { id: #####, prefill: { '*':'Desired text' } }
      ]
    }
  }
};
</script>

このコードブロックでは、id: #####はカスタムフィールドのIDです。

すべてのフォームの特定のフィールドを常に事前入力することも、特定のフォームの特定のフィールドを個別に事前入力することもできます。

コード例：異なるフォーム間で共通のフィールドに異なる説明を事前入力する

<script type="text/javascript">
window.zESettings = {
  webWidget: {
    contactForm: {
      ticketForms: [
       { 
         id: ###TicketFormID###,
         fields: [
           {
              id: 'description',
              prefill: {
                '*': description
              }
            }
          ]
        },
        {
          id: ###TicketFormID###,
          fields: [
            {
              id: 'description',
              prefill: {
                '*': 'different description'
              }
            }
          ]
        }
      ]
    }
  }
};
</script>

高度なカスタマイズ：特定のページのWeb Widgetから届いたチケットにタグを追加する

Web Widgetから送信されたチケットに、コンテキストタグを追加することができます。タグにzE.settingを使用すると、サイトの特定のページに特定のタグを設定できます。なお、これらのタグは公開され、コンソールを見ているユーザーに表示されます。

コード例：

<script type="text/javascript">
window.zESettings = {
  webWidget: {
    contactForm: {
      tags: ['new_tag', 'next_new_tag']
    }
  }
};
</script>
他にご質問がございましたら、リクエストを送信してください

0 コメント

ログインしてコメントを残してください。

関連記事

関連記事

Powered by Zendesk