PDF Cobrowsing

Glance Cobrowse supports cobrowsing PDF files that your customer may wish to view when navigating your website. The following section outlines requirements and implementation steps for enabling cobrowsing of PDF files on your web property.

NOTE: The PDFs must be hosted on a webserver. Glance does not support cobrowsing documents downloaded to the customer’s computer.

How it works

All browsers have a built-in native PDF viewer which, unlike the browser's HTML page viewer, cannot run JavaScript, including the Glance Cobrowse JavaScript. The key to making PDF Cobrowse work is to configure Glance Cobrowse to instead open PDF files in the Glance PDF viewer. When a visitor views a PDF document in the Glance PDF viewer, it can be cobrowsed just like any other page.

Implementation

There are two options for enabling the ability to cobrowse PDFs, depending on how users navigate to PDFs on your web property:

Option 1 – Anchor Tag Selectors

In some cases, a PDF document is opened by a visitor clicking on an anchor tag link. In this case, the Anchor Tag Selector method can be used. For example, if your web page has an anchor tag such as:

<a class="pdf" href="https://www.glancevelo.com/pricelist.pdf">Price List</a>

Glance Cobrowse can be configured to automatically open this pdf in the Glance PDF Viewer. This is done via CSS selectors, similar to how you identify masked fields.

The following are some typical selectors, either of which would work for the anchor tag example above:

a.pdf All anchor tags with class=pdf
a[href$=pdf] All anchor tags which reference .pdf files

The CSS Selectors used here must be unique to PDFs. Whenever a visitor clicks a link with one of these selectors during a session, cobrowse expects a PDF. If the link is not a PDF, the result will be an error stating "Could not open document".

You then configure the PDF CSS selectors in the My Account portal, per the instructions below.

Adding PDF CSS Selectors

  1. Go to My Account> Settings> Manage Your Cobrowse Settings link.
  2. Scroll to the PDF Elements section. PDF Selector UI.
  3. Enter the CSS selectors into the PDF CSS Selectors field, and click Add.
  4. When you are ready to move to from staging to production, click Publish to Production.
  5. You can download a list of the selectors from the Export button.

Option 2 – JavaScript API Call

Sometimes PDFs are opened via a window.open call in JavaScript. In this case, the JavaScript API Call method must be used. For example, if your web page has a button which opens a PDF file by calling:

window.open("https://www.glancevelo.com/pricelist.pdf")

You must modify your JavaScript to call GLANCE.Cobrowse.Visitor.viewPDF() instead when in a Cobrowse session:

if (GLANCE.Cobrowse.Visitor.inSession()) {
  GLANCE.Cobrowse.Visitor.viewPDF(params);
} else window.open("[url to the pdf file]");

where

params = { url : ["url to the pdf file"] }

The url to the pdf file must be an absolute url. If the JavaScript works with relative URLs, you can build an absolute URL by combining window.location with the relative path:

var absurl = window.location.protocol + "//" + window.location.hostname + window.location.pathname + "/" + relativeurl      

GLANCE.Cobrowse.Visitor.viewPDF({url: absurl})

Features

The Glance PDF viewer includes the following interface elements for navigating through the document:

  • Page selector, which allows the visitor to open a specific page in the document
  • Page forward and back buttons
  • Zoom in and out
  • Page up and page down keys

There is a link to open the document in the browser’s native PDF viewer, to get additional functionality not supported by the Glance viewer:

  • Print
  • Form filling (Chrome)

However, once the visitor opens the document in the native viewer, the agent cannot follow.

Limitations

The following is a list of the current limitations of PDF Cobrowsing:

  • No form filling
  • No printing
  • No masking
  • Agent cannot scroll
  • PDFs currently always open in the same tab, regardless of how the website behaves when not in a cobrowse session
  • Original page and PDF must share same protocol to avoid mixed content errors
  • Original page and PDF must either be on the same domain, or the PDF server must return CORS (cross-origin resource sharing) headers
  • Any limitations of PDF.js: no video, high-resolution images, etc.

By continuing to use the site, you agree to the use of cookies. Learn More