Core concept
1. Initial Bundle Load
You only want to load the ResponseiQ JavaScript bundle once on the initial page load. To achieve this, you include a single <script> tag in your SSR-rendered HTML. This script tag:
Can use any valid token, as it won’t load a specific widget.
Must include the parameter `&loadBundleOnly=true` so that only the SDK bundle is loaded.
Here's an example of what that might look like in your SPA layout or page template (e.g., in a `<head>` block):
<script type="text/javascript" src="https://app.responseiq.com/widgetsrc.php?widget=WIDGET_TOKEN&loadBundleOnly=true" ></script>
Note: The actual token you put in place of WIDGET_TOKEN does not matter, as long as it’s a valid ResponseiQ token of yours.
2. Client-Side Widget Selection
Once the bundle is loaded, you can dynamically choose which widget to load based on the current URL or any other logic you desire. The SDK provides a function, Responseiq.CallbackWidget.load({ token }), which programmatically loads the specified widget into your page. This function ensures that:
Only the chosen widget is displayed at a time.
The page's visibility rules set in the widget's settings are respected.
Any previously rendered widget is cleaned up, preventing multiple widgets from stacking.
3. Detecting Route Changes in Nuxt.js (but applicable to any SPA/SSR framework)
In a Nuxt.js application, routing transitions typically happen client-side (after the initial SSR load). Therefore, you should call
Responseiq.CallbackWidget.load({ token }) in your client-side navigation or route hooks, such as:
A global navigation guard (
router.afterEachin a Vue Router setup).A Nuxt plugin that observes route changes. - Within your page components whenever they mount or update.
The essential idea is: whenever the visitor navigates to a new route, determine which widget token applies and call Responseiq.CallbackWidget.load({ token }) with that token.
If you want the widget to be hidden in some routes (or always hidden until a user action), you can also pass in additional parameters such as hiddenMode or enableDebugging where needed.
Example Implementation
This is a reference implementation that shows how to:
Map routes (or URL patterns) to the correct widget token
Dynamically inject a new widget or replace an existing widget upon navigation.
is available in this GitHub Gist: ResponseiQ Multiple Widgets Example
In that file, you’ll see an example approach for:
Checking the current URL to determine which token to load.
Handling a fallback token when no specific URL pattern is matched.
Respecting `hiddenMode` and `enableDebugging` options.
Additional Tips
Debugging: Pass
enableDebugging: trueto see console logs that detail which widget is being loaded. This can be especially helpful while setting up your logic in development.Hidden Mode: If you only want the widget to appear programmatically (for instance, behind a button click or for specific users), you can pass
hiddenMode: trueto hide the widget unless you trigger it manually.
Summary
To integrate multiple ResponseiQ widgets into your Single Page Application with Server-Side Rendering (SSR):
Include a single
<script>tag in your SSR output with&loadBundleOnly=true.On the client side, select which token to load by calling
Responseiq.CallbackWidget.load({ token })in response to route changes or other triggers.(Optional) Use a central mapping function or data structure to manage tokens for various routes, and reference the example implementation for a ready-to-use solution.
Following this pattern ensures you only load one script bundle, keep memory usage and network requests lower, and avoid conflicts from multiple widgets rendering simultaneously. If you have any questions or issues, feel free to contact ResponseiQ support with details of your configuration.