On a traditional website, every navigation to a new page triggers a full reload of the HTML document. Third-party widgets, like Sleekplan, initialize themselves on each page load, reliably attaching event listeners to their trigger elements (such as feedback buttons).
In a Single Page Application, however, navigation between views happens without a full page reload. Instead, JavaScript dynamically replaces content in the DOM. If a widget is not SPA-aware, it may only initialize once—on the initial load. When users navigate to a new view, the original trigger elements may be removed and replaced, but the widget’s event listeners are not automatically reattached. This can result in feedback buttons or badges that appear on the page but do not work, leading to a broken or inconsistent user experience.
How the Sleekplan Widget Handles Single Page Applications
The Sleekplan SDK is specifically designed to work with SPAs. It uses two key mechanisms to ensure the widget remains functional as users navigate your app:
Automatic Rebinding on History Changes The Sleekplan SDK observes changes to the browser’s history (using the History API). When it detects a navigation event (such as a route change in your SPA), it automatically re-scans the DOM and rebinds event listeners to any Sleekplan triggers or badges that may have been added or replaced. This ensures the widget continues to work as users move between different views in your app.
Manual Rebinding for Dynamic Content In some cases, new Sleekplan triggers or badges might be added to the page dynamically, without a history change (for example, after a user logs in or completes an action). For these scenarios, the SDK provides a manual method: simply call $sleek.rebind() in your JavaScript code after updating the DOM. This tells the SDK to re-scan the page and attach event listeners to any new Sleekplan elements.
Thanks to these mechanisms, the Sleekplan widget remains robust and reliable in Single Page Applications. Whether your app uses React, Angular, Vue.js, or another SPA framework, Sleekplan ensures your users can always provide feedback—no matter how they navigate your site.
💬If you have further questions about integrating Sleekplan with your SPA, please contact our support team or refer to the Sleekplan SDK documentation.