Skip to main content

Widget support on various types of websites

Our auvious widget implementation is a client-side javascript web component that lives as a part of a website. This means that it follows the normal lifecycle of a website or web application. The two major categories of websites and web applications are as follows

How the internet works​

A normal lifecycle of a web page goes as follows

  • A request starts from the browser to the server by the user when they followed a certain url
  • The server responds to that request with an HTML response
  • The browse renders that HTML
  • The user navigates to another page, thus creating a new request to the server
  • The server responds with a new HTML response
  • Everything on the browser is destroyed an the new HTML response is shown

Normal web pages​

As we can see, on a classic web page, when a new page is loaded everything is destoryed and created againg from the beginning. Our widget, being a part of that web page is also destroyed and created again on the next lifecycle. Fortunatelly the browser offers various ways that we can use to keep a state, so our widget knows on the next page load if it should resume from where it left off.

What about an ongoing video call?​

Good question. As we saw, the widget has to obey to the laws of the internet, thus when the user navigates to another page, it is destroyed and created again. This will interrupt briefly the call, as the user will have to wait for the new page to load, then the widget to load and finally the widget to connect again to the ongoing call.

How can we avoid this?​

  1. Pop-out the video call. The customer has the ability to open the video call in a new window. They just have to click the pop-out icon on the top right of the video call so that it opens in a new window. The browser may block this new window so the customer will also have to approve this pop-up on the browser.

  2. Wrap the web page in an iFrame. Our widget will live on the parent web page and all the navigation will happen in the child iFrame.

Single Page Applications (SPA)​

A Single Page Application is a javascript based website that loads the content HTML asynchronously. What this means is that the web page loads only once and every consequent call to the server is done asynchrously. Most modern applications are build this way. One of the many advantages of this technology is that the web page does not have to be destroyed and loaded again when we navigate to another page of the web site. Everything is done using javascript.

Our widget in a Single Page Application behaves as the SPA web page and does NOT load again on each navigation change. The video call or co-browse session remains uninterrupted.