Skip to content
AskVault Docs
Try Free →

Customize the widget appearance

Written by Joseph Russo, Principal Architect, Networks and Tech, AskVault · Reviewed by Allison Chan
Last updated: · 3 min read

Where to customize

Open Appearance in the dashboard sidebar. The editor has five sections:

  1. Identity. Bot name, welcome message (up to 500 characters), avatar image URL and brand color.
  2. Appearance. Theme, position, panel style and logo image URL.
  3. Behavior. Voice input, file attachments, AI follow-up suggestions, requiring an email before chat, and the "Powered by AskVault" footer.
  4. Products. The product catalog the agent can show as cards in chat.
  5. Content. Suggested questions, input placeholder, a dismissible notice and footer text.

The dashboard shows a live preview as you edit. Click Save to publish. The widget reads its settings when a page loads, and AskVault caches them for up to 60 seconds, so a saved change reaches visitors within about a minute.

Brand color

In Identity, pick a preset swatch or enter a custom six-digit hex color (for example #0EA5E9). It is the widget's accent color, used for the launcher button and highlights.

Accessibility note: check that text on your color is readable. Aim for at least 4.5:1 contrast for WCAG AA.

Position, theme and panel style

In Appearance:

  • Position. Bottom right (default) or bottom left.
  • Theme. Auto (follows the visitor's light or dark system setting), Light or Dark.
  • Panel style. Bubble (a corner launcher, the default), Centered Copilot, or Docked (an input bar at the bottom of the page).

Welcome message and suggested questions

The welcome message is the greeting a visitor sees when they open the widget. Edit it in Identity (up to 500 characters).

Suggested questions are clickable chips on the welcome screen, so a visitor can get an answer without typing. Add them in Content, one per line; up to 5 are shown. Pick the questions your visitors ask most.

AI follow-up suggestions

After an answer, the widget and the hosted chat page can show up to three suggested next questions as chips. Turn them on or off with AI follow-up suggestions in Behavior.

Rolling out: not yet switched on. AskVault is changing how these suggestions are written. They will be written after the answer, from the answer and the last few messages of the chat, phrased the way the visitor would ask, and written to avoid repeating what the answer already said. No suggestions will be shown after a reply where the agent could not answer, handed the chat to a person, or ended by asking the visitor a question. If a reply offers its own answer options, those still appear.

Growth+

Widgets show a "Powered by AskVault" footer that links to askvault.co. On Growth and above:

  1. Open Appearance, then the Behavior section.
  2. Turn on "Remove 'Powered by AskVault'".
  3. Save.

On Free and Starter the toggle is locked.

Advanced: script-tag attributes

The widget script tag accepts attributes. These take precedence over the dashboard setting on the page where you use them, which helps when one agent runs on pages with different layouts:

<script
  src="https://api.askvault.co/widget.js"
  data-token="YOUR_TOKEN"
  data-position="left"
  data-theme="dark"
  data-panel-mode="centered"
  data-open-delay="5000"
  data-launcher-icon="sparkle"
  async
></script>
AttributeValues
data-positionright (default) or left
data-themeauto (default), light or dark
data-panel-modebubble (default), centered or docked
data-open-delayOpen the widget automatically after this many milliseconds. 0 (default) turns it off.
data-launcher-iconchat (default), sparkle or bubble
data-teaseroff hides the welcome bubble that pops up above the launcher, for pages where it would cover your own buttons. Proactive messages you set up still show.

The launcher icon is set only with data-launcher-icon. Custom launcher images are not supported.

Advanced: JavaScript API

The widget exposes window.AskVault with three methods:

// Tell the widget who the visitor is (see Identity verification)
window.AskVault.setUser({ user_id: "usr_123", name: "Sarah", email: "[email protected]", hash: "..." });


// Forget the visitor, for example on logout
window.AskVault.clearUser();


// Record a custom event
window.AskVault.track("viewed_pricing", { plan: "growth" });

There is no method to open, close or pre-fill the widget from your own button today.

Call clearUser() whenever a visitor logs out of your site, and call setUser() again when someone signs in. These calls end the signed-in chat cleanly. After clearUser(), the widget starts a fresh anonymous chat. If someone else signs in on the same browser, they start with an empty chat and never see the previous visitor's messages. If the identity proof you pass to setUser() is rejected, the widget carries on as an anonymous chat instead of showing an error, and logs a warning in the browser console so you can fix the hash.

Personalized greeting for known visitors

When you pass the visitor's name, through AskVault.setUser or the data-user-name attribute, the welcome screen greets them by name ("Hi Sarah!"). To make sure the identity cannot be spoofed, set up identity verification.

Planned customization (on the roadmap)

Not available today. Listed so you know what we intend to build.

  • Full CSS override. Inject your own CSS from the dashboard.
  • Multi-language welcome messages. Today there is one welcome message per workspace. The agent's replies can already follow the visitor's language.
  • Animated launcher. Pulse, bounce or shake the launcher to draw attention.
  • Widget A/B testing. Split traffic between two configurations. Today, you can use two workspaces and choose which script tag each page loads.

None of these has a committed date. To ask whether one has shipped, email [email protected].

Limits

  • Welcome message. 500 characters.
  • Suggested questions. Up to 5 shown.
  • Bot name. 100 characters.
  • Input placeholder and footer text. 120 characters each.
  • Dismissible notice. 200 characters.

Common pitfalls

A saved change does not appear yet. Settings can take up to a minute to reach your site. Reload the page after that.

The script tag overrides the dashboard. If a page sets data-position, data-theme, data-panel-mode or data-open-delay, the dashboard value for that setting is ignored on that page. Remove the attribute to use the dashboard value.

"Powered by" cannot be switched off. The toggle is locked below Growth. Check your plan.

FAQ

Can I match my exact brand colors?

Yes. The brand color accepts any six-digit hex value. Deeper styling with your own CSS is planned, with no committed date.

Can the widget detect the visitor's language?

Yes. By default the agent detects the language of each visitor message and replies in it. To always reply in one language, open Settings > General and choose it under Reply Language. The welcome message is one text per workspace; multi-language welcome messages are planned.

Can I A/B test widget designs?

Not natively. You can use two workspaces and choose which script tag each page loads.

Does the widget work on mobile?

Yes. The layout adapts to small screens.

Can I open the widget from my own button?

Not today. There is no open or close method. You can open it automatically after a delay with data-open-delay.

Was this page helpful?