Render the Support Form Deflector manually

By default, the support form deflector initializes automatically when the support form page is loaded in the browser. It's also possible to manually render the support form deflector, which is particularly useful in scenarios where your support form is not immediately visible or accessible to the user upon page load, or if you want to conditionally activate the deflector (e.g., only show it for certain types of support requests).

To configure the support form deflector to manually render on your site via JavaScript, you can use the data-render-on-load attribute, along with the render function exposed by the KapaSFD JavaScript object. Here's how you can set it up:

First, add the data-render-on-load attribute to your script tag and set it to "false":

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

Then, use the render function exposed by the KapaSFD object to manually render the support form deflector when needed.
```
window.KapaSFD.render()
```

Example: render conditionally based on drop-down value

The following example demonstrates how you could implement conditional rendering of the support form deflector depending on the selected value of a drop-down menu:

Render the support form deflector unless the selected value of the drop-down menu is Live Incident.
If the user selects Live Incident, unmount the support form deflector to prevent it from attempting to generate an answer.

document.addEventListener("DOMContentLoaded", function () {
  // Grab the drop-down menu
  const dropdown = document.querySelector("select[name=request_type]");
  // Listen for a "change" event
  dropdown.addEventListener("change", function () {
    if (this.value !== "Live Incident") {
      // Render only if type is not "Live Incident"
      window.KapaSFD.render();
    } else {
      window.KapaSFD.unmount();
    }
  });
});

Example: render conditionally based on drop-down value​

Example: render conditionally based on drop-down value