npm package: @kapaai/support-form-deflector
Description: ## Troubleshooting
Latest version: 0.16.1

# 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:

```html
<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:

```javascript
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:
>    ```javascript
>    $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:
>    ```javascript
>    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.

```html
<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.