Docs / Advanced usage / Multi environment

Multi environment

AskVio gives you two environments for the same widget: Test and Production. This lets you safely validate updates before they are visible to end users.

How multi environment works

  • Test environment: where you try changes (prompts, style, resources, functions, agents, etc.).
  • Production environment: what your live users see on your public website.
  • Preview box behavior: the preview in the app always loads the Test environment so you can instantly verify your latest edits.

Understanding what changed in the UI

  • Yellow dots on resources indicate items that were modified in Test and are different from Production.
  • The navbar environment/status area highlights that there are unpublished changes and helps you review what is pending.
  • When you edit content, the changes are applied immediately to Test. No promotion is required to validate them there.

Promote, discard, or reset

  • If your Test changes are ready, use the promote/publish action to push them to Production.
  • If the changes are not ready, you can discard them.
  • You can also use the specific navbar button to revert Test to the latest Production state, which is useful when you want a clean baseline again.

How to load the right environment on your website

Use environment-aware embedding so each site context loads the right snippet/config:

  • Production website → load the Production environment.
  • Staging / QA website → load the Test environment.

The key is the environment parameter in AskVioWidget.init().

Direct install in your page

Production:

<script src="https://askvio.web.app/widget.js" async></script>
<script>
  window.AskVioWidget.init({
    clientId: "YOUR_CLIENT_ID",
    environment: "production"
  });
</script>

Test (staging / QA):

<script src="https://askvio.web.app/widget.js" async></script>
<script>
  window.AskVioWidget.init({
    clientId: "YOUR_CLIENT_ID",
    environment: "test"
  });
</script>

A common setup is to install Test on your staging domain and Production on your public domain. This keeps experimentation isolated while still making QA realistic.

Google Tag Manager setup (dynamic environment)

In GTM, create a variable (for example {{askvio_environment}}) and set it to test or production based on hostname, route, or page type. Then use that variable in your widget init:

<script src="https://askvio.web.app/widget.js" async></script>
<script>
  window.AskVioWidget.init({
    clientId: "YOUR_CLIENT_ID",
    environment: "{{askvio_environment}}"
  });
</script>

This allows you to run Test only where needed (for example on staging.yourdomain.com or specific QA paths) while keeping the rest of traffic on Production.

Typical scenarios

  • QA team validates a new knowledge base crawl in Test while Production keeps serving stable answers.
  • Design team adjusts widget styling in Test and promotes only when approved.
  • Developers temporarily point a test host to the Test environment to validate behavior end-to-end.

Pro tip: If you load AskVio through Google Tag Manager, define a variable that selects Test or Production dynamically. For example, switch by hostname, path, or page type so specific pages/hosts can use Test while the rest remain on Production.

← Analytics