@kapaai/support-form-deflector 0.11.0 → 0.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +84 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1 +1,85 @@
|
|
|
1
1
|
# Kapa Support Form Deflector
|
|
2
|
+
|
|
3
|
+
## Troubleshooting
|
|
4
|
+
|
|
5
|
+
### Debugging Tools
|
|
6
|
+
|
|
7
|
+
#### Enable Debug Mode
|
|
8
|
+
|
|
9
|
+
To see detailed logs about what the deflector is doing, add the `data-debug-mode` attribute to your script tag:
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<script
|
|
13
|
+
src="https://widget.kapa.ai/kapa-support-form-deflector-v0.11.0.bundle.js"
|
|
14
|
+
data-debug-mode="true"
|
|
15
|
+
...
|
|
16
|
+
></script>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
This will output diagnostic information to the browser console, including:
|
|
20
|
+
|
|
21
|
+
- Whether form elements were found
|
|
22
|
+
- Which events are being registered
|
|
23
|
+
- When the deflector is triggered
|
|
24
|
+
- Any errors or warnings
|
|
25
|
+
|
|
26
|
+
#### Testing the Deflector on Customer Websites
|
|
27
|
+
|
|
28
|
+
To quickly test the deflector on a customer's website without modifying their code, you can inject it directly through the Chrome DevTools console:
|
|
29
|
+
|
|
30
|
+
```javascript
|
|
31
|
+
const s = document.createElement("script");
|
|
32
|
+
s.async = true;
|
|
33
|
+
s.src = "https://widget.kapa.ai/kapa-support-form-deflector.bundle.js";
|
|
34
|
+
s.setAttribute("data-integration-id", "YOUR_INTEGRATION_ID");
|
|
35
|
+
s.setAttribute("data-project-color", "#098D9E");
|
|
36
|
+
s.setAttribute("data-main-input-query-selector", "#request_description");
|
|
37
|
+
s.setAttribute("data-submit-element-event-type", "onClick");
|
|
38
|
+
s.setAttribute(
|
|
39
|
+
"data-submit-element-query-selector",
|
|
40
|
+
"#new_request > footer > input[type=submit]"
|
|
41
|
+
);
|
|
42
|
+
s.setAttribute(
|
|
43
|
+
"data-anchor-element-query-selector",
|
|
44
|
+
"#new_request input[type=submit]"
|
|
45
|
+
);
|
|
46
|
+
s.setAttribute("data-debug-mode", "true");
|
|
47
|
+
document.head.appendChild(s);
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Replace the placeholder values (integration ID, selectors, colors, etc.) with the appropriate configuration for the customer's site.
|
|
51
|
+
|
|
52
|
+
> **Note**: If the customer already has the deflector installed on their website, you'll need to remove it first before injecting your test configuration:
|
|
53
|
+
>
|
|
54
|
+
> 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:
|
|
55
|
+
> ```javascript
|
|
56
|
+
> $0.remove();
|
|
57
|
+
> ```
|
|
58
|
+
> (The `$0` variable refers to the currently selected element in the Elements panel)
|
|
59
|
+
> 2. **Reset the global state**: Run these commands in the Console to clear the deflector's global state:
|
|
60
|
+
> ```javascript
|
|
61
|
+
> window._KAPA_SFD_RENDERED = undefined;
|
|
62
|
+
> window.KapaSFD.unmount();
|
|
63
|
+
> window.KapaSFD = undefined;
|
|
64
|
+
> ```
|
|
65
|
+
> 3. **Inject your test configuration**: Now you can use the script injection method above.
|
|
66
|
+
|
|
67
|
+
### Common Issues and Solutions
|
|
68
|
+
|
|
69
|
+
#### 1. Submit Event Not Firing
|
|
70
|
+
|
|
71
|
+
**Symptom**: Debug logs show that the `onSubmit` event is registered, but the deflector doesn't appear when you click the submit button.
|
|
72
|
+
|
|
73
|
+
**Solution**: Switch from `onSubmit` to `onClick` event type.
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<script
|
|
77
|
+
data-submit-element-event-type="onClick"
|
|
78
|
+
data-submit-element-query-selector="#submit-button"
|
|
79
|
+
...
|
|
80
|
+
></script>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
**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.
|
|
84
|
+
|
|
85
|
+
**Important**: When using `onClick`, make sure your `data-submit-element-query-selector` points to the actual button element, not the form element.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kapaai/support-form-deflector",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.1",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/esm/index.js",
|
|
6
6
|
"types": "./dist/esm/index.d.ts",
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"web-vitals": "^2.1.4",
|
|
82
82
|
"webpack": "^5.79.0",
|
|
83
83
|
"webpack-cli": "^5.0.1",
|
|
84
|
-
"webpack-dev-server": "^
|
|
84
|
+
"webpack-dev-server": "^5.2.2"
|
|
85
85
|
},
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public"
|