Configure deflection tracking for multi-step forms

If your current support form is a multi-step form, where each step is a different page, you may need to perform additional configuration for Kapa to be able to register deflections correctly.

By default, Kapa attaches to your form's submit button (or equivalent), intercepting the support ticket creation to generate an answer. In the case of multi-step forms, however, the button to generate an answer and submit the request is not necessarily the same element. To ensure that deflections are correctly counted, you can specify two distinct query selectors to select:

1. An element that should trigger answer generation.
2. A second element that, if clicked, indicates that the user did not accept the generated answer and proceeded to create a ticket.

The following snippet shows an example implementation, where:

• A button with an ID of next-step is selected as the element for triggering answer generation when the onClick event fires.
• A different button with an ID of submit-ticket is selected as the element for tracking whether deflection was successful. In this example, if the onSubmit event fires for this button, then a ticket was created and the deflection was unsuccessful.

<script
  async
  src="https://widget.kapa.ai/kapa-support-form-deflector.bundle.js"
  data-integration-id="YOUR_INTEGRATION_ID"
  data-project-color="#YOUR_HEX_COLOR"
  data-main-input-query-selector="textarea[name='description']"
  data-extra-input-query-selectors="input[name='subject']"
  data-extra-input-query-selectors="Subject"
  data-submit-element-event-type="onClick"
  data-submit-button-query-selector="#next-step"
  data-submit-element-query-selector="#next-step"
  data-anchor-element-query-selector="#next-step"
  data-anchor-element-position="afterend"
  data-deflection-failure-trigger-element-query-selector="#submit-ticket"
  data-deflection-failure-trigger-element-event-type="onSubmit"
></script>