Hubs can also customize the Watch setting (style/color/size) according to their current user website settings based on the embed code of the Watch page. The Watch embed code contains the list of Watch and Channels parameters passed into the embed code.
Watch Setting Parameters
Watch Setting Tab | Watch Configuration | Parameter Name |
Watch look and feel | Hub / Font family | hubFontFamily |
| Hub / Font size | hubFontSize |
| Hub / Color | hubColor |
| Hub / Background | hubBgColor |
| Standard Channel / Title / Font size | scTitleFontSize |
| Standard Channel / Description / Font size | scDescFontSize |
| Standard Channel / Video Title / Font size | scVidTitleFontSize |
| Standard Channel / Video Information / Font size | scVidInfoFontSize |
| Search bar background | searchBarBackground |
Search & share look and feel | Channel title / Font size | sTitleFontSize |
| Channel title / Color | sTitleColor |
| Channel description / Font size | sDescFontSize |
| Channel description / Color | sDescColor |
| Video Title / Font size | sVidTitleFontSize |
| Video Title / Color | sVidTitleColor |
| Video Info / Font Size | sVidInfoFontSize |
| Video Info / Color | sVidInfoColor |
Channel Setting Parameters
Channel Setting Tab | Watch Configuration | Parameter Name |
Channel look and feel | Logo Background | logoBgColor |
| Background | bgColor |
| Font Color / Channel Title | titleColor |
| Font Color / Channel Description | descColor |
| Font Color / Video Title | vidTitleColor |
| Font Color / Video Info | vidInfoColor |
Channel page | Channel title (color) | cpTitleColor |
| Channel title (font size) | cpTitleFontSize |
| Channel description (color) | cpDescColor |
| Channel description (Font size) | cpDescFontSize |
| Video title (color) | cpVidTitleColor |
| Video title (font size) | cpVidTitleFontSize |
| Video information (color) | cpVidInfoColor |
| Video information (font size) | cpVidInfoFontSize |
Using CustomConfig in the JSON Structure
Customize the look and feel using CustomConfig in the JSON structure.
hubBgColor: null, hubFontSize: null, hubColor: null, scTitleFontSize: null, scDescFontSize: null, scVidTitleFontSize: null, scVidInfoFontSize: null, hubFontFamily: null, sTitleFontSize: null, sTitleColor: null, sDescFontSize: null, sDescColor: null, sVidTitleFontSize: null, sVidTitleColor: null, sVidInfoFontSize: null, sVidInfoColor: null, searchBarBackground: null, channels: [ { id: 579, // It is not a configuration item but a channel identifier used for reference logoBgColor: null, bgColor: null, titleColor: null, descColor: null, vidTitleColor: null, vidInfoColor: null, cpTitleColor: null, cpTitleFontSize: null, cpDescColor: null, cpDescFontSize: null, cpVidTitleColor: null, cpVidTitleFontSize: null, cpVidInfoColor: null, cpVidInfoFontSize: null, } ], })Example
The following is an example of how you can override the Watch configuration parameters through the embed code:
Set the Watch background (‘hubBgColor’) to color
Set the Channel title (‘titleColor’) to blue
