Creating CoBrowse Content

Images, Videos, and PDF Slides

CoBrowse/Engage for Portals supports images, videos, and PDF slides. CoBrowse presentations can contain a maximum of 300 slides.

Images - Images can be created using any Vault support format at any resolution size and aspect ratio. When uploaded to Vault, images are converted to and display in the Engage player as .JPG files.
If the player is larger than the image, the image displays with black borders
If the player is smaller than the image, the image resizes to fit inside the player
In fullscreen mode, the image expands to fit the screen while retaining the aspect ratio
Images display at 800 x 600 resolution
Videos – Videos should be created using any Vault-supported format at 720p and at any aspect ratio. When uploaded to Vault, videos are converted to .mp4 files and are encoded to different bit rates. The Engage player automatically selects the best bit rate for the connection speed.
If the player is larger than the video, the video displays with black borders
If the player is smaller than the video, the video resizes to fit inside the player
In fullscreen mode, the video expands to fit the screen while retaining the aspect ratio
PDFs - Any document type for which Vault generates a Viewable Rendition can be used as a PDF slide
PDF is a common file type for delivering content
PDFs can be included in CoBrowse/Engage presentations
Limit PDF documents to 100 pages for best performance
When the Engage player encounters a PDF slide, it automatically resizes the PDF content to fit inside the player. The PDF displays with all player controls and buttons enabled.

Fullscreen mode is limited to the following browsers: Chrome for Android, Chrome for desktop browsers, Firefox (laptop only), Safari (laptop only), and IE11 (laptop and surface).

To add images, videos, and PDF slides:

Upload the content directly into Vault as a Multichannel Slide document type.
Set the Engage Content field to Yes.
Select an option from the CRM Media Type picklist: Image, PDF, Video, or HTML.

Vault automatically creates and packages necessary files (including the poster and thumbnail) from the source document.

Building Multichannel HTML Content

Users can develop one piece of content that can be used across channels. However, it may not always be practical or cost effective to invest in HTML content that works identically on all platforms--especially when deploying content over the web to HCPs using Engage for Portals or CoBrowse.

HCPs use many different web browsers, and older browsers, such as Internet Explorer 8, are still commonly used in many healthcare organizations and private practices. Older browsers cannot display rich HTML5 content developed for Veeva CLM on iPad or Windows.

Cross-Browser Development Approaches

Web browsers have differing levels of compliance with HTML, CSS and JavaScript standards. Most modern browsers (Firefox, Chrome, Safari and Microsoft Edge) are standards compliant. Older browsers, such as Internet Explorer 8, 9, and 10, have lower levels of compliance. Content developed using HTML5 standards will not render properly unless you invest additional effort to make the content backwards-compatible with older standards. While best practices to create content for the consumer internet are widely documented, there is no authoritative source. Veeva suggests using Mozilla’s Web Developer Guides as a basis.

Two content development approaches can be used in Veeva CLM and also deployed to the web using Engage for Portals or CoBrowse:

Create one presentation that renders on all browsers. This guarantees that a single presentation is reusable but requires additional testing and design constraints.
Design simpler than usual content. This ensures the content renders on older web browsers.
Use conditional logic to determine browser capabilities and adjust content dynamically. This logic adds complexity but is possible with single presentations.
Create two presentation variants: one for Veeva CLM that renders only on the device browser and one for Engage for Portals and CoBrowse that runs on all internet browsers.
This approach duplicates content to some degree, but it is simpler to test and deploy
CLM content can be more sophisticated than web content
Updates and release cycles can be independent for CLM and Engage for Portals/CoBrowse, resulting in less risk
If CLM content needs to be very sophisticated with complex visuals and use of the CLM JavaScript library, this method is the best option

HTML Content Packaging

HTML slide content is also secured. However, since an HTML slide is a collection of many types of assets (images, CSS, JavaScript, fonts) referenced within an HTML page, we can only secure the primary slide HTML page. All linked assets within a page are technically accessible on the web without a secure token; however it would take considerable effort to reverse engineer a complete slide.

For example, a slide HTML page is named index.html.

./doc_id/index.html

The myslide1.html contains links to images and css and js files in subfolders:

./doc_id/images/image1.jpg
./doc_id/shared/styles.css
./doc_id/shared/animations.js

Organize the content using specific guidelines within a slide folder structure. The following folder names are reserved for organizing HTML assets in the parent slide folder. You cannot use other folder names.

./img/
./image/
./images/
./shared/
./html/

All files within these folders are publicly accessible. If users know the root path, which can be difficult to discover, they can retrieve assets from these folder locations. The content in its entirely will never be accessible since the primary page that represents the slide is secured behind an authentication token.

These file extensions are always publicly accessible:

.JS
.CSS
.TTF
.WOFF
.WOFF2
.SVG
.EOT
.CUR

When uploading presentations into Vault, package them based on the following guidelines and upload them as source files. See Manually Uploaded Distribution Packages in Vault Help for more information.

any_name.zip
index.html - Required file name. This name is required for the main page.
thumb.png - Required file for the player to use as a thumbnail image
(img/image/images/shared/html folders)

The legacy CLM packaging structure is detailed in the Packaging Custom CLM Content topic. The .ZIP file shares a name with the HTML file inside a folder. For example, the cholecap-1-intro.ZIP file and the cholecap-1-intro.HTML file are stored in the cholecap-1-intro folder.

Loading Content in Vault

All Engage content must be stored in Vault. Each piece of content is stored as a document.

Additional properties for Engage are

CRM Media Type: This field is required. The options are Image, PDF, Video, and HTML.
HTML width: the width of the content; this field is blank if the content is not a fixed size
HTML height: the height of the content; this field is blank if the content is not a fixed size
HTML file name: the name of the HTML file when using the legacy packaging structure; if using the current packaging structure, this value is “index.HTML”
Key Message: references a specific Key Message

Multichannel slides marked as Engage content should be placed inside an Multichannel Presentation binder. Vault creates a distribution package for images, PDFs, and videos and attaches it to the Vault document. User must upload a Zip file for HTML content. When the Send to Engage action is triggered, the distribution package is sent to the CDN and published so CRM can retrieve the metadata from Vault. See Integration and Security Process for more info.

The Multichannel presentation maps to Multichannel content records
The Multichannel slides inside the Multichannel presentation map to Multichannel Content Asset records
Content Deployment records are also created to match the Multichannel Content to a site

To create an image slide in Vault:

Select an image.
Upload the image to Vault as the Multichannel Slide document type.
Enter the properties of the document.
Select Yes in the Engage Content field.

Vault converts the image to .JPG, creates a .PNG thumbnail (200x150), zips the files, and creates the Veeva Distribution Package. The user can modify the thumbnail.

To process video content in Vault:

Select a video.
Upload the video to Vault as the Multichannel Slide document type.
Enter the properties of the document.
Select Engage Content = Yes.

Vault converts the video different bitrates and creates a poster .PNG and thumbnail .PNG (200x150) of the video. All the files are zipped and placed in an Engage distribution package. The user can modify the poster and thumbnail.

To process HTML content in Vault:

Select a ZIP file that is packaged per Packaging Custom CLM Content.
Upload the ZIP file to Vault as the Multichannel Slide document type.
Enter the properties of the document.
Select Yes in the Engage Content field.

If it is fixed size HTML content, enter the HTML width, HTML height
If using CLM packaging structure, enter the HTML file name. Do not enter this information if using the new Engage packaging structure with index.html.

Vault finds the image in the ZIP file and uploads it as the source file. Vault also adds the ZIP file as the Distribution Package for the Multichannel Slide.

To create a presentation:

Create a Multichannel Presentation document.
Enter the document properties.
Select Yes in the Engage Content field.
Select Yes in the CoBrowse Content field if the Presentation should be available for CoBrowse.
Select the appropriate multichannel slides to include (where Engage Content = Yes).
Select the appropriate websites.

Users need to create these Key Messages, websites, and product properties as records in CRM and then manually create them in Vault as Vault Object Framework (VOF) records. They can be selected via the properties on the Vault document.

See Working with CLM Content in Vault Help for additional information.

Testing Engage/CoBrowse Content

Always test content in a native browser before testing in Engage/CoBrowse. The Engage/CoBrowse media player supports IE8+. While the content must be designed to render within these browsers, if the content does not work in a browser, it will not work in the media player.

Veeva also recommends you test in an iframe before testing in Engage/CoBrowse. The iframe simulates how content will behave in the Engage/Cobrowse media player. It can be a challenge to build content that is responsive in an iframe because the vertical dimension may not behave as expected. For example, media queries, the 'vm,vh' units, a combination of both could cause unexpected behavior.

The following is a sample iframe landing page that ensures the web page hosting the CoBrowse player fills the entire page:

<!DOCTYPE HTML>

<html>

<head>

<title>Engage/CoBrowse iframe content sample</title>

</head>

<body>

</body></html>

Engage/CoBrowse Content Tips

Always use cross-browser supported HTML, assuming the customer expects content to work on Internet Explorer 8. Can I Use is the authoritative source on cross-browser supported HTML.
Use a default meta tag for the landing page and for content pages. Do not scale the content using meta. For example:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
Do not use rem units for sizing anything, for example, text or images. This can unpredictable results on desktop vs mobile and is not compatible with older versions of Internet Explorer.
Do not use vw units for sizing. The are not compatible with Internet Explorer 8.
Third-party javascript libraries, such as jQuery, must support Internet Explorer 8 and higher. This may mean using older versions of those libraries.
Test HTML content in iframe before testing in Engage
Test HTML content in native browsers before testing in Engage/CoBrowse
Embedded videos in HTML are not supported
PDF documents embedded within HTML popups are not supported
The following Veeva JavaScript Library functions work with Engage/CoBrowse. For more JavaScript information specific to Engage, see the Engage section in the JavaScript Library.
NextSlide(), PrevSlide() - navigates to adjacent slides
gotoSlide() - navigates to a slide based on the provided parameters
GetDataforCurrentObject() (limited to Account object) - displays Account attributes
createMultichannelActivityLine() - creates custom clickstream tracking
gotoSlide JavaScript functionality is available for CoBrowse/Engage. See HTML5 Content Creation for more information.

CoBrowse Content Tips

You must include the Veeva JavaScript library even if it does not explicitly use any of the Veeva Javascript functions. To verify the library is present, look for a red dot on the participant’s screen that indicates the presenter’s mouse.
Touch interactions on the HTML content between the presenter and viewer must be facilitated. Get the latest version of the Veeva JavaScript function here.
Javascript events are limited to
onMouseClick
onMouseMove
Input fields and check box select actions are now supported and cannot be used in CoBrowse HTML content.

This feature allows presenters to use interactive content, such as calculators, in their presentations.

For example, if a presenter enters age and weight into a dosage calculator, the viewer can see the details and results of the calculation.

In addition to keyboard inputs, the HTML <select> tag is supported as an interactive element transferred via CoBrowse

This feature is enabled by default.

Avoid touch events
Drag and drop is not supported
Page- and document-level scrolling is supported
Complex scrolling in sub-elements is not supported
Test content from both sides (presenter and viewer) to ensure actions are transferred
If users will present CoBrowse content from a touch device, HTML slides and host pages should include code snippets to improve the user experience on touch devices. The following are recommended content changes, but are not required:
Prevent the content from zooming when the user double-taps the iPad screen
Code snippet sample:
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
Prevent the host page from bouncing on iOS and mobile Safari when navigating the content using touch gestures. The default behavior on touch devices is that a web page “bounces” when the user flicks the page up, down, left, or right. This movement can distract the presenter and make it difficult to navigate CoBrowse content. The code snippet must be added at two levels:
The customer page hosting the Engage for Portals/CoBrowse player
Each HTML slide page (for HTML slides only; not required for image or video slides)
- Code snippet sample:
  document.addEventListener("touchmove", function(event){
  event.preventDefault();
  });
Prevent touch-hold gestures from invoking the copy/paste menu. The CoBrowse presenter may inadvertently trigger the menu when touching interactive elements on an HTML slide. To prevent this, add the code snippet at two levels:
The customer page hosting the Engage for Portals/CoBrowse player
Each HTML slide page (for HTML slides only; this is not required for image or video slides)
- Code snippet sample:
- document.addEventListener("touchmove", function(event){
  event.preventDefault();
  });
The snipped code can be included in a CSS file, in a <style> tag in the head of the HTML content page, or as an inline style.