Skip to main content

Why Is the URL in the Address Bar Not Changing?

When using the Bambuser Miniplayer, you might notice that the address bar URL doesn't update when navigating around your site. This document explains why this happens and provides solutions based on your website architecture.

Understanding Navigation Modes​

The Miniplayer supports two navigation modes:

  • Iframe Navigation Mode (default): Your website is rendered inside an iframe when the player minimizes
  • Manual Navigation Mode: Used for Single Page Applications (SPAs), requiring manual navigation handling

The navigation mode you choose significantly affects URL behavior. Learn more about navigation modes in the Miniplayer compatibility guide.

Common Scenarios​

1. You Have an SPA Website But Use Iframe Navigation Mode​

Problem​

If your website is a Single Page Application (SPA) but you're using the default iframe navigation mode (or haven't configured a navigation mode), you'll encounter several issues:

  • The URL in the address bar won't update when navigating between pages
  • Your SPA routing will not work correctly when clicking on the product or checkout in the player
  • Users might experience unexpected behavior with back/forward browser buttons

Solution​

For SPAs, you should use Manual Navigation Mode:

window.onBambuserLiveShoppingReady = (player) => {
  player.configure({
    buttons: {
      dismiss: player.BUTTON.MINIMIZE,
    },
    floatingPlayer: {
      navigationMode: player.FLOATING_PLAYER_NAVIGATION_MODE.MANUAL,
    },
  });

  player.on(player.EVENT.NAVIGATE_BEHIND_TO, function (event) {
    // Handle navigation manually using your SPA's routing system
    // For example, using React Router or similar
    history.pushState({}, null, event.url);
    // Load the new page content without a full page reload
  });
};

This configuration allows your SPA to handle navigation events directly, ensuring proper URL updates and maintaining routing functionality. For comprehensive implementation details, see the SPA integration guide.

2. You Have a Non-SPA Website Navigating Across Origins​

Problem​

When navigating to a cross-origin page (a page on a different domain or subdomain) while the Miniplayer is active, the address bar remains unchanged.

For example:

  • If the Miniplayer is active on www.example.com and the user navigates to checkout.example.com, the address bar will continue displaying www.example.com.

This happens due to browser security policies:

  • Iframe Isolation: Websites rendered inside an iframe cannot manipulate the parent page's URL when navigating across origins
  • Cross-Origin Restrictions: Navigating between domains within an iframe does not notify the parent browser window

Learn more about cross-domain limitations in the Miniplayer compatibility guide.

Solutions​

2.1. Avoid Cross-Origin Navigation​

If possible, keep all navigation within the same origin while the Miniplayer is active.

2.2. Use Alternative Navigation Strategies​

When cross-origin navigation is unavoidable:

  • Open External Links in New Tabs: Use the target="_blank" attribute for links leading to different domains.

    <a href="https://checkout.example.com" target="_blank">Proceed to Checkout</a>

  • Close the Miniplayer During Navigation: Use the target="_top" attribute to force the page to load in the top-level browsing context, effectively closing the Miniplayer.

    <a href="https://checkout.example.com" target="_top">Proceed to Checkout</a>

Detecting Miniplayer and Applying Attributes Dynamically:

To implement these strategies properly, you first need to detect when your site is running inside the Miniplayer's iframe. You can use the top !== self check to determine this:

document.addEventListener("DOMContentLoaded", (event) => {
  // This will be true if your page is being rendered in an iframe (Miniplayer is active)
  if (top !== self) {
    // Find your checkout or external domain links
    let checkoutButton = document.getElementById("checkout-button");
    
    // Apply the appropriate attribute
    // Use target="_blank" to open in new tab without disrupting the miniplayer
    checkoutButton.setAttribute("target", "_blank");
    
    // Or use target="_top" to break out of the iframe (closes miniplayer)
    // checkoutButton.setAttribute("target", "_top");
  }
});

This ensures your navigation attributes are only modified when the Miniplayer is active, maintaining normal behavior at other times.

2.3. Disable Miniplayer When Necessary​

For critical user flows that involve cross-origin navigation, consider disabling the Miniplayer altogether to provide a more consistent user experience.

Additional Resources​