By default the deflector attaches to your form as soon as the page loads. You can attach and remove it from your own JavaScript instead. Use this when:
  • The form appears only after the reader does something, such as opening a tab.
  • Some ticket types must always reach a person, such as outages or security reports.

​
Set up

1

Turn off attaching on load

Turn off Attach as soon as the page loads on the deflector’s Behaviour tab, or add data-render-on-load="false" to the script tag:
<script
  async
  src="https://widget.kelu.dev/kelu-widget.js"
  data-knowledge-base-id="YOUR_KNOWLEDGE_BASE_ID"
  data-client-key="kl_pk_..."
  data-deflector-id="YOUR_DEFLECTOR_ID"
  data-render-on-load="false"
></script>
The deflector still loads its settings. It waits for you to attach it.
2

Call render() and unmount()

window.KeluFormDeflector?.render();   // attach
window.KeluFormDeflector?.unmount();  // remove
  • render() attaches the deflector. It waits for the form and question field to appear, up to Wait for form (10 seconds by default).
  • unmount() removes everything the deflector added, and puts back the submit button’s own label.
  • Both are safe to call many times. render() does nothing if the deflector is already attached.
  • render() does nothing until the deflector’s settings have loaded, a moment after the script runs. Call it from a reader’s action, such as a change event, not right after the script tag.
3

Example: skip urgent ticket types

const type = document.querySelector("#request_type");

type.addEventListener("change", () => {
  const urgent = type.value === "Live incident" || type.value === "Security";
  if (urgent) window.KeluFormDeflector?.unmount();
  else window.KeluFormDeflector?.render();
});
A reader reporting an outage sees your form exactly as it was, with no notice and its own button label.
4

Example: a form on a client-side route

router.afterEach((to) => {
  if (to.path === "/support/new") window.KeluFormDeflector?.render();
  else window.KeluFormDeflector?.unmount();
});
If the form is on the page at load but your framework rebuilds it right after, you don’t need manual rendering. Set Delay before attaching instead (data-render-timeout="500").

​
Change the settings from code

attach() sets up a new deflector and replaces the one that is attached: 
window.KeluFormDeflector.attach({
  knowledgeBaseId: "YOUR_KNOWLEDGE_BASE_ID",
  clientKey: "kl_pk_...",
  deflectorId: "YOUR_DEFLECTOR_ID",
  deflectQuestionField: "#description",
});
Use it when the form itself changes, for example a different question field per ticket type. It attaches right away, unless you pass renderOnLoad: false or turned attaching on load off in the dashboard; then call render(). Options passed here win over the dashboard, but attributes on the script tag are not carried over. Every option is listed on the Behaviour page.