Deploying Landing Pages

The Engage Media Player is deployed within a customer-owned landing page. The Engage media viewer is a window within the landing page, and its pixel dimensions are smaller than the CLM Media Player. The Engage Media Player is commonly sized at 600 x 400 pixels to fit within a customer’s existing website template. As a result, content for CLM that is fixed size may not fit as expected. This is an important reason why Engage content is often built separately from CLM content.

CoBrowse landing pages should fill the entire screen and be free from content, including URLs, that link away from the page. The viewer should not be distracted by other content or be able to click away from the presentation. The CoBrowse media viewer is often the full size of the landing page, creating additional real estate for content design.

In general, we recommend media viewers be embedded with a pixel width and height set to 100 percent so the viewer scales within the DIV container as the page is resized.

However, if your content is a fixed size, Veeva recommends the media viewer be embedded within a DIV that is defined with fixed height and width pixel dimensions. This guarantees the content always displays at a fixed size; if the user’s browser is smaller than the content, the user may need to scroll to view the content.

Configuring Engage for Portals- Website Configuration

Embedding the Engage Media Player

To embed the Engage Media Player in a website:

  1. Select the embed code for the player from the Engage Admin page in CRM.
  2. Enter the height and width attributes in percentages on the div element. This makes the player responsive to changes in the browser size. Note: to make it a fixed size, enter the attributes in pixels.

To make your Engage content look and feel like a mini site, embed the Engage Media Player on a site without any other HTML. The player automatically fills the website and acts like a mini site.

It is the responsibility of the host website to decide whether to display a message which informs users that cookies are utilized by a third party (the Engage Media Player). It is also the customer's responsibility to update any wording in their Privacy Policy that needs to be changed because of the use of cookies.                          

HTML Content Matrix

 

Responsive Website

Fixed Website

Responsive Content

Content fills and shrinks with the website.

Content fills the player. Player stays at the size designated on the website.

Fixed Content

HTML Height and HTML Width filled in

Content is centered in the player.

If player gets too small, the content is cut off.

If player is larger, a black box displays around the content.

Player size should be designated to be the same size as the HTML Height and HTML Width.

Content fills the player.

If player size is designated too small, the content is cut off.

If player is larger, a black box displays around the content.

Fixed Content

HTML Height and HTML Width not filled in

Content displays starting from the top left corner of the player.

If player gets too small, the content is cut off.

If player is larger, a black box displays around the content.

Player size should be designated to be the same size as the content.

Content fills the player.

If player size is designated too small, the content is cut off.

If player is larger, a black box displays around the content.

Configuring the Engage Media Player

The player can be embedded in one of two modes:

  • Display default presentation
  • Display a default presentation on a publicly available site where you want default content to always be visible. You can also re-use this page to display Engage content delivered via Approved Email. The Engage presentation linked within the email will override and replace the default presentation
  • The embed code is available on the Engage Content Admin page in the Site Manager section. The embed code is generic for every Site.
  • Do not display default presentation
  • This configuration allows you to have the Engage Media Player on a publicly available site, but no content will display, and the player will be hidden and invisible by default. The Engage presentation will only be displayed when linked to via an Approved Email, or a CoBrowse invitation.
  • The embed code is available on the Engage Content Admin page in the Deployment Manager section. The embed code is unique to every Site + Multichannel Content Name (Presentation). There is a unique embed code for each row in this table, and the ‘Engage’ token has a value.

The following optional parameters can be used to configure the Engage Media Player.

Display Default Presentation. Default is no presentation is displayed and viewer is hidden.

Parameter Name Single Value
engage Security Token that’s available in the Engage Content Administration page for each specific Presentation+Site combination

Video slides will autoplay by default, without the user clicking the ‘play’ button. Default is OFF, videos will not autoplay.

Parameter Name Possible Values
autoplay true = ON / false = OFF

Display error when Engage Media Player cannot connect to Veeva CRM.

Parameter Name Values
error

Error message between single quotes, eg ‘Content cannot be displayed’

 

Configuring the Engage Media Player to Support CoBrowse

There are several configuration options to add additional parameters to the Engage Media Player embed code.

The Engage parameter should be NULL for CoBrowse and no default presentation displays.

When used for CoBrowse, it is recommended to embed the Engage Media Player in a very basic HTML page that reserves the majority of the screen real estate for the content, and exclude the page navigation.

It is expected that one Engage Media Player for CoBrowse is deployed and re-used by all brands, but this assumes a generic company branding, or no branding at all. Customers can elect to have per-brand CoBrowse sites;the Engage Media Player can be embedded into many branded sites.

Do not enable the Related Content navigation bar for Sites used for CoBrowse. Related Content is not supported for CoBrowse presentations.

  • Chat - disabled by default. Customers can enable the chat section of the CoBrowse controls. Chat messages display to all presenters and all viewers. There are no private chats.The text is written back to the User_Input_vod field on the Multichannel_Activity_Line_vod object. Ensure the integration user has write permission to this field.
  • Parameter Name - chat

    • Values - True = ON, False = OFF

  • Welcome/Waiting Messages - Customers can configure a “pre call” message which is displayed to Viewers before the presenter has pressed the "Start Presenting" button and a “during call” message which is displayed to Viewers if the Presenter loses connectivity or presses the "Stop Presenting" button.

Parameter Name

Default Value if not populated

pre_call

“Waiting for presentation to begin”

during_call

'Waiting for presenter'

  • These messages are formatted by the Engage Media Player to be centered in the middle of the Engage Media Player
  • When the pre_call message is displayed, the player does not display any content
  • When the during_call message is displayed, there is also a spinner icon and the content is blacked out
  • Translation Messages - All of the labels used in the Engage Media Player for CoBrowse can be translated by adding the following parameter/value and translations code to the Site HTML and providing alternative text inside of the quotes of the translations code. Only one translation is supported per host page.

Parameter Name

Value

translations

encodeURIComponent(JSON.stringify(translations))

  var translations = {

“connected”: "Connected",

“autoplayBlocked”: "Please click or tap here to watch the video",

“disconnected”: "Disconnected",

“userArrived”: "{name} has arrived",

“userLeft”: "{name} has left",

“startPresentation”: "Start Presentation",

“stopPresentation”: "Stop Presentation",

“attendees”: "Attendees",

“presenter”: "Presenter",

“me”: "Me",

“chat”: "Chat",

“typeMessage”: "Type your message"

"changePresentation": "Change",

"thumbnailBack": "Back",

"thumbnailCancel": "Cancel",

"allPresentations": "All Presentations",

"slideCount": "{0} slide",

"slideCounts": "{0} slides",

"presentationCounts": "{0} presentations",

"search": "Search"

                };

Below is an example HTML page to use a fully configured Engage embed code configuration that supports CoBrowse translations and chat:

<title>VerteoBiopharma</title>

<body>

<div id="engage" style="position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px;"></div>

<script>

var tag = document.createElement('script');

tag.src = "//cdnmc1.vod309.com/multichannel/veeva/js/engage/embed-engage.js";

var engage = document.getElementById('engage');

engage.parentNode.insertBefore(tag, engage.nextSibling);

var translations = {

"connected": "已连接",

"disconnected": "Disconnected",

"userArrived": "{name} 已经到来",

"userLeft": "{name} 已经离开",

"chat": "交谈"

"startPresentation": "Start Presentation",

"stopPresentation": "Stop Presentation",

"attendees": "Attendees",

"presenter": "Presenter",

"me”: "Me",

"typeMessage": "Type your message"

};

var player;

function onVeevaEngageReady() {

player = new VeevaEngage.initialize('engage', {

dns: '//cdnmc1.vod309.com/multichannel/release/engage/index.html',

mc: 'https://mc1.vod309.com/multichannel',

height: '100%',

width: '100%',

error: 'Error message displayed when the media player cannot connect to Veeva',

translations: encodeURIComponent(JSON.stringify(translations)),

chat: true,

pre_call: "About to start",

during_call: "Attempting to join",

});

}

</script>

</body>

</html>

Below is an example HTML page to use the simple Engage embed code configuration to support video autoplay, but without any CoBrowse functionality, and without a default presentation:

<title>VerteoBiopharma</title>

<body>

<div id="engage" style="position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px;"></div>

<script>

var tag = document.createElement('script');

tag.src = '//cdnmc1.vod309.com/multichannel/veeva/js/engage/embed-engage.js';

var engage = document.getElementById('engage');

engage.parentNode.insertBefore(tag, engage.nextSibling);

var player;

function onVeevaEngageReady() {

player = new VeevaEngage.initialize('engage', {

dns: '//cdnmc1.vod309.com/multichannel/release/engage/index.html',

mc: 'https://mc1.vod309.com/multichannel',

autoplay: true,

height: '100%',

width: '100%',

error: 'Error message displayed when the media player cannot connect to Veeva',

});

}

</script>

</body>

</html>

Below is an example HTML page to use the simple Engage embed code configuration with a default presentation:

<title>VerteoBiopharma</title>

<body>

<div id="engage" style="position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px;"></div>

<script>

var tag = document.createElement('script');

tag.src = '//cdnmc1.vod309.com/multichannel/veeva/js/engage/embed-engage.js';

var engage = document.getElementById('engage');

engage.parentNode.insertBefore(tag, engage.nextSibling);

var player;

function onVeevaEngageReady() {

player = new VeevaEngage.initialize('engage', {

dns: '//cdnmc1.vod309.com/multichannel/release/engage/index.html',

mc: 'https://mc1.vod309.com/multichannel',

autoplay: true,

engage: '1XFDrucGEh98IuQaLnrjrtatpkGhkDEAJE%2FI%2FmJ2EaIkqe3qdmgUlwhdAmsyE%2BZnRTrpc0CMiUNRoyWEYYZGUIdHTKtKBaE4Jgg9Sjc02M2ob%2FExXzc7H2bYLOuXeEmCR5d10lFkpK5KYuQ9%2BpftonQWxhjnLtsrp5AIU6yLWAioX3lE42ffKkoY4YtBGZ0yOWgZfs2Klr7IJNSFXDqB9ttL48DqZfaIJHuSmm5JPF70IuF5zZmuaoRRRsuEk%2FQwRAzcWcY5ThkQZ%2FhEKCVHEg%3D%3D',

height: '100%',

width: '100%',

error: 'Error message displayed when the media player cannot connect to Veeva',

});

}

</script>

</body>

</html>

Below is an example of code set up to utilize all the embed code configuration possibilities:

<title>VerteoBiopharma</title>

<body>

<div id="engage" style="position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px;"></div>

    <script>

    var tag = document.createElement('script');

        tag.src = "//cdnmc1.vod309.com/multichannel/veeva/js/engage/embed-engage-v1.js";

        var engage = document.getElementById('engage');

        engage.parentNode.insertBefore(tag, engage.nextSibling);

 

    var translations = {

           "connected": "已连接",

    “disconnected”: "Disconnected",

           "userArrived": "{name} 已经到来",

           "userLeft": "{name} 已经离开",

           "chat": "交谈"

            “startPresentation”: "Start Presentation",

            “stopPresentation”: "Stop Presentation",

            “attendees”: "Attendees",

            “presenter”: "Presenter",

            “me”: "Me",

            “typeMessage”: "Type your message"

         };

 

    var player;

         function onVeevaEngageReady() {

             player = new VeevaEngage.initialize('engage', {

         dns: 'https://mc1.vod309.com/multichannel/app/engage/index',

         engage: '1XFDrucGEh98IuQaLnrjrtatpkGhkDEAJE%2FI%2FmJ2EaIkqe3qdmgUlwhdAmsyE%2BZnRTrpc0CMiUNRoyWEYYZGUIdHTKtKBaE4Jgg9Sjc02M2ob%2FExXzc7H2bYLOuXeEmCR5d10lFkpK5KYuQ9%2BpftonQWxhjnLtsrp5AIU6yLWAioX3lE42ffKkoY4YtBGZ0yOWgZfs2Klr7IJNSFXDqB9ttL48DqZfaIJHuSmm5JPF70IuF5zZmuaoRRRsuEk%2FQwRAzcWcY5ThkQZ%2FhEKCVHEg%3D%3D',      

             height: '100%',

             width: '100%',

             error: "Error!",

             autoplay: false,

      translations: encodeURIComponent(JSON.stringify(translations)),

             chat: true,

      pre_call: "About to start",

             during_call: "Attempting to join",

 

           });

    }

    </script>

    </body></html>