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

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

• カスタムチケットフィールドをWeb Widgetのデフォルトの問い合わせフォームに追加する
• デフォルトの問い合わせフォームとチケットフォームから名前を削除する
• デフォルトの問い合わせフォームとチケットフォームの名前フィールドを必須フィールドにする
• Web Widgetで別のチケットフォームを使用する

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

• カスタムチケットフィールドをデフォルトの問い合わせフォームに追加する
• Web Widgetで複数のチケットフォームを有効にする
• Web Widgetでフィールドの説明をカスタマイズする
• 詳細なカスタマイズ：状況に応じたチケットフォーム
• 詳細なカスタマイズ：問い合わせフォームのテキストフィールドに事前入力する

関連記事：

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

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

Supportのどのプランでも、表示かつ編集可能なカスタムチケットフィールドを1つ、2つ、または全部、Web Widgetの問い合わせフォームに含めるように選択できます。一部の利用プランでは、デフォルトの問い合わせフォームにカスタムチケットフィールドを必要な数だけ表示させることができます。カスタムチケットフィールドの詳細については、「カスタムフィールドをチケットに追加し、リエストフォームを送信する方法」を参照してください。

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

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

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

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

   

3. 問い合わせフォームに含めるカスタムチケットフィールドを個別に選択するか、すべてのカスタムフィールドを選択します。
4. 「保存」をクリックします。

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

利用プランによっては、Web Widgetで複数のチケットフォームを利用することができます。

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

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

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

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

   

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

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

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

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

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

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

チケットフォームは、すべての利用プランで利用できるわけではありません。ご利用のプランによっては、カスタムフィールドとその説明をチケットフォームに含めることもできます。カスタムチケットフィールドとその説明を表示するには、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>