Docs / On your website

The widget on your website

You decide how you offer the widget to your visitors. For most approaches it comes down to one snippet of code you add to a page; it's live within fifteen minutes. This page brings everything together: how to put Vragen.ai on your site, how to style it to match your brand and how to include it in your Content Security Policy.

Using WordPress or Drupal? There is a dedicated WordPress plugin that synchronizes your content and places the widget as a block, and a Drupal module that replaces Drupal search with semantic search.

How to offer the widget

Everything starts with a deployment: a variant of the widget that you create in the vragen.ai dashboard. You can create as many as you like, for example one for your website and one for your intranet, each with its own example questions, texts and styling. For each deployment, the dashboard gives you the corresponding code or link.

When creating one, you make two choices: how the window appears, and how you install it on your site.

How the window appears

You configure this on the deployment itself. If you change it later, the code on your site doesn't need to change with it. You can choose from:

• On your own page (inline). The window sits right within your content, like on the vragen.ai homepage.

• As an overlay. The window opens on top of your page, for example after clicking a button.

• As a side panel. The window slides in from the side of the screen.

• As a standalone page. vragen.ai hosts a complete page with just the widget; you point to it with a link.

• In your existing search field. Autocomplete shows suggestions as someone types. The Search Add-on places an AI summary above your regular search results.

How to put it on your site

A link to a hosted page. The fastest start, without installing anything. Choose the "standalone page" form for the deployment; you then get a URL that you attach to a button or link on your site:

<a href="https://jouworganisatie.vragen.ai/deployment/[deployment-naam]" target="_blank">Ask your question</a>

Useful if you don't have access to your site's templates yet, for a demo or for a link on your intranet.

An embed script. This puts the window directly into a page. You place this script and an empty div element where the window should appear:

<script src="https://jouworganisatie.vragen.ai/embed.js?deployment=[deployment-naam]"></script>
<div id="vragenai-app"></div>

The script loads from your own vragen.ai subdomain, and the deployment parameter determines which variant appears. Whether the window opens inline, as an overlay or as a side panel follows from that deployment's settings. You need access to your page's HTML for this.

As a smart addition to your search engine. Want to improve your existing search field instead of showing a separate window? Then you connect vragen.ai to your current search field with a separate script (embed-autocomplete.js) that the dashboard prepares for you. This belongs to the "Autocomplete" and "Search Add-on" forms.

Via the API. For custom builds there is a REST API. You send a question with context to vragen.ai and get an answer with sources back. Live streaming of answers works via the open AG-UI protocol, which vragen.ai supports, so you can recreate the widget experience in your own interface. This is how you build vragen.ai into your own system, for example a customer portal, knowledge base or helpdesk.

For internal use cases, you can put a deployment behind a login so that only employees can use the widget.

Styling the widget

The widget should look like it belongs to your website. That's possible in every plan: you fully customize the appearance with your own CSS.

The widget renders inline in your page, so not in an iframe. All styling is scoped: the widget doesn't leak CSS into the rest of your site, and your site's CSS won't accidentally break the widget. If you want to change something, you do so deliberately with your own rules. Three starting points:

• The #vragenai-app element. Put this ID in your selectors; that way your rules win over the widget CSS.

• CSS variables. The widget uses custom properties (such as --vragenai-color-primary, the primary color) for colors and other base values. Set them on #vragenai-app and the whole widget follows along.

• BEM classes. Every component has its own class, such as vragenai-question-form__input for the input field. Use these to style one specific component.

There is no published list of all variables and classes. Inspect the widget in your browser (right-click, "Inspect") to see which ones apply to a component.

Example:

#vragenai-app {
  --vragenai-color-primary: #1d4ed8; /* your brand color */
  font-family: "Your brand font", sans-serif;
}

#vragenai-app .vragenai-question-form__input {
  font-size: 1.0625rem;
}

That's how we do it ourselves: the widget on the vragen.ai homepage is styled to our own brand with this kind of CSS, right down to a brand gradient as the border around the input field.

Content Security Policy

Many organizations, especially in government and healthcare, secure their website with a Content Security Policy (CSP): a header that determines which external sources the browser may load. The widget is easy to include, because it only needs one domain.

Everything comes from your own vragen.ai subdomain. Specifically:

• Scripts: embed.js and the widget's JavaScript bundle

• Stylesheet: one CSS file

• API requests: asking questions and streaming answers

• Images: images shown by the widget also come from your own subdomain

There are no external CDNs, fonts, trackers or iframes. The widget does set inline styles on a few components; the example below takes that into account.

Replace jouworganisatie.vragen.ai with your own subdomain and add these sources to your existing policy:

script-src  'self' https://jouworganisatie.vragen.ai;
style-src   'self' https://jouworganisatie.vragen.ai 'unsafe-inline';
connect-src 'self' https://jouworganisatie.vragen.ai;
img-src     'self' https://jouworganisatie.vragen.ai;

The 'unsafe-inline' in style-src is needed for the widget's inline styles. If you don't want to allow that site-wide, use the more fine-grained style-src-attr directive. frame-src is not needed: the widget renders directly in your page, without an iframe.

Is your CSP still blocking something? You'll see it as an error in the browser console (F12). Email the error message to service@vragen.ai; we respond within one business day.

Frequently asked questions

Can I use multiple widgets on one page?
Yes, with separate deployments, each with its own configuration.

Can we customize the design ourselves?
Yes. In every plan you style the widget with your own CSS: colors, font and more (see "Styling the widget" above). You can also hide the vragen.ai branding for a fully white-label appearance.

What if we don't have access to our site yet?
Start with the link to a hosted page. You can always switch to an embed later.

Need help?
Our team walks you through it step by step. Email service@vragen.ai or schedule an integration call.