Creating Engage Content

The Engage Player is supported on Chrome, Safari, and Firefox on desktops and Safari mobile on iPad, Chrome and stock browser on Android on mobile devices.

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
  • PDFs in Engage for Portals presentations display as rendered images in the player and are not interactive
  • 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), and Safari (laptop only).

To add images, videos, and PDF slides:

  1. Upload the content directly into Vault as a Multichannel Slide document type.
  2. Set the Engage Content field to Yes.
  3. 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.

Securing Engage/CoBrowse Content

To protect your content from unauthorized access, a secure token is generated and used for CoBrowse and Engage sessions. This secures all slides that are images, videos, or PDFs. No Engage/CoBrowse content is indexed by search engines.

Creating HTML Content

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 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.

To optimize storage space and reduce sync times, HTML assets can be shared across multiple Key Messages in CLM and Engage for Portals. See Using Shared Resources for more information.

Embedded videos in HTML are not supported.

Cross-Browser Web Development

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 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

Responsive HTML Content

Engage for Portals supports responsive content. However, vertical responsiveness within an iFrame can be a technical challenge. There are different methods to achieve this.

Responsive content is not required for CoBrowse. Content is scaled to the presenter’s viewport so the participant views the same content. WebEx and GoToMeeting scale content in a similar manner.

For example, the New York Times website is a responsive website, meaning it resizes to fit the player.

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:

  1. Select an image.
  2. Upload the image to Vault as the Multichannel Slide document type.
  3. Enter the properties of the document.
  4. 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:

  1. Select a video.
  2. Upload the video to Vault as the Multichannel Slide document type.
  3. Enter the properties of the document.
  4. 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:

  1. Select a ZIP file that is packaged per Packaging Custom CLM Content.
  2. Upload the ZIP file to Vault as the Multichannel Slide document type.
  3. Enter the properties of the document.
  4. 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:

  1. Create a Multichannel Presentation document.
  2. Enter the document properties.
  3. Select Yes in the Engage Content field.
  4. Select Yes in the CoBrowse Content field if the Presentation should be available for CoBrowse.
  5. Select the appropriate multichannel slides to include (where Engage Content = Yes).
  6. 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>

<iframe style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: white;" frameborder="0" width="100%" height="100%" scrolling="no" src="./engage-cobrowse_content_page.html"></iframe>

</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.

This feature is available for Engage for Portals and on the iPad and Windows Tablet platforms.