Overview

Single Page Applications (SPAs) only trigger a full page load when they are initially loaded. Navigating between pages in SPAs doesn’t reload the page, which means the Userback widget must be manually notified of URL changes to ensure the correct content is displayed to end-users.

Why Is This Necessary?

The Userback widget relies on URL targeting to determine when and where to display feedback widgets or surveys. Since SPAs don't reload pages during navigation, the widget won't automatically detect URL changes. To fix this, you need to manually refresh the Userback widget whenever the route changes in your app.

How to Integrate Userback with SPAs

Add the following code to any part of your application where the route changes occur. This ensures the Userback widget is refreshed on each route change.

Generic JavaScript Example

Userback.refresh();

Place this code in your application's routing logic to notify Userback of URL changes.

React (Next.js) Example

If you’re using Next.js (React), you can utilize the useEffect hook to detect route changes and call Userback.refresh().

import { useRouter } from 'next/router';
import { useEffect } from 'react';

const MyApp = ({ Component, pageProps }) => {
    const router = useRouter();

    useEffect(() => {
        Userback.refresh(); // Notify Userback of URL changes
    }, [router.asPath]);

    return <Component {...pageProps} />;
};

export default MyApp;

This will automatically refresh the Userback widget whenever the router.asPath changes, ensuring accurate widget targeting.

How It Works

• Manual Refresh: By calling Userback.refresh(), you force the widget to reevaluate its targeting conditions based on the current URL.
• Widget Update: The widget will dynamically show or hide based on your configuration, ensuring the correct feedback widget or survey is displayed to end-users.

When to Use Userback.refresh()

• Route Changes: Anytime your app transitions between pages without a full reload (e.g., navigating between views in an SPA).
• Dynamic Content: When new content is loaded dynamically that requires a different widget or survey.

🛟 Support

Need help? Here’s how to get assistance:

1. Log in to your Userback workspace.
2. Click the Help Center icon in the top-right corner.
3. Select Contact us to start a chat with our support team.