Set up a JW Showcase

🚧

Since support for JW Showcase will cease on 31 December 2023, you must transition any existing JW Showcase implementations to Apps.

JW Showcase is a cloud-hosted video gallery web app that leverages playlists and player settings from your JWP dashboard to distribute your content on desktop and mobile web. Use the steps below to set up a cloud-hosted Showcase.

🔑

To self-host your Showcase, please refer to Set up a JW Showcase.

📘

To create a JW Showcase website for an app, set all URL Signing options for the specific property to OFF in your Property Settings:

• Click the gear icon next to your name > Properties.
• Click the Settings icon next to the property.

This limitation does not apply to the hosted version of the ott-web-app, which is the successor of Showcase. Please contact your Account Manager for more information.

---

Create a showcase

1. From your JWP dashboard, click Showcase.
2. Enter a Site Name. This sets the <title>, og:title, and og:site_name properties of your Showcase.
3. Enter a Site URL. This sets the page URL.
4. On the CONTENT tab in the Playlist section, select a playlist from the drop-down menu.
5. Click ADD PLAYLIST.
6. Repeat the previous two steps to add multiple playlists.

   💡

   To add more content to your Showcase, you can create additional playlists.

7. On the DESIGN tab in the Select Player section, select a player from the drop-down menu. This player is used across the entire app. The player is automatically set to responsive which is required for mobile optimization.
8. (Optional) Configure additional settings.
9. Click SAVE.

You can click VIEW VIDEO SITE to view the Showcase you have created.

---

Configure additional settings

Content

In addition to adding a manual, dynamic, or trending playlist to your Showcase, you can customize several additional content options.

Additional Options

1. Click the Continue Watching toggle to ON. This displays a list of content that a viewer started watching, but did not finish.
2. Click the Featured Playlist Text Overlay toggle to ON. This displays the name and description of each item in the Featured Carousel.

Recommendations Setting

2. Select a Recommendations playlist from the Similar Video Settings drop-down menu. After all videos in a playlist have played, the Recommendations playlist serves videos based on the first video that a viewer watches.
3. Select a Search playlist from the Video Search Settings drop-down menu to enable the default search functionality in the default header. To ensure that all videos can be returned in a search result, be sure that you do not add any tags to the search playlist.

Design

On the Design tab, you can select a player, choose a page layout, and customize the color scheme.

1. In the Video Page Layout section, choose between a Two Column (Optimized for Ads) or Video Spotlight layout.
2. In the Theme Color Scheme section, choose a Dark or Light color scheme for your Showcase.
3. Enter a color code or choose a color from the color picker to change the Background of the app beneath the player.
4. Enter a color code or choose a color from the color picker to change the Highlight of clickable text, menu items, the progress bar, and player icons. This setting does not change the color of the Cast icon or the Recommendations icon.

Advertising

On the Advertising tab, you can add your DFP Ad Server units to display ads in your Showcase.

🚧

When a playlist is added to a Showcase, ads will play in ad breaks that are associated with that playlist. When using both the advertising functionality of Showcase and ad breaks, be mindful that JWP does not apply competitive exclusions to prevent competitors from serving together.

1. In the Displays Ads section, click the toggle to ON to enable advertising.
2. In the Slots & Position section, add your DFP Network Code and DFP Ad Unit Code in one of the Display Ad fields.

Advanced

On the Advanced tab, you can configure additional features of your Showcase.

General

1. In the Cookie Privacy Notice section, click the toggle to ON to enable a popup notice regarding cookie privacy.
2. In the Reset Showcase, click RESET SETTINGS TO DEFAULT to clear all settings on the CONTENT, DESIGN, ADVERTISING, and ADVANCED tabs.

📘

All Site Info will be cleared and all playlists removed. Once reset, no information can be restored.

Progressive Web App (PWA) Settings

You can use these settings to define the appearance of the mobile app icon and to allow your viewers to save your Showcase to their mobile devices.

1. Enter a short App Name that appears with the Home screen icon.
2. In the Add to Home Screen Prompt section, click the toggle to ON to prompt iOS device viewers to add your Showcase app to their devices.

📘

Android devices natively prompt your viewer to add your Showcase app to their devices.

3. In the App Icons section, click ADD to upload both a Small Icon (192px x 192px, or smaller) and Large Icon (512px x 512px, or larger) for small and large mobile devices.

Header & Footer

This section provides two ways to customize the header and footer content of your Showcase app:

Basic

1. Click Basic.
2. Click REPLACE to add a new logo. The ideal logo height is 72px. For logos that have a height that is greater than 72px, the logo will be proportionally resized.
3. Add Footer Text.
   NOTE: Only add text to this field. No code will render in this field. To add a custom footer, select the Custom header and footer option.

Custom

🚧

• All custom code that is placed in any of these sections is your sole responsibility and cannot be fixed or supported by JWP and its Support team.
• Any custom code can impact the performance and functionality of your Showcase. Be sure to test your custom code thoroughly.
• Adding any custom web font files or external resources from your domain in these sections may require the appropriate CORS headers to ensure functionality.

1. Click Custom.
2. In the Head section, add code that you want inserted into the <head> HTML element of the page.

   ⚠️

   Do not add <meta name="description"> or any <meta property=""> to this section. Entering these tags will conflict with the metadata that Showcase generates.

3. In the Header HTML section, add code that you want inserted after the HTML element of the page.

📘

Any custom code added to this section replaces the default Showcase header: the menu, search functionality, and any previously uploaded logo.

4. In the Footer section, add code that you want inserted before the </body> HTML element of the page.

Search Engine Optimization (SEO)

In the Site Description field, enter a short explanation of the Showcase.

This text can improve search engine optimization and video recommendations. To prevent having a description shortened in search engine results, limit descriptions to less than 100 characters.