日本語
  1. Zendeskヘルプ
  2. Web Widget
  3. Web Widget（従来版）のドキュメント

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

Aimee Spanier
  • 編集済み
Zendesk Documentation Team

Suiteすべてすべてのプラン

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

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

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

関連記事：

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

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

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

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

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

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

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

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

利用プランによっては、Web Widget（従来版）で複数のチケットフォームを利用することができます。チケットフォームのリスト、および一般的な情報や機能については、「各種リクエストに応じたさまざまなチケットフォームの作成」を参照してください。

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

Web Widget（従来版）でチケットフォームを有効にするには

  1. 管理センターで、サイドバーにあるチャネルアイコン（）をクリックし、「従来版」>「Web Widget」を選択します。
  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>
1
ページの先頭へ戻る

0 コメント

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

関連記事

Powered by Zendesk