> ## Documentation Index
> Fetch the complete documentation index at: https://developer.voyado.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Installing the script

> [!WARNING]
>
> This feature is in **beta**. This means it might at any time be changed, withdrawn from your account, or become part of a paid add-on module. You might also experience interruptions of this service, degradation of user experience or faulty behavior even in critical processes such as automations and sendouts. Voyado welcomes feedback on beta features, and encourages you to try them, but you should *not* build business critical logic on beta features. Only when a feature reaches its full release can you trust it to function reliably with no further breaking changes.

To install the script, start by creating two **Custom HTML** tags in GTM that both fire on **All Pages**.

* The first tag *loads* the script and *configures* the session
* The second *identifies* the logged-in user

Use whatever script URL matches your target environment (see **Environments** above):

> **Show configuration script for Staging**
>
> ```html theme={null}
> <script>
> (function(i,s,o,g,r,a,m){i['VoyadoObject']=r;i[r]=i[r]||function()
> {(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();
> a=s.createElement(o),m=s.getElementsByTagName(o)[0];
> a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
> })(window,document,'script','https://static.staging.onsite.voyado.com/widget/voyado.js','voyado');
>
> voyado('config', {
>   locale: '{{DL - Locale}}'         // (optional) e.g. 'sv-SE' — falls back to browser language
> });
> </script>
> ```

> **Show login script for Staging**
>
> ```html theme={null}
> <script>
> voyado('login', {
>   email: '{{DL - Email}}',           // (optional) logged-in customer email
>   name: '{{DL - Name}}',             // (optional) logged-in customer name
>   contactId: '{{DL - ContactId}}'    // (optional) logged-in Voyado contact ID
> });
> </script>
> ```

> **Show configuration script for Production**
>
> ```html theme={null}
> <script>
> (function(i,s,o,g,r,a,m){i['VoyadoObject']=r;i[r]=i[r]||function()
> {(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();
> a=s.createElement(o),m=s.getElementsByTagName(o)[0];
> a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
> })(window,document,'script','https://static.onsite.voyado.com/widget/voyado.js','voyado');
>
> voyado('config', {
>   locale: '{{DL - Locale}}'         // (optional) e.g. 'sv-SE' — falls back to browser language
> });
> </script>
> ```

> **Show login script for Production**
>
> ```html theme={null}
> <script>
> voyado('login', {
>   email: '{{DL - Email}}',           // (optional) logged-in customer email
>   name: '{{DL - Name}}',             // (optional) logged-in customer name
>   contactId: '{{DL - ContactId}}'    // (optional) logged-in Voyado contact ID
> });
> </script>
> ```
>
> Here, replace `{{DL - ...}}` with your own GTM Data Layer variables.

> [!TIP]
>
> All calls to `voyado()` made before the script finishes loading are queued and replayed automatically when the script is ready, so tag ordering here is not critical.

## Adding queuing function (required)

The GTM tag above loads `voyado.js` asynchronously. This means your page code may call `voyado('load-widgets', ...)` before the script has finished loading, resulting in a `ReferenceError: voyado is not defined`.

To prevent this, add the following minimal stub to your `<head>` **before** the GTM snippet. This creates a queuing function that captures any calls made before `voyado.js` arrives, which the SDK replays automatically on bootstrap.

> **See queuing function stub**
>
> ```html theme={null}
> <head>
>   <!-- Voyado stub — install before GTM so page-level voyado() calls queue safely -->
>   <script>
>   window.voyado = window.voyado || function() {
>     (window.voyado.q = window.voyado.q || []).push(arguments);
>   };
>   </script>
>
>   <!-- Google Tag Manager -->
>   ...
> </head>
> ```

This is a one-time addition to your page template. All `voyado()` calls made anywhere on that page are then safe regardless of the GTM load timing.

> [!TIP]
>
> GTM's own initialization snippet (`i[r]=i[r]||function()...`) performs the same setup but only after `gtm.js` has downloaded. The stub above runs synchronously during HTML parsing, before any network requests, closing the race window.

## Load widgets

Create additional **Custom HTML** tags for each page type. Fire them on the appropriate triggers (for example a DOM Ready trigger filtered by the page path).

> **Category / listing pages**
>
> ```html theme={null}
> <script>
> voyado('load-widgets', ['ratings']);
> </script>
> ```

> **Product detail pages**
>
> ```html theme={null}
> <script>
> voyado('load-widgets', ['badge', 'reviews', 'ratings', 'summary', 'rate']);
> </script>
> ```
>
> > [!WARNING]
> >
> > Either the *Badge* widget or the *Add Review* widget ("badge" and "reviews" in the list above) - or both of them - must be present on product detail pages.

> [!WARNING]
>
> Only list the widget types whose HTML containers actually exist on the current page.

## SPA route changes (if applicable)

If your site is a SPA (Single Page Application) then create a tag that fires on your virtual page-view trigger:

```html Single Page Application theme={null}
<script>
voyado('reset-widgets');
// After the new view is rendered:
voyado('load-widgets', ['ratings']);  // adjust per page type
</script>
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.