Skip to main content

Support Form Deflector FAQ

What customer service solutions are supported?​

Kapa's support form deflector is designed to work with any customer service platform, including custom-built systems, Zendesk, Salesforce Service Cloud, Front, Intercom, and other solutions. The deflector seamlessly integrates with your existing support workflow. Since it runs entirely in the user's browser, it remains independent of your backend setup.

Should I configure the deflector to listen for onSubmit or onClick?​

The data-submit-element-event-type attributes tells the support form deflector which event to monitor for triggering answer generation. The appropriate event depends on how your support form is configured:

  • For forms that submit via onSubmit:

    If your support form submits a ticket using the onSubmit event, configure the deflector to listen for onSubmit:

    data-submit-element-event-type="onSubmit"

  • For forms that use onClick:

    If your support form triggers submissions with an onClick event, or if you rely on onClick for preprocessing or additional JavaScript logic, configure the deflector to listen for onClick:

    data-submit-element-event-type="onClick"

If you're unsure how your support form is set up, we recommend starting with onSubmit. If that doesn't work as expected, try switching to onClick.

note

This configuration does not prevent form submissions initiated by other actions, such as keyboard shortcuts.

Why isn't my support form deflector rendering?​

If your support form deflector isn't rendering, it's likely due to the order in which your page's DOM and the deflector's external script are loaded.

What could be the root cause?

  • Asynchronous script loading:

    The external script that defines the global Support Form Deflector object is typically loaded asynchronously. This means it may not finish loading before the browser fires the DOMContentLoaded event. As a result, if your initialization code runs on DOM ready, window.KapaSFD might still be undefined.

  • Dynamic content rendering:

    In cases where the support page or its elements (e.g., drop-down menus) are rendered dynamically, the expected DOM elements might not be available when the deflector’s initialization code executes.

To resolve this issue, ensure that both the DOM and the support form deflector script bundle are fully loaded before rendering the deflector. One approach is to:

  1. Disable the automatic render on load behavior of the deflector by setting the data-render-on-load="false" attribute on the <script> tag.
  2. Defining up a custom initialization function that waits for the DOMContentLoaded event (or checks document.readyState).
  3. Calling the initialization function using the onload event.

The following snippet shows a minimal version of this setup:

<script>
  function initKapaWidget() {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initKapaWidget);
      return;
    }
    window.KapaSFD.render();
  }
</script>

<script
  async
  src="https://widget.kapa.ai/kapa-support-form-deflector.bundle.js"
  data-integration-id="YOUR_INTEGRATION_ID"
  ...
  data-render-on-load="false"
  onload="initKapaWidget()"
></script>

This prevents premature execution of the deflector's code. Additionally, if your support page is dynamically rendered, you may need to trigger the deflector manually at the appropriate time, or conditionally depending on the existence of certain DOM elements. For more detailed instructions on manual rendering, please see our Render the Support Form Deflector manually guide.