Customising how it looks

• Name and greeting. What it calls itself in the header, and the first thing anybody sees. The name reaches the model too, so it can answer “what are you called?”
• Starter questions. The cards shown before anyone has typed. A user who does not know what to ask asks nothing, so these are worth more than they look. A starter can also carry a written answer, in which case pressing it is not counted as a request and replies with exactly your words.
• What your product is. Your own description, in the system prompt. This is what the assistant answers from when somebody asks what you do, who it is for, or what it costs. Leave it empty and it will say it does not know rather than guess.
• Avatar, brand colour, launcher position, panel or centred dialog.
• “Powered by Verb”. On Pro and above you can remove the line at the foot of the panel. On other plans it stays.

Anything set on the dashboard wins, so these are a starting point rather than a fight. The advantage is that they apply on first paint, with no wait for config to load.

<script src="https://api.askverb.com/v1/verb.js"
        data-verb-site="YOUR_SITE_KEY"
        data-verb-name="Ask Acme"
        data-verb-color="#3b82f6"
        data-verb-position="bottom-left"
        data-verb-mode="dialog"
        defer></script>

Whatever brand colour you pick, the text drawn on top of it is computed rather than assumed, so a dark navy gets light text and a pale yellow gets dark. Picking a colour cannot leave you with a button nobody can read.

A corner is the default, not the only choice. There are several other ways to put the assistant on your page, and you can mix them: a button in your navbar and a "Track my order" link on the orders page can both open the same assistant.

Your own button. Add data-verb-open to any element and a click opens the assistant. No JavaScript needed. Give the attribute a question and that question is typed in, ready to send. Hide our floating button with data-verb-hide-launcher="true" on the script tag if yours replaces it.

<button data-verb-open>Ask AI</button>
<a href="#" data-verb-open="Where is my order?">Track my order</a>

Our button, inside your layout. Point data-verb-launcher at an element of yours and the button is drawn inside it instead of floating, taking on your container's layout. Your colours and glow still apply. It works in React, Vue and other single-page apps: the button moves in as soon as the element appears, and follows it when a route change redraws it. Until then it floats in its corner, and if nothing matches after 10 seconds the browser console says so.

<nav>
  ...
  <span id="help-slot"></span>
</nav>

<script src="https://api.askverb.com/v1/verb.js"
        data-verb-site="YOUR_SITE_KEY"
        data-verb-launcher="#help-slot"
        defer></script>

A corner, nudged. If a cookie banner or another chat bubble already sits in your corner, keep the corner and move the button away from the edge, in pixels. It applies on phones too.

<script src="https://api.askverb.com/v1/verb.js"
        data-verb-site="YOUR_SITE_KEY"
        data-verb-offset-x="24"
        data-verb-offset-y="96"
        defer></script>

From your own code. Open, ask or close it from anywhere, for example after somebody has been stuck on a page for a while. Wait for the widget first: the script is deferred, so check window.Verb and listen for verb:ready.

function whenVerb(fn) {
  if (window.Verb) fn();
  else window.addEventListener("verb:ready", fn, { once: true });
}

whenVerb(() => window.Verb.open());                               // open it
whenVerb(() => window.Verb.open({ prompt: "Where is my order?" })); // open, question typed in
whenVerb(() => window.Verb.ask("Where is my order?"));              // open and send
whenVerb(() => window.Verb.close());

Side panel or popup. data-verb-mode="panel" opens a panel down the side that moves your page over to make room; data-verb-mode="dialog" opens a centred popup over it. Also on the dashboard, under Theme.

The widget is the only supported way to put Verb on a page. There is no supported API for drawing the conversation in an interface of your own yet. The connection the widget uses is internal and changes without notice, so anything built on it can stop working with any release.

If you need your own interface, tell us at vishnu.ps@askverb.com: it is how we decide when to build a supported one. Until then, the button, the colours, the placement and opening it from your own controls are all yours to change.

Our button is exposed as a CSS part called launcher, so your own stylesheet can change its shape, size, padding, shadow, font and hover with ::part(launcher). Put the host in front: [data-verb-root] when it floats, [data-verb-launcher-root] when you placed it with data-verb-launcher. Writing both covers either.

[data-verb-root]::part(launcher),
[data-verb-launcher-root]::part(launcher) {
  border-radius: 10px;
  padding: 10px 16px;
  box-shadow: 0 4px 14px rgb(0 0 0 / .18);
}

Making room for the panel. While it is open, <html> carries data-verb-panel-open="true" and the variable --verb-panel-width, for anything of yours that should move aside too, like a fixed header.

html[data-verb-panel-open="true"] .site-header {
  right: var(--verb-panel-width);
}