Let's start

Via Code

Paste the snippet below right before your closing </body> tag. The snippet already includes your client ID.

Use the agentId option to load a specific agent. Omit it to use the default agent.

• Pros: easiest for small websites.
• Cons: management relying on developers.

              <script src="https://askvio.web.app/widget.js"></script>
              <script>
              (function(){
                window.askvioWidget.init({
                  clientId: 'demo',
                  agentId: 'default'
                });
              })();
              </script>
            

Via Tag Manager

Recommended approach for most websites. Quickly enable or disable the widget and control where it loads.

• Pros: easiest for most websites, easy control on where to fire the tag or not.
• Cons: still requires access to your tag manager.

1. Create a new Custom HTML tag in your container.
2. Paste the snippet below into the tag editor.
3. Set the trigger to All Pages and publish.

                <script src="https://askvio.web.app/widget.js"></script>
                <script>
                (function(){
                  window.askvioWidget.init({
                    clientId: 'demo',
                    agentId: 'default'
                  });
                })();
                </script>
            

Via API

Call our API directly and build your own UI, bypassing the widget entirely. This method returns JSON with the assistant reply and source links.

• Pros: ultimate flexibility, possibility of creating different widgets.
• Cons: requires more development work.

Example request:

curl -X POST https://askvio.web.app/api/search -H 'Content-Type: application/json' -d '{"clientId":"demo","query":"Hello"}'

{
  "answer": "string",
  "sources": [
    { "type": "page", "url": "https://example.com", "title": "Page title" }
  ]
}