AskVoro
AskVoro documentation

Getting started

Install the widget

One script tag. Put it before </body> on every page that should show support.

html
<script
  src="https://askvoro.com/widget.js"
  data-workspace="YOUR_WORKSPACE_ID"
  data-knowledge-base-id="YOUR_KNOWLEDGE_BASE_ID"
  async
></script>

Replace YOUR_WORKSPACE_ID with your workspace's id — it's in your dashboard URL, right after /dashboard/. Copy YOUR_KNOWLEDGE_BASE_ID from Settings → Embed; it determines which public articles and FAQs the widget and agent use.

That's the whole install. The script draws a launcher button in the corner and loads AskVoro in an iframe the first time someone clicks it, so it costs almost nothing until it's used.

Manual initialisation#

Leave off data-workspace and the script waits for you. Useful when you only want the widget on certain pages, or after a cookie banner is accepted.

html
<script src="https://askvoro.com/widget.js"></script>
<script>
  AskVoro.init({
    workspace: "YOUR_WORKSPACE_ID",
    knowledgeBaseId: "YOUR_KNOWLEDGE_BASE_ID",
  });
</script>

Options#

Every option works as a data- attribute on the script tag or as a key passed to AskVoro.init().

AttributeOptionWhat it does
data-workspaceworkspaceYour workspace id. Required.
data-knowledge-base-idknowledgeBaseIdThe public knowledge base used by the widget and agent.
data-colorcolorOverrides the launcher colour from your appearance settings.
data-icon-urliconUrlOverrides the launcher icon.
data-widthwidthPanel width. Default 400, clamped 320–720.
data-heightheightPanel height. Default 640, clamped 420–1000.
data-expanded-widthexpandedWidthExpanded width. Default 560, clamped 360–800.
data-expanded-heightexpandedHeightExpanded height. Default 760, clamped 500–1100.
data-base-urlbaseUrlWhere to load AskVoro from. Defaults to the script's own origin.

Sizes outside those ranges are clamped rather than rejected, so a bad value degrades to something usable instead of breaking the panel.

Set colour and icon in Appearance in the dashboard when you want them to apply everywhere. Use the attributes only to override on a specific page.

Controlling the widget from your own code#

AskVoro.init() returns an instance, and you can hold onto it:

html
<script src="https://askvoro.com/widget.js"></script>
<script>
  const support = AskVoro.init({
    workspace: "YOUR_WORKSPACE_ID",
    knowledgeBaseId: "YOUR_KNOWLEDGE_BASE_ID",
  });

  document.querySelector("#help").addEventListener("click", () => support.open());
</script>
MethodWhat it does
open() / close() / toggle()Show or hide the panel.
expand() / compact()Switch between the normal and expanded panel size.
getState()Returns { open, mode, view }.
workspaceThe workspace id this instance was created with.

Using it without the launcher#

The widget URL works on its own:

text
https://askvoro.com/w/YOUR_WORKSPACE_ID?knowledgeBaseId=YOUR_KNOWLEDGE_BASE_ID

Point an iframe at it, or link to it directly from a help menu — useful for a full-page support view, or inside a native app's webview.

Checking it worked#

Load your site and click the launcher. If nothing appears:

  • No launcher at all. The script probably didn't run. Check the tag is actually on the page and that data-workspace is spelled correctly.
  • Launcher, but an empty panel. The workspace id is likely wrong. Compare it against your dashboard URL.
  • Nothing to say. The widget loads but the AI has nothing to answer from — add some articles.