ZIP Files as Sources for Presentations

Life Sciences Customer Engagement downloads presentations and pages, and the presentation player runs the HTML, CSS, and JavaScript code to show each page.

Presentation Page Contents

In the ZIP file for each presentation page, include these items.

File Name Recommendations for ZIP Source Files

Follow these guidelines for PDF file names. When admins upload presentation ZIP files to Life Sciences Customer Engagement, presentation pages are sorted alphabetically.

• Use the format XX_name.zip for each page’s ZIP file name, where XX is the page number and name is a descriptive title. The page number can’t be longer than 2 characters. The descriptive title must contain at least 2 characters.
• Limit the file name size to 960 bytes or fewer.
• Valid characters are A-Z, a-z, and 0-9.
• HTML file names can’t include spaces.
• For presentations that admins upload in Life Sciences Customer Engagement:
  • These special characters are supported: -, ., _, !, *, ’, (, )
  • These special characters aren’t supported: /, \, and combinations `“ and `”.
  • We recommend avoiding any other special characters.
• For presentations uploaded via the content management Connect API, special characters aren’t supported.
• File extensions are case-sensitive and must be in lowercase, for example, .jpg.
• Double-byte kana, katakana, and numbers are supported, but different operating systems can cause mutations.

Content Recommendations for ZIP Source Files

Note If you create ZIP files on MacOS, the ZIP file can include a system folder. Make sure that you remove any system folders before admins upload ZIP files to Life Sciences Customer Engagement.

Follow these guidelines for presentation content in ZIP source files.

• Each ZIP file must contain at least one HTML file and its corresponding thumbnail JPEG file. For example, 02_secondSlide.html and 02_thumbnail.jpg.
• Each HTML file must include a corresponding thumbnail.
• Thumbnails must be in JPEG format. PNG and GIF files aren’t supported.
• If one presentation page ZIP file contains more than 100 slides, we recommend creating separate page ZIP files for every set of 100 slides.
• Each presentation page ZIP file must be 1 GB or smaller.
• CSS and JavaScript files aren’t required in presentation page ZIP files.
• In each presentation page ZIP file, you can include multiple HTML, JPEG, CSS, and JavaScript files.
• HTML and JPEG files must be at the top level in each presentation page ZIP file. If you include multiple CSS and JavaScript files, you can create folders for these.
• If you create a presentation as one HTML file and use <div> elements to represent each page, the content appears as a single presentation page in the presentation player.

Adding PDFs to Presentations

You can include video files in presentation page ZIP files and refer to the videos in a presentation page’s HTML code. This example presentation page HTML code includes a reference to a PDF.

<a href="dam/iselling/pdf/example.pdf">EXAMPLE PDF FILE</a>

Adding Videos to Presentations

You can include video files in presentation page ZIP files and refer to the videos in a presentation page’s HTML code. The video appears on that page in the presentation. The presentation player supports these video formats. In the HTML code, include the type attribute.

This example presentation page HTML code includes a reference to an MP4 video file.

<video width="320" height="240" controls> <source src="./assets/movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>

Using Videos for Remote Engagement

Videos are supported for remote sessions when your Salesforce org uses Twilio as the service provider. Embedded videos and animation can behave differently in the presentation player during remote sessions. To include animations, we recommend using HTML or JavaScript code instead.

Linking to External Content in Presentations

You can link to external web pages from the presentation page HTML code. Links to PDFs or external content always open in a separate window. To link to an external web page, use this format.

<a href="https://www.google.com/">Google.com</a>

For details about the characters that you can include in URLs, see the RFC 3986 standard.

Adding Additional Content to Presentations

In presentation ZIP files, you can add additional content as PDF files and use links to reference those files from any page in the presentation. To mark a PDF as additional context, add isadditionalcontent_ as a prefix in the file name. To link to an additional content PDF file, use the gotoSlide() function.

When admins upload additional content as part of a ZIP file presentation in Life Sciences Customer Engagement, the Additional Content checkbox is selected automatically on the presentation page record. Admins can also upload additional content PDFs as presentation source files when they upload or update presentations in bulk.

Using iFrame in Presentations

You can use iFrames in the presentation page HTML code. Scrolling is supported within the iFrame. These attributes are supported.

• allow
• height
• name
• sandbox
• src
• srcdoc
• width

Optimizing ZIP File Performance on iPad

To make sure that presentations load quickly and perform well on iPads, follow these guidelines when you build presentation page ZIP files.

• Compress images before you add them to presentations.
• Avoid adding extensive JavaScript logic to each page, such as navigation bars, tabs, tooltips, and dropdown menus.
• Don’t use a content management system (CMS) to generate pages, as the CMS can add unnecessary code and slow down page load times.
• Divide complex pages into multiple simple pages. For example, if you have one page with horizontal or vertical tabs, create a separate page for each tab instead.
• Add a background, a simple image, or a color to the body tag that shows when the page is loading.
• Make sure that users are using supported mobile devices.

Example HTML Page in ZIP File Presentations

This example HTML page lists all customers and prints their names.

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel ="stylesheet" href="media/css/style.css">
    </head>
    <body>
        <div id="screen-container">
        HELLO
            {{#customers}}  <!--this is a mustache loop -->
                <span id="doc_name" class="template">{{firstName }} {{ lastName }}</span>
            {{/customers}}
             ,<br/>DO YOU WANT TO START THE VISIT?</span>
        </div>
    </body>
</html>