Kapa Support Form Deflector

Troubleshooting

Debugging Tools

Enable Debug Mode

To see detailed logs about what the deflector is doing, add the data-debug-mode attribute to your script tag:

<script
  src="https://widget.kapa.ai/kapa-support-form-deflector-v0.11.0.bundle.js"
  data-debug-mode="true"
  ...
></script>

This will output diagnostic information to the browser console, including:

• Whether form elements were found
• Which events are being registered
• When the deflector is triggered
• Any errors or warnings

Testing the Deflector on Customer Websites

To quickly test the deflector on a customer's website without modifying their code, you can inject it directly through the Chrome DevTools console:

const s = document.createElement("script");
s.async = true;
s.src = "https://widget.kapa.ai/kapa-support-form-deflector.bundle.js";
s.setAttribute("data-integration-id", "YOUR_INTEGRATION_ID");
s.setAttribute("data-project-color", "#098D9E");
s.setAttribute("data-main-input-query-selector", "#request_description");
s.setAttribute("data-submit-element-event-type", "onClick");
s.setAttribute(
  "data-submit-element-query-selector",
  "#new_request > footer > input[type=submit]"
);
s.setAttribute(
  "data-anchor-element-query-selector",
  "#new_request input[type=submit]"
);
s.setAttribute("data-debug-mode", "true");
document.head.appendChild(s);

Replace the placeholder values (integration ID, selectors, colors, etc.) with the appropriate configuration for the customer's site.

Note: If the customer already has the deflector installed on their website, you'll need to remove it first before injecting your test configuration:

1. Remove the existing script tag: In Chrome DevTools, go to the "Elements" tab, find the deflector script tag, click on it, and run this in the Console:

   $0.remove();

   (The $0 variable refers to the currently selected element in the Elements panel)
2. Reset the global state: Run these commands in the Console to clear the deflector's global state:

   window._KAPA_SFD_RENDERED = undefined;
   window.KapaSFD.unmount();
   window.KapaSFD = undefined;

3. Inject your test configuration: Now you can use the script injection method above.

Common Issues and Solutions

1. Submit Event Not Firing

Symptom: Debug logs show that the onSubmit event is registered, but the deflector doesn't appear when you click the submit button.

Solution: Switch from onSubmit to onClick event type.

<script
  data-submit-element-event-type="onClick"
  data-submit-element-query-selector="#submit-button"
  ...
></script>

Why this works: The onClick event fires directly on the button element when it's clicked, while onSubmit fires on the form element when the form is submitted. In some cases, JavaScript validation or other event handlers may prevent the form from actually submitting (e.g., by calling preventDefault()), which means the onSubmit event never fires. By using onClick on the submit button itself, the deflector can intercept the interaction earlier in the event chain, before other handlers have a chance to prevent the submission. This allows the deflector to take precedence and show the AI answer before the form submission is processed.

Important: When using onClick, make sure your data-submit-element-query-selector points to the actual button element, not the form element.