Handlers
Handlers are the functions your templates call to do things — send a query, open a preview, react to an answer, submit a form. You reference them from HTML events as skdwn.instance.helpers.<name>(...).
Built-in Handlers
| Handler | Use it for |
|---|---|
sendQuery() | Run the current query. |
onChangeQuery(event) | Update the query as the user types. |
onPressEnter(event) | Submit on Enter (but not Shift+Enter). |
stopQuery() | Cancel a running query. |
hintBoxClick(element) | Fire the query behind a clicked hint. |
showHints() | Show the welcome/hints again. |
clearHistory() | Clear the conversation. |
react(resultId, 'like'|'dislike', element) | Record a reaction on an answer. |
openPreview(event, element) / closePreview() | Open and close the image preview modal. |
toggleMaximized() / toggleShowFloatingWindow() | Resize / show-hide the window. |
showForm(formId) / sendForm(formId, event) | Open and submit a lead form. |
materialIcon({ iconName, size }) | Render a Material icon. |
Calling a Handler
<textarea oninput="skdwn.instance.helpers.onChangeQuery(event)"
onkeydown="skdwn.instance.helpers.onPressEnter(event)"></textarea>
<button onclick="skdwn.instance.helpers.sendQuery()">
{{ 'ask' | t: 'Ask' }}
</button>Pass data to a handler through data-* attributes and read them off the element:
<a onclick="skdwn.instance.helpers.openPreview(event, this)"
data-title="{{ reference.title }}"
data-previewSrc="{{ state.instance.config.key }}/tools/preview/{{ reference.id }}/{{ page }}">
Preview
</a>Your Own Handlers
Alongside templates, the Advanced editor lets you add custom helpers — small JavaScript functions stored in settings.extensions.helpers. Once added, call them from any template just like the built-ins:
// A helper named "trackClick"
(ref) => { window.analytics?.track('reference_click', { id: ref }); }<a onclick="skdwn.instance.helpers.trackClick('{{ reference.id }}')">{{ reference.title }}</a>To change state from a helper, call skdwn.instance.updateState({ ... }).