Skip to content
AskVault Docs
Try Free →

Customize the widget appearance

Written by , Founder, AskVault · Reviewed by Aashiq
Last updated: · 4 min read

What you can customize today

Six knobs available in the dashboard under Deploy Hub > Widget > Customize:

  1. Accent color. Hex string. Drives the launcher button and message bubbles.
  2. Position. Bottom-right (default), bottom-left, or custom offset in pixels.
  3. Welcome message. First-load greeting shown when a visitor opens the widget.
  4. Launcher icon. Default chat bubble, custom upload, or one of 5 preset icons.
  5. Dark-mode behavior. Auto (follow OS), always light, always dark.
  6. "Powered by AskVault" footer. Required on Free; hideable on Growth and above. Growth+

Changes apply within 30 seconds because the widget script and config are CDN-cached at that interval.

Setting the accent color

The accent color drives the launcher button background, message bubble background for bot replies, and link colors:

  1. Open Deploy Hub > Widget > Customize > Appearance.
  2. Pick a hex color (e.g., #0EA5E9 for cyan).
  3. Live preview updates instantly in the dashboard.
  4. Click Save.

Accessibility note: the dashboard flags color choices with low contrast ratio against the message background. Aim for at least 4.5:1 contrast for WCAG AA compliance.

Widget position

Default is bottom-right with a 20-pixel offset from both edges. To change:

  1. Open Customize > Position.
  2. Pick "Bottom Right" or "Bottom Left".
  3. Optionally set custom X/Y offsets in pixels.

For sites with footer chat buttons that conflict, increase the Y offset to 80 pixels to clear them.

Mobile behavior: the widget auto-shifts to avoid covering mobile browser chrome. The "bottom" anchor uses env(safe-area-inset-bottom) to stay above the home indicator on iPhones.

Welcome message

What visitors see when they first open the widget:

Hi! I'm here to help. Ask me about pricing, features, or anything else.

To customize:

  1. Open Customize > Welcome Message.
  2. Edit the greeting (max 500 characters).
  3. Optionally add 2 to 4 "suggested questions" as clickable chips.

Suggested questions are powerful: visitors who click a chip get an immediate answer, no typing required. About 30 to 40% of widget interactions start with a chip click. Pick chips that map to the most-asked questions.

Launcher icon

The bubble icon visitors click to open the widget. Three options:

  • Default chat bubble. Generic speech-bubble SVG.
  • One of 5 presets. Headset, lightbulb, question-mark, sparkle, magnifier.
  • Custom upload. 64 by 64 pixel SVG or PNG. Transparent background recommended. Growth+

Custom upload available on Growth and above. File size cap 50 KB.

Dark mode

Three modes:

  • Auto. Follows the visitor's OS preference (prefers-color-scheme).
  • Always light. Forces light theme regardless of OS.
  • Always dark. Forces dark theme regardless of OS.

Auto is the default. Most teams stay on auto unless their site is hard-coded one way.

Free-tier widgets show a "Powered by AskVault" footer that links to the AskVault homepage. On Growth and above, toggle it off:

  1. Customize > Branding.
  2. Disable "Show 'Powered by' footer".
  3. Save. Growth+

The footer disappears within 30 seconds across all installs.

Advanced: per-page overrides via data attributes

The widget script tag accepts data attributes for per-page overrides:

<script
  src="https://cdn.askvault.co/widget.js"
  data-workspace="ws_xxxx"
  data-accent="#FF6B35"
  data-position="bottom-left"
  data-welcome="Hi! Welcome to our pricing page."
  async
></script>

Useful when the same workspace deploys to multiple pages with different visitor intents (pricing page vs blog).

Advanced: programmatic open and close

The widget exposes a global JavaScript API:

// Open the widget
window.AskVault.open();


// Close the widget
window.AskVault.close();


// Toggle
window.AskVault.toggle();


// Pre-fill a message
window.AskVault.sendMessage("I want to talk to sales");

Useful for triggering the widget from your own UI buttons (e.g., a "Chat with us" CTA in the navbar).

Planned customization (on the roadmap)

Features documented here but not yet shipped. Marked as planned so you know what to expect.

  • Full CSS override. Inject arbitrary CSS via the dashboard. Today, deeper customization requires hosting the widget on your own subdomain (Enterprise contract).
  • Multi-language welcome messages. Today, set one welcome per workspace; we auto-detect visitor language for the bot but not for the welcome chip.
  • Animated launcher. Pulse, bounce, or shake the launcher to draw attention. Today, only static icons.
  • Widget A/B testing. Toggle two configurations and split traffic. Today, use two workspaces and split at the script level.

Each ships when prioritized. Subscribe to the changelog for updates.

Identity-verified visitor customization

For logged-in visitors with identity verification configured, the widget can:

  • Use the visitor's first name in the welcome message (Hi {name}, how can I help?).
  • Skip the email-capture prompt since identity is already known.
  • Show plan-specific welcome chips based on the visitor's audience tag.

Configure under Customize > Identity-Verified Visitors.

Limits

  • Custom launcher icon size. 50 KB max.
  • Welcome message length. 500 characters.
  • Suggested question chips. Up to 4.
  • Per-page data attributes. Override any default.
  • CDN cache TTL. 30 seconds.

Common pitfalls

Color change doesn't appear. Browser cache. Hard-refresh, or wait 30 seconds for CDN cache to expire.

Custom launcher icon shows as broken image. File too large or wrong format. Use SVG or PNG under 50 KB.

Welcome message clipped on mobile. Long messages wrap to 3 lines max on mobile. Keep under 100 characters for full visibility.

Position offset pushes widget off-screen. Cap offsets at 200 pixels per axis to prevent accidental hiding.

"Powered by" still shows after toggling off. Plan tier doesn't include the toggle. Confirm you're on Growth or above.

FAQ

Can I match my exact brand colors?

Yes. The accent color accepts any hex value. For deeper styling (fonts, border radius), the full-CSS-override feature is planned.

Can the widget detect the visitor's language?

Yes for bot responses (auto-detected from message). For the welcome message, today it's per-workspace. Multi-language welcome is on the roadmap.

Can I A/B test widget designs?

Today via two workspaces and a script-level split. Native A/B testing is planned.

Does the widget work on mobile?

Yes. Fully responsive. Tested on iOS Safari 14+ and Android Chrome 100+. The widget auto-positions above mobile browser chrome.

Can I open the widget from my own button?

Yes. Call window.AskVault.open() from any click handler.

Was this page helpful?