Manage Look & Feel in Red Bee Apps¶
With the App Management by Red Bee you can create the look and feel you want for your apps. All apps show the same content, but with our frontend you will receive a look and feel that is true to each specific platform.
General¶
Select General from the left side menu to manage the static information in the apps. Here title of the service, which page is the home page, logos and contact information among other things are added.
- Title: Pick a name for your service - this will be displayed in the tab of a web browser as well as being used in the preview when shared in social media, e.g. on Twitter or Facebook.
- Description: Add a description - this will as well be used when you, or your customers, share your URL to the world.
- Homepage - if you already have managed to create some pages, you can select here which of the pages will be the home page, i.e. the first page showing once a user has entered your app. This will also be the page which the icon leads to when clicked.
- Add a logo - this will be the logo displayed inside your app in the upper left corner. This should have a height of at least 200 pixels, but will be scaled down if larger.
- Favicon - Can be added if you prefer another icon than the logo in the browser tab. Preferred to be a squared image.
- Background image - This is the image that is show when a person is referred to the Sign Up page. This is especially important to add if your service is locked behind a login wall before the consumer can browse your content. The preferred size of this image is at least 1920x1080 pixels.
- Contact information - the information that is displayed inside your apps for contacting you as a service provider.
- Chromecast received ID - if you want your service to be cast to a custom Google Chromecast, you need to have a receiver ID. Otherwise it will fall back to use our predefined generic receiver.
- Apple AppStore ID: If you have an iOS app and the user finds your service through the web, this field filled in will enable that the user will get the suggestion to download your app from AppStore or open the content on the app if they already have downloaded it.
- Google Analytics - If you want additional tracking, you can add your Analytics ID
Build your App Theme¶
By selecting menu Theme in the left side menu, you will be able to adapt the colour scheme and feel. Here you will get a selection of different colour codes and positions.
| Theme name | What is changed |
|---|---|
| Dark | Not used in the Red Bee provided apps |
| Light | Used as the highlighting colour in text shadows and icons through out the app |
| Primary brand color | This color is used to make the app become more lively and are used on some text, buttons etc |
| Secondary brand color | Not used by Red Bee provided apps |
| Primary background color | The background color throughout the app, needs to be different to make the text color pop |
| Secondary background color | Used in overlays on web and on menus in mobile apps |
| Primary text color | All the text color on titles, detail pages meta data etc |
| Secondary text color | Not used by Red Bee provided apps |
| Hero banner text color | If you tend to use a lot of hero banner images that are the same colour as your primary text colour, you can pick a different color that can be used on the hero banner area |
| Error | The error code color that appers inside your app |
| Light | The success code color that appers inside your app |
| Warning | The warning code color that appers inside your app |
Structure your content¶
When you've set up your branding, through logos and theme colors, as well as started to upload your content it's time to set up the structure of the site to be browsed by your customers.
The work is structured into three main categories
- Pages
- Components (which exists in different flavors)
- Menus
Pages¶
The concept of pages in our platform does not hold any site structure as such, which is rather handled by the menu set up, but will rather let you to create a set of component sets that will all exist flat top level when published and all pages can be set as either home page or as a subpage.
The list will, as seen below, show whether a page is published or not, though the publication itself is handled by being linked in a menu.
Set up a new Page¶
To set up a new page is fairly simple. You click the Create button as shown on the image above and you will get prompted with a modal view asking you to set the title, an optional id (which will act as slug for the url path), copy an existing page or set up the page with a proposed structure.
If you choose to set up the page with a proposed structure, you will be asked to set up a hero banner on the top, and other components underneath.
Otherwise it will just prompt you to add any component. This will of course let you set up a similar page as the already structured one, but will also give you even more dynamic.
Components¶
There are 3 main types of components as of today, with the ambition to add even more over time.
Hero Component¶
The hero component, often mentioned as hero banner component as well, is a big carousel of banners which is primarily meant to be placed on top of the page. It shows one single banner item at the time by either an image or a video and can link the user further to a subpage, a single asset detail page or directly to playback of an asset or a channel.
This is a component that will most often be used as your main promotion area and the imagery or video being shown should preferrably be of the promotional kind.
To create a hero component, click Create in the Hero component card and choose the naming of your component. This will mainly simplify your work finding the component in your editing workflow later on.
Now you will be prompted to either add asset items to your hero banner, or add a custom item by yourself.
Adding an existing asset will create a hero banner item with predefined data from that asset's information, which can of course be overwritten. This will only change the data shown in the hero banner, not on the asset itself. Only assets of the following types can be added: MOVIE, TV_CHANNEL, SERIES, EPISODE, COLLECTION, EVENT.
Adding a custom item to the hero banner will let you set all this data from scratch.
Preferred imagery for the hero banner items is ratio of 16:9 and from 1920x1080 and up in size. We do however recommend to do some compression yourself and not upload images that are bigger than 10 mb.
If you choose to set a trailer to be played we still recommend you to set an image, as it will be shown before the trailer starts to play as well as fallback if something would happen. The trailer itself is recommended to be set as free to play and without encryption.
Summary¶
- Image or video
- Ratio 16:9
- Min 1920 x 1080 px
- Link to page, asset or player
- Pre-populated by asset or entirely custom
Carousel¶
The carousels are the main build blocks of your site. The components that will mainly be used to show of the content and channels that you have, for the end users.
Creating a new carousel let you first decide the type of carousel that you want to create. Some are driven by data in the platform, some are personalized out of consumption behavior and some are just showing assets out of a tag or curation set up by you as an editor.
The available types are
- Curated, where you as an editor select each asset to be shown and in which order.
- Tag, where you select a specific tag and sort order and the carousel will be automatically provided with content where this tag is added.
- Single Channel EPG, where you select a channel and its programs will be fetched and shown with the ongoing program in focus and highlighted.
- Live event, which will query the ongoing and upcoming live events set up in the platform.
- Continue watching, which will automatically provide the end user with his or hers personalized state in content, to continue watch where they were.
- Recommended, which will automatically provide the end user with recommendation based on the consumption history on their account.
- Purchases, which will automatically show up with content that the user has purchased as TVOD, when placed out on a page.
- Favourites, which will automatically show up with content that the user has marked as favourites, when placed out on a page.
- Follow Tag, which will show an aggregated personalized feed of videos from the tags that each end users follows.
All carousels can have a sub heading set that will be displayed underneath the title of the carousel.
If you creates a tag based carousel, you can choose whether the assets should be required to hold all of the selected tags (e.g. an Action Comedy movie) or either one (e.g. an Action movie or a Comedy movie) and you may as well set the sort order of the assets to be shown according to the image below.
How the carousel will be shown is set on the reference into a page rather than on the component itself. The created components can rather be seen as a range of available content queries to be reused throughout the site.
Summary¶
- Predefined types for Live, EPG or personalized content
- Custom Curated or Tag based
- Populated by the asset information
Image Component¶
The image component is the simplest one and is fairly self explanatory. You can write an optional title and description to be shown on the image as well as the action to be triggered when clicked.
This is perfect as an extra promotion area mid page, as complement to the hero component that you may preferrably apply on the top.
It's preferred to use a landscape image, which will then be shown full width.
On big screen, external links will appear as a QR code for the end user to navigate to on their second screen.
Summary¶
- Perfect for mid page promotion
- Optional text on top, otherwise image only
- Landscape images preferred
- Recommendation is at least 1920 pixels in width
- For external links, remember http/https!
Text Component¶
Text component brings you the capability of adding a simple text block to be placed out as any component on the pages. It can the used as a simple FAQ page with multiple text components, one per question, or in between lanes of other content such as carousels or images.
Summary¶
- Possible to create textual pages such as FAQ holding multiple text components.
- Perfect to create text blocks in between carousels or other ocmponents.
- Support for h2, h3, paragraphs, bold, italic, links, lists and numbered lists.
- Simple WYSIWYG editor.
EPG Component¶
This component, in difference to the earlier mentioned EPG carousel, renders a full program guide, for all your channels, so that the end-user can get a quick overview of what's on right now as well as later today. The EPG automatically renders all your channels, including virtual channels set up, which have EPG data applied in the sort order set by you in the Customer Portal.
If you as an end-user want to dive into one single channel and its programming in other spans than just today, you can click into that channel's detail page and get an EPG carousel for that specific channel were you'll be able to browse further back and forth.
All the programs in each channel's schedule is also available through the search.
Summary¶
- Show all your channels that have EPG or a schedule set up.
- Show the channels in (sorting) title order.
- Show what's on now until end of today.
- Each channel's cover image is displayed.
Iframe Component¶
Please note that this component is applicable to web only due to technical limitations.
Embed whatever web page you want inside your white label application. Just set the url and proposeed height in the customer portal interface when creating the component and it will, on the web, be rendered full width (aligned with the width of hero banners and carousels) with the set height.
This can preferably be used for data visualisation that we do not support with our current set of components - for instance to show league tables, statistics etc.
Categories Component¶
The categories component is a grid display auto generated from the categories (ie. all the tags with the tag type "Category") created in the platform. Each category will be shown by image and title and lead in to the browse tag page for the given category.
Relation between Pages and Components¶
As mentioned the components created will let you have a supplied range of content queries to place out on your pages. When you click to add a new component you are now prompted to either create a new one, bringing you into the already descriped component workflows, or select an existing one.
You may also set the availability through publication span to have different components being shown at different times, as well as for instance preparing content promotion for future dates. E.g. Christmas promotion hero banner being published just in time for the Christmas and unpublished, and replaced, the day after.
If no publication is set, the component will be shown from now until manually unpublished in the future.
If you choose to add a carousel, you will get a few more options regarding the visualisation of the assets.
Even though we call the component type carousel component the data as such is rather a list of assets. These can now be shown as either a proper carousel, a grid or a list. Making it possible to create some dynamic in the graphical visualisation of your content. As this is set on the reference of the carousel component, the same component can be shown different on different pages on your site.
All these visualisations of the carousel components can be combined throughout the pages in any variation. E.g. your page can be built having two carousel visalisations, on list of assets that you want to highlight, then a grid of a broader tag for instance.
They can of course be combined with hero and image components as well, in any variation.
Content meta data¶
There are a few things to highlight regarding the visualisation of meta data throughout the site. We've already discussed inheriting asset meta data vs apply your own when describing the process of creating hero components.
For carousels, independent on visualisation, the data is rather only fetched from the assets being queried.
As seen when referring a component onto a page we're able to set the image orientation as well. This bring even more dynamic to the visualisation throughout the site.
The images are, as mentioned, as well fetched from the asset meta data making this dependent on the quality of images there is. To be able to make the asset look good in a portrait carousel there need to be an uploaded portrait image to each asset requested. Same goes, of course, for the more commonly used landscape carousel visualisation, but that is rather the default ratio for images.
Summary¶
- Title, description and images for carousel components are fetched from the assets
- Landscape visualisation requires a landscape image to exist, recommended ratio 16:9
- Portrait visualisation requires a portrait image to exist, recommended ratio 27:40
Menus¶
The menu management is fairly simple when you've come this far, as the management itself is similar to the other relationships set up.
As mentioned initially, the menu is the component that defines the publication of Pages. A page is published when it exists in a menu.
Similar to the publication window set up on a component reference on a page, you can set up timed publication windows for a page as well - making it simple to have themed pages published for a specific set of time. E.g. Love being published for Valentines Day only.
Menu items can link externally as well.
Experimental components¶
Below follows information about components that are experimental and may not be enabled on your account.
Custom query carousel¶
This carousel is similar to a tag carousel, but instead of selecting a set of tags that will be used to filter which assets are shown you can write a custom query. The query is a string in the ElasticSearch String query syntax This is the same syntax which is used in the query field for the asset listing endpoint in ExposureApi. The fields that are available to be queried are:
All fields are of type keyword unless otherwise stated in brackets
assetId
externalAssetId
type
slugs
created (date)
changed (date)
originalTitleLanguage
localized.{locale}
.title
.description (text)
.tinyDescription (text)
.shortDescription (text)
.longDescription (text)
.extendedDescription (text)
productionYear
productionCountries
releaseDate (date)
studio
spokenLanguages
tagIds
runtime (integer)
episode (integer)
season (integer)
seasonId
tvShowId
collections.collectionId
subtitles
audioTracks
defaultAudioTrack
durationMillis (integer)
participants
.personId
.name (text)
.function
.role
Examples¶
- Assets with participant with id: id123
participants.personId:id123 - Assets with tags with id tagId1 or tagId2
tagIds:tagId1 OR tagIds:tagId2 - Assets with produced in the 1990s
productionYear:[1990 TO 1999] - Use brackets to construct more complex queries
(tagIds:tagId1 OR tagIds:tagId2) AND tagIds:tagid3