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, refer to Advocate Installation Scripts.

Multi-program support

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

<script>
	// Setup configuration
</script>

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

Display translated widgets

📘

To display a translated widget, you must first upload translated content for your Advocate program.

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:

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

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:

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

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

<script>
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>