Skip to main content

Co-Browse

Installation best practices​

A co-browse standalone installation is the same as any other widget installation. You just need to add a script in the <head> tag of your HTML and our widget html tag before the closing of the </body> tag. You can read more on our widget configuration page.

There are cases though where a website that will host a widget is not a simple website. It is a more complex web application that has a lot of layers of components. In those cases we offer some suggestions.

  • If your website is a Single Page Application (SPA) we suggest you create a wrapper component for our widget that will host all functionality. Then embed that component in a component that is shared among all other page components. A footer or a header menu could be such a component.
  • If your website uses server sider rendering(asp.NET etc), we suggest you embed our widget in the Master Page, or the outmost layer component that sits on top of all the other pages. This way if you navigate from one page to another, the widget will always be there.
  • If you would like to use the widget in an authenticated part of the web app, embed it in the outmost authenticated layer. You may have an authenticated Base Page component that hosts all the authenticated pages. Add it there.

The general rule of thumb is that you should embed the widget to a place which is shared with all pages. We do not want to go to a page where the widget does not exist in HTML, otherwise we will lose the connection on an active co-browse session. The co-browse lives wherever our widget lives.

Methods​

MethodValue
setCobrowseFilters(filters: string[], type?: 'darkBox','blurBox')Set an array of css selectors that will be filtered out on the agent side. Used mainly to filter out credit card or password forms. You can also change the way the filter is shown on the agent side. The default is a dark box, you can change to show a blurred field and all the text is replaced with random text.
darkBoxblurBox
darkdark

Support for Cross Origin Iframes​

Due to browser security limitations, a parent frame does not have access to an iFrame that embeds a page of different origin (protocol, domain, port). This means that subdomains are not supported. For example, if your widget is hosted in https://auvious.com and the webpage has an iFrame pointing to https://products.auvious.com, the co-browser will not be able to share the contents of that iFrame.

For iframes of different origins to be captured, a separate script must be included in every such document, as early as possible, i.e. in the head tag.

The allowOrigins configuration option is optional. The list of allowOrigins should be exactly in the format that the location.origin of a document returns.

import { enableCobrowsing } from "@auvious/cobrowser/dist/core/";

enableCobrowsing({
  allowOrigins: ["https://auvious.com", "https://example.auvious.com"],
});

or

<script type="module">
  import { enableCobrowsing } from "https://auvious.video/widget/dist/auvious/cobrowser/core/index.js";

  enableCobrowsing({
    allowOrigins: ["https://auvious.com", "https://example.auvious.com"],
  });
  // ...
</script>

Support for mobile devices​

Our Co-browse service works strictly on web pages. We currently do not offer support for native mobile applications. Mobile web browsers and applications that are web app wrappers are supported though. The best known frameworks for web app wrappers are Cordova and Ionic. Co-browse has been tested to work with Cordova. Our co-browse will also work on a mobile browser.