Skip to content
AskVault Docs
Try Free →

How to install the AskVault widget on any website

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

What is the AskVault widget?

The AskVault widget is a 12 KB JavaScript embed that drops an AI chat agent onto any website. It loads asynchronously (zero impact on Core Web Vitals), runs on AskVault's infrastructure (no compute on your servers), and answers visitor questions strictly from the content you trained it on. It doesn't make things up.

Every response is sourced from documents you uploaded or sites you crawled, with clickable citations. If a visitor asks something outside the knowledge base, AskVault fires the knowledge.gap_detected webhook so you can backfill the content.

The widget works on every modern stack: WordPress, Shopify, React, Vue, Next.js, Angular, Svelte, plain HTML, Webflow, Wix, Squarespace. The same one-line snippet works everywhere because it's vanilla JavaScript.

Install the widget in 4 steps

These four steps take about 60 seconds end-to-end. You need an AskVault account and access to your website's HTML.

1. Create a workspace and index your content

Sign up at askvault.co/signup (free, no credit card). In the onboarding wizard, paste your website URL. AskVault crawls every public page, extracts the text content, generates vector embeddings, and stores them in your private vector index.

Crawl time depends on site size: a 50-page documentation site indexes in about 90 seconds; a 500-page e-commerce catalog takes 8 to 12 minutes.

2. Open the Deploy tab and pick Widget

In the AskVault dashboard, click Deploy in the left sidebar, then click the Widget card. You'll see a "Generate embed code" button at the top, with a live preview of how the widget will look.

Tweak the appearance now if you want: primary color, position (bottom-right or bottom-left), launcher label, welcome message. Or accept the defaults and come back to it later in Widget Studio.

3. Copy the embed snippet

The generated snippet looks like this:

<script
  async
  defer
  src="https://api.askvault.co/widget.js"
  data-workspace-token="wt_5b45ff_yourtoken_here"
></script>

The data-workspace-token attribute is unique per workspace. It tells the AskVault backend which knowledge base to answer from. The token is safe to keep public; it isn't a secret, and rate limiting is enforced per workspace.

4. Paste before the closing </body> tag

Paste the snippet right before </body> on every page where you want the widget. For most sites that's a single template file: your theme's footer.php (WordPress), _app.tsx or app/layout.tsx (Next.js), App.vue (Vue), index.html (plain HTML), or via Google Tag Manager.

Reload the site. The launcher button shows up bottom-right within about 200 ms. Click it. Ask a question. You'll get a grounded answer with clickable source links.

Verify it works

After deploying, test these three things to confirm the widget is healthy:

  1. The launcher loads on every page. Visit your homepage, a product page, and a blog post. The widget should appear on all three. If it doesn't appear on one, the script tag isn't on that page.
  2. Answers cite your content. Ask the agent something only your docs can answer. The response should include a "Sources" link to the relevant page. If sources are missing, indexing probably hasn't completed yet. Check the Knowledge Hub progress bar.
  3. Conversations show up in the dashboard. Send a test message. Within 30 seconds it should appear in Live Chat > Conversations. If it doesn't, the workspace token in the snippet is wrong.

Customize the widget appearance

Open Widget Studio in the dashboard for the full customization surface:

  • Primary color. Hex picker; matches your brand.
  • Logo. Replaces the AskVault "AI" icon in the launcher.
  • Welcome message. The first thing visitors see when they open the chat.
  • Position. Bottom-right (default) or bottom-left.
  • Launcher label. Text shown next to the launcher icon, like "Ask AI", "Chat with us", or "Help".
  • Custom CSS. Inject your own styles for advanced theming. Business+
  • Identity verification (HMAC). Require visitors to be authenticated before chat opens. Growth+

All changes preview live before you publish. Publishing pushes the new config to every site running your embed snippet within 60 seconds. No redeploy needed.

Remove the "Powered by AskVault" badge

The free-tier widget shows a small "Powered by AskVault" footer link. Upgrade to Growth or higher to remove it. The footer drives roughly 30% of our free-tier signups, which is why we keep it on for free. Every paid plan has the branding-removal toggle in Widget Studio.

Custom domain (serve widget from your own subdomain)

By default the widget loads from api.askvault.co/widget.js. To serve it from your own subdomain (e.g. chat.yourcompany.com/widget.js):

  1. Open Settings > Custom Domain in the dashboard.
  2. Add a DNS CNAME record pointing your subdomain to widget.askvault.co.
  3. Click Verify. AskVault provisions a TLS certificate via Cloudflare in about 90 seconds.
  4. Update your embed snippet's src to the new subdomain.

Custom domains are available on Growth and higher plans.

How the widget loads (Core Web Vitals impact)

The widget loads asynchronously with defer, so it never blocks the parser. The full bundle is 12 KB gzipped. On a typical 4G mobile connection the launcher button is visible within 250 ms of DOMContentLoaded. Lighthouse Performance impact: zero.

The widget does NOT fetch the visitor's chat history, conversation state, or any backend data until the launcher is clicked. That means it's invisible to your site's First Contentful Paint and Largest Contentful Paint metrics. Both Core Web Vitals signals stay clean.

FAQ

How does the widget find my knowledge content?

The widget calls /api/widget/{token}/query on every message. AskVault's backend looks up the workspace by token, runs the message through vector search against the indexed content, and returns the top 5 chunks plus an LLM-generated answer grounded in them. The widget never has direct access to your content. It just renders the answer the API returns.

Does the widget work without JavaScript?

No. The widget is a JavaScript-only embed. For users with JavaScript disabled, link to your Hosted Page as a fallback. It's a full HTML chat interface that works without JS.

How many widgets can I run on one workspace?

One workspace = one widget. If you need different widgets for different sites or product lines, create separate workspaces. The Starter plan includes 2 workspaces; Growth includes 5; Business includes 15.

Can the widget collect leads?

Yes. Enable the collect_lead skill under AI Agents > Skills. When the agent detects buying signals it asks the visitor for their name, email, and (optionally) phone, then logs the lead to Dashboard > Leads with the full conversation context. You can export leads to CSV or auto-push them to HubSpot, Salesforce, or your CRM via webhooks.

What happens when I hit my query quota?

When you hit your monthly cap (100 for Free, 3,000 for Starter, 15,000 for Growth, 50,000 for Business), new visitor messages get a polite "we're busy right now, try again later" reply. You're never silently double-charged. Upgrade under Billing to reset the cap immediately.

Was this page helpful?