SPA Support and Now4real Configuration Reload
You can now change the Now4real widget configuration on the fly and seamlessly support single-page applications.
Even if SPA makes you think of relaxing baths and luxury resorts, in this article I’m going to talk about another kind of SPA, which is more exciting than relaxing.
In web application development, SPA refers to single-page applications. Basically, the website interacts with the user by dynamically rewriting the current web page with new data received from the web server, instead of the classic method where the web browser loads entire new pages. In a SPA, a page refresh never occurs; instead, all necessary resources (HTML, JavaScript, CSS, graphics, data, etc.) are dynamically loaded and added to the page as necessary, usually in response to user actions.
Now4real, the tool that adds live group chats and presence counters to your site in a matter of seconds, is loaded at page startup and uses the URL found at that point in time to define the “page context”. The context is used to decide when users are on the same page so that they increase the same counter and can chat with one another. But, with the SPA paradigm, when the page is dynamically rebuilt, it often happens that the URL is dynamically changed too, to reflect what is currently displayed and allow direct linking. Until now, Now4real couldn’t change its page context without a full page reload.
The great news is that we have released a new feature that allows you to call a Now4real config refresh without reloading the hosting page.
The new reload() method is now available and allows you to request Now4real reinitialization, refreshing both the page context and the launch configuration.
If you want to support SPA sites (based on non-hashed URL paths; support for hashed URL paths will come soon), offering a different pagechat for each route, you can call this method when navigation occurs, to update the Now4real widget context.
This is an example of reload() in a SPA using Vue Router:
// detect navigation
watch:{
$route (to, from) {
now4real.reload()
}
}There are several other cases, apart from SPA, where you might want to use reload(). For example, to change the authentication details of the current user, where you want to pass a new JWT token without reloading the page. Or if you want to change any configuration details of the Now4real widget.
Imagine you want to change the widget color on the fly, perhaps to respond to some user action. It’s as simple as this:
// update widget configuration now4real.config.widget.color_external_background = '#123456' now4real.reload()That’s just a new method added to the Now4real API, but it’s extremely powerful, unlocking many new scenarios for websites and web applications that integrate Now4real.
As always, feel free to drop us an email at support@now4real.com if you have any feedback or questions.
Now4real is a tool that connects your website visitors in real time, with group live chats and presence analytics.
Build instant communities on your website now and boost engagement! It will take only one minute to get started, for real. Visit now4real.com
