"Electronic Program Guides" (often abbreviated as EPGs) are used to provide a "linear content" viewing experience, organized around the concept of Channels.

How to Use

Brands can contain a special "Program Guide" Section (titled "Guide" by default). When activated, this section displays a list of channels using one of the EPG Layouts.

Adding Program Guide to the App:

Step 1: Launch Apps-Creator dashboard Zype | Apps Creator

Step 2: Go to the Content page.

Step 3: Go to the "Program Guides" section.

Step 4: To add a channel, click the "+" symbol.

Step 5: Fill in the form with the required details and add the XMLTV Feed URL.

Step 6: Once saved, this channel will automatically be available under Section > Guide. Here HLS Url can be added to the particular channel by clicking the edit icon.

Note: Wait time of around a few minutes is needed, for channels to get reflected under Guide Section.

Layouts

EPG List

This layout is available on mobile platforms only and is optimized for portrait layout:

EPG Grid

This layout is available on both CTV and mobile platforms, and is optimized for landscape layouts:

Although optimized for landscape layout, unlike the EPG List layout, the EPG Grid layout does support portrait layouts:

Designing of Program Guide:

Step 1: Launch Apps-Creator dashboard Zype | Apps Creator

Step 2: Navigate to the Design page.

Step 3: Go to the Program Guide section.

Step 4: Turn "Program Guide Section" to "On" from the dropdown.

Step 5: Select the required color for all settings.

Mobile Preview:

CTV Preview:

• Details Primary Text: Controls the color of the titles in the detail area

• Details Secondary Text: Controls the color of any text that is not the title in the detail area

• Details Background: Controls the color of the background of the space behind the details and preview (above the timeline on CTV, and inline on mobile)

• Timeline Background: Controls the color of the background of the timeline (the horizontal bar where the times are shown)

• Timeline Marker Color: Controls the color of the marker present adjacent to the time displayed on the timeline (the horizontal bar where the times are shown)

• Time Display Color: Controls the color of the time displayed on the timeline bar.

• Channel Color’= Controls the color of the background of space behind the channel name displayed (in the above screenshot, the background color of ‘SET Andes’)

• Channel Label Color’= Controls the color of the text of channel name displayed (in the above screenshot, the text color of ‘SET Andes’)

• Border Color’= Controls the color of the border of a horizontal bar that displayed episodes coming, in front of the channel (in the above screenshot, a horizontal bar shows up ‘Shark Tank’, ‘Grey’s Anatomy' ..)

• Program Label Color: Controls the color of text of episodes coming on the horizontal bar (in the above screenshot, text color of ‘Shark Tank’)

• Program Subtitle: Controls the color of the subtitle text within the program blocks (in the above screenshot text color of ‘Look up child’)

• Inactive Program Color: Controls the color of background space behind the inactive episodes/program on the horizontal bar (in the above screenshot, the background color of ‘Grey Anatomy’)

• Active Program Color: Controls the color of background space behind the active episodes/program on horizontal bar (in the above screenshot, the background color of ‘Shark Tank')

• Guide Background: Controls the color of the background of the space behind the programs (below the timeline)