Skip to main content

Setup

The kapa support form deflector can be embedded into any form that allows you to inject JavaScript, but first an integration must be created in the kapa platform.

1. Create new integration​

  • Visit the /Integrations tab on the kapa platform and create a new Support Form Deflector integration.

2. Enable your domain's​

  • In the set up screen of the new integration enable the domain on which you want to embed the support form deflector.
  • This includes both your production domain (e.g., https://www.example.com) and any staging domains (e.g., https://staging.example.com). For dynamic subdomains, you can use regex patterns (e.g., ^https://\w+.example.com$). For testing purposes, http://localhost is enabled by default.

3. Copy your Integration ID​

  • You will need it when embedding the support form deflector in your website.

4. Inject JavaScript​

  • The support form deflector is a JavaScript bundle which is injected into the website that contains your ticket form via a script tag. Use the following example script tag as starting point.
  • Define values for all Required Behavirol Parameters otherwise the support form deflector will not work. The selector values in the example are just for demonstration purposes you will have to tailor them to your website.
  • Use the Styling Parameters to customize your support form deflector.
  • Insert the script tag into the <head> section of your website.
<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_CODE"
  data-main-input-query-selector="textarea[name=additionalInformation]"
  data-extra-input-query-selectors="input[name=topic],input[name=subtopic],input[name=subject]"
  data-submit-element-event-type="onSubmit"
  data-submit-element-query-selector="form[id=contact-form]"
  data-anchor-element-query-selector="textarea[name=additionalInformation]"
  data-anchor-element-position="afterend"
></script>

Pro Tip: set data-debug-mode="true" to obtain more informative logs while testing the configuration.

5. Verify Installation:​

  • After adding the script, refresh your website and try to submit a support ticket. This should trigger an AI answer generation and block any ticket submissions until the answer has been returned.