Leveraging Client Events with Box Content Preview

Box Developers
Box Developer Blog
Published in
3 min readJul 13, 2017

Today, we announced Box Content Preview, part of Box UI Elements, a Javascript library to display interactive viewers for documents, images, audio files, video files, and more in your apps. Box Content Preview dynamically selects a file viewer, based on the type of file requested, to display in a container in your app’s UI. Box offers viewers for more than 120 different file types (we’ve also opened up our preview technology to allow you to build your own file viewers in Box) that can be accessed using Box Content Preview.

Beyond just displaying a file, each of the file viewers available using Box Content Preview fires a number of events in the client, known as client events, as your users interact with the file preview in your app. For example, a user viewing a video can pause a video, skip to a certain time, change the speed of the video, etc. You can add Javascript listeners for binding to these client events, which can then be fed into a product analytics tool like Mixpanel to create your own analytics stream, or even build custom dashboards for how content is used and interacted with in your app. Each viewer reports on a common set of client events, like file load or navigate, as well as specific events based on the types of controls that are exposed to the user for that particular file type. You can read about all the viewers, the annotations and controls they offer, and the types of events fired here.

To show you the types of things you can do with client events, our friends at Pressly have created a dashboard to drill into how content is consumed and interacted with in their apps. Pressly is a software solution that makes it easy for enterprises to curate and share content, including sharing files both internally and externally. To deliver even more value to their customers, Pressly wanted a way to show their users exactly how other users were interacting with their shared content, such as understanding how much of a video a particular user viewed or how long users were spending on each page of a monthly report.

Pressly leverages client events to capture which pages of a PDF a user views and for how long
Pressly leverages client events to capture how long users watch a video

You can take advantage of client events with the Box Content Preview UI Element by integrating Content Preview into your app. To get started, check out the documentation on Box Content Preview here.

If you have any questions, check out the Box Developer Forum to explore solutions or post a question, or feel free to reach out to us on Twitter. We can’t wait to see what you build!

--

--