[[[https://codepen.io/box-platform/pen/rRZxYq]]]
<body>
  <div class="preview-container"></div>
</body>
html,
body,
.preview-container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    min-width: 320px;
}
// NOTE: This codepen uses https://codepen.io/box-platform/pen/xBRLmP for static assets and authentication. The token used is a readonly token accessing public data in a demo enterprise.

// How to use this CodePen:
// 1. Get started with Box Platform and create an application: https://developer.box.com/docs/getting-started-box-platform

// 2. Generate an access token using an SDK or use a developer token from https://app.box.com/developers/console/ -> your application -> configuration in the left sidebar -> Generate Developer Token. See https://developer.box.com/docs/special-scopes-for-box-ui-elements for various scopes you can use for the file picker.

// 3. Whitelist 'https://s.codepen.io' and 'https://codepen.io' in your CORS allowed origins in https://app.box.com/developers/console/ -> your application -> configuration in the left sidebar -> CORS Domains

// 4. Choose a folder ID or use '0' for the root folder.

// 5. Enter your access token below, replacing the existing access token. Replace the folder ID with yours from step 4.

var contentPreview = new Box.ContentPreview();

// Show the content explorer
contentPreview.show(configData.FILE_ID, configData.ACCESS_TOKEN, {
    container: '.preview-container',
    contentSidebarProps: {
        detailsSidebarProps: {
            hasNotices: true,
            hasProperties: true,
            hasAccessStats: true,
            hasVersions: true
        },
        hasActivityFeed: true,
        hasSkills: true,
        hasVersions: true,
        hasMetadata: true
    },
    hasHeader: true,
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/box-platform/pen/rRZxYq.js