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

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

• カスタムチケットフィールドをWeb Widgetのデフォルトの問い合わせフォームに追加する
• デフォルトの問い合わせフォームとチケットフォームから名前を削除する
• デフォルトの問い合わせフォームとチケットフォームの名前フィールドを必須フィールドにする
• ウィジェットで異なるチケットフォームを使用する（EnterpriseおよびProfessional＋生産性向上パックアドオン）

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

• カスタムチケットフィールドをデフォルトの問い合わせフォームに追加する
• Web Widgetで複数のチケットフォームを有効にする（Professional＋アドオンまたはEnterprise）
• Web Widgetでフィールドの説明をカスタマイズする
• 高度なカスタマイズ：コンテキストチケットフォーム（Professional＋アドオンまたはEnterprise）
• 高度なカスタマイズ：問い合わせフォームのテキストフィールドに事前入力する
• 高度なカスタマイズ：特定のページのWeb Widgetから届いたチケットにタグを追加する

関連記事：

• Web Widgetでコンポーネントを設定する方法

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

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

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

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

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

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

   

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

Web Widgetで複数のチケットフォームを有効にする（Professional＋アドオンまたはEnterprise）

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

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

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

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

1. サイドバーにある管理アイコン（）をクリックし、「チャネル」>「ウィジェット」を選択します。
2. 「チケットフォーム」の「Customization」タブで、トグルをクリックしてオンに切り替えます。

   

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

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

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

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

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

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

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

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

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

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

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

高度なカスタマイズ：コンテキストチケットフォーム（Professional＋アドオンまたはEnterprise）

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>