# Advanced Advocate Installation Scripts

Below are some advanced use cases that you may run into when implementing UTT for a referral program. Please speak to your Implementation Engineer before using these scripts for your program.

For a list of key scripts that apply to most or all implementations, go to [Advocate Installation Scripts](https://integrations.impact.com/impact-brand/docs/install-the-utt).

## Multi-program support

UTT allows you to include multiple widgets on the same page. Here’s an example:

{% tabs %}
{% tab title="HTML" %}

```html
<script type="text/javascript">
  // Setup configuration
</script>

<impact-embed widget="w/referral-widget"></impact-embed>
<impact-popup widget="w/popup-widget"></impact-popup>
```

{% endtab %}
{% endtabs %}

## Display translated widgets

{% hint style="success" %}
**Note:** To display a translated widget, you must first upload [translated content](https://help.impact.com/en/support/solutions/articles/155000000864) for your Advocate program.
{% endhint %}

Translated widget content can be displayed to participants in two ways:

* By including a `locale` attribute with the `impact-embed` web component
* By including a `locale` value on a participant’s user object

For the best participant experience, we recommend including a `locale` attribute with the web component. This `locale` allows you to serve content to the participant according to their browser language. It temporarily overrides any `locale` value on the user object. If a locale value exists on both the user object and in the web component, then the value used in the web component determines which version of the content your participants see.

**Example:**

{% tabs %}
{% tab title="HTML" %}

```html
<impact-embed locale="fr_FR" widget="w/myWidget"></impact-embed>
```

{% endtab %}
{% endtabs %}

## Preload an embedded widget

Reduce load times for participants by preloading an embedded widget in the background.

You can pass a parent container or a query selector to UTT, giving you more control on where and how your widget is loaded within your app. When you pass UTT a container or query selector, the embedded widget is shown via a calling method instead of being displayed when loaded. For example, the widget can be loaded and then shown or hidden as a participant navigates your app, instead of re-rendering.

The widget returned from your call to UTT has `.open()` and `.close()` methods to show or hide itself. Calling '.open()' reveals the widget and can trigger a background refresh. Calling '.close()' hides the widget.

The following example applies to popup and embedded widgets with a container or custom query selector. The code opens the widget as soon as it is available:

{% tabs %}
{% tab title="HTML" %}

```html
<div class="widget-container"></div>
<impact-embed
  widget="w/widget-type"
  container="widget-container"
  open
></impact-embed>
```

{% endtab %}
{% endtabs %}

The example below opens the widget as soon as it's available and closes it after a 5 second delay:

{% tabs %}
{% tab title="JavaScript" %}

```javascript
<script type="text/javascript">
  document.addEventListener("sqh:widget-loaded", () => {
    setTimeout(() => {
      const widget = document.querySelector("impact-embed");
      widget.close();
    }, 5000);
  });
</script>
<impact-embed widget="w/widget-type" open></impact-embed>
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://integrations.impact.com/integration-guides/for-brands/advocate/advocate-tracking-integrations/advanced-advocate-installation-scripts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.