Skip to content
AskVault Docs
Try Free →

The Widget Studio

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

What Widget Studio is

A side-by-side editor. Left panel: configuration controls. Right panel: live preview of the widget as it will appear on your site.

Three jobs Widget Studio handles:

  1. Style the widget to match your brand.
  2. Configure visitor-facing copy (welcome, suggested chips, fallback messages).
  3. Generate the embed snippet to paste on your site.

What you can configure

Eight knobs:

  1. Accent color. Hex string. Drives the launcher button and bot message background.
  2. Position. Bottom-right (default), bottom-left, or custom offsets.
  3. Launcher icon. Default bubble, presets, or custom upload.
  4. Welcome message. First-load greeting.
  5. Suggested question chips. Up to 4 clickable starter prompts.
  6. Dark-mode behavior. Auto, always light, always dark.
  7. Branding footer. Show or hide the "Powered by AskVault" footer (Growth+).
  8. Allowed origins. Domains the widget can run on. Cross-origin requests from other domains rejected.

See widget customization for deeper detail on each.

Live preview

The right panel renders the widget with your current config:

  • Click the launcher to preview the open state.
  • Switch device toggle (desktop / tablet / mobile) to verify responsive layout.
  • Toggle dark mode to confirm both themes look correct.
  • Send a test message to see bot response styling.

Preview uses your real workspace's knowledge, so answers reflect what a real visitor would see.

Suggested question chips

The most engagement-driving Widget Studio feature. About 30 to 40% of widget interactions begin with a chip click rather than typing.

Configure up to 4 chips:

"How much does it cost?" "What's the refund policy?" "Talk to sales" "Show me a demo"

Pick chips that:

  • Map to the most-asked questions (data lives under Analytics > Top Questions).
  • Are short enough to fit on mobile widgets (under 30 characters each).
  • Cover different visitor intents (pricing, support, demo, etc.).

Chips can rotate based on the page URL. On /pricing, show pricing-related chips; on /blog, show topic chips.

Embed snippet

When config is locked, Widget Studio generates the embed snippet:

<script src="https://cdn.askvault.co/widget.js" data-workspace="ws_xxxx" async></script>

Paste before </body> on your site. The widget appears within 2 seconds of page load.

For platform-specific instructions:

Theme presets

Three starter presets to skip the manual color-picking:

  • Light professional. Slate gray plus accent color.
  • Dark sleek. Black background, white text, vibrant accent.
  • Pastel friendly. Soft pastels, casual tone.

Pick a preset, then tweak. Resets to defaults via "Reset to preset".

Brand DNA auto-detection

When you signed up, AskVault auto-detected your brand from your site:

  • Logo pulled from your favicon or site header.
  • Primary color extracted from your CSS.
  • Tone inferred from your homepage copy.

These pre-fill Widget Studio. Override anything that doesn't match.

Re-run Brand DNA detection any time under Widget Studio > Brand DNA > Re-detect.

Allowed origins (CORS allowlist)

To prevent the widget from being embedded on unauthorized sites:

  1. Widget Studio > Allowed Origins.
  2. Add domains (e.g., yoursite.co, app.yoursite.co).
  3. Subdomain wildcards supported (*.yoursite.co).
  4. Save.

Widget requests from non-allowlisted domains return HTTP 403. Protects against widget cloning and unauthorized embedding.

Multiple widget tokens

For deploying the same workspace's bot on different sites with different config:

  1. Widget Studio > Tokens > Create New.
  2. Each token gets its own config (color, welcome, suggested chips).
  3. Embed snippet differs per token.

Useful for multi-brand operators or staging vs production deployments. Up to 10 tokens on Business, unlimited on Enterprise.

Per-page configuration via data attributes

The embed snippet accepts data attributes for per-page overrides:

<script
  src="https://cdn.askvault.co/widget.js"
  data-workspace="ws_xxxx"
  data-accent="#FF6B35"
  data-welcome="Hi! Browsing pricing? Ask me anything."
  data-chips="Pricing|Demo|Talk to sales"
  async
></script>

Useful for tailoring the same widget per-page without creating multiple tokens.

Conversion analytics

For each widget token, the dashboard shows:

  • Impressions. Widget loaded (visitor saw the launcher).
  • Opens. Visitor clicked to expand.
  • Conversations started. Visitor sent first message.
  • Conversions. Lead captured, demo booked, escalated, or resolved.

Funnel: about 8 to 15% open rate, 30 to 60% of opens become conversations, 5 to 20% of conversations convert. Tune chips, welcome, and accent color to optimize.

A/B testing

For Growth and above:

  1. Widget Studio > Experiments > Create.
  2. Pick a variant (different welcome message, different chips, different position).
  3. Set traffic split (default 50/50).
  4. Pick a goal metric (conversations started, leads captured, demo booked).
  5. Run for at least 2 weeks to gather significance.
  6. Promote the winner when ready.

Useful for incremental optimization. Top teams run continuous A/B tests.

Mobile-specific config

Mobile-only overrides:

  • Smaller launcher size to avoid covering page content.
  • Different position (often bottom-center on mobile).
  • Shorter welcome message to fit mobile viewport.
  • Hidden on certain pages if mobile real estate is tight.

Configure under Widget Studio > Mobile.

Programmatic API

For advanced integrations, the widget exposes JavaScript:

window.AskVault.open();
window.AskVault.close();
window.AskVault.sendMessage("I want a demo");
window.AskVault.identify({ user_id: "u_123", hash: "abc...", name: "Alice" });
window.AskVault.track("page_view", { url: location.href });

Useful for opening the widget from custom CTAs, pre-filling messages, or capturing identity. See identity verification for the identify() flow.

Audit log

Every widget config change logs:

  • Author, timestamp.
  • Before/after snapshot.
  • Audit retained 365 days standard, 6 years Enterprise.

Useful for rolling back accidental changes or proving config history for compliance.

Planned features (on the roadmap)

Documented for accuracy:

  • Visual CSS override. Today, dashboard knobs. Full visual CSS editor planned.
  • Animated launcher. Today, static icons. Pulse, bounce, shake animations planned.
  • Welcome chip rotation by page. Today, single set per token; data-attribute override per page. Native URL-based rotation planned.
  • Drag-and-drop layout editor. Today, fixed templates. Custom layouts planned for Enterprise.

Limits

  • Widget tokens per workspace. 10 on Business, unlimited Enterprise.
  • Custom icon size. 50 KB max.
  • Welcome message. 500 characters.
  • Suggested chips. Up to 4.
  • CDN cache TTL. 30 seconds.

Common pitfalls

Config changes don't appear. CDN cache. Hard-refresh or wait 30 seconds.

Widget blocked on production site. Domain not in allowed origins. Add under Widget Studio > Allowed Origins.

Wrong color shown. Browser cache. Hard-refresh.

Chips don't fit on mobile. Too long. Cap at 30 characters per chip.

FAQ

Does Widget Studio require coding?

No. Visual editor. Generated embed snippet pastes into any HTML.

Can I have different widget configs per page?

Yes via data attributes on the embed snippet, or via multiple tokens.

Does the widget work on Wix, Squarespace, etc.?

Yes. Any platform that allows custom HTML supports the widget.

Can I customize the widget beyond Widget Studio knobs?

Today, full visual CSS editor is on the roadmap. For deeper customization, host the widget on your own subdomain (Enterprise).

Will widget changes break ongoing conversations?

No. Existing conversations continue. New conversations use the new config.

Was this page helpful?