Skip to main content

Design settings

With Designs the visual customization can be configured within the Streamdiver API. There are two essential types of Designs that can be customized: ChannelDesign and PlayerDesign.

Both ChannelDesign and PlayerDesign can be applied per Channel to customize the video player appearance. As a more specialized application also the transcript export as a DOCX file can be adapted with a DocxExportDesign.

Each type has a Tenant-level main Design, that is by default applied to e.g. new Channels when they created or to each video player instance.

The main Design settings can be modified using the Tenant API for properties updates or resources updates. In the event of style change, e.g. an adjustment of the headerColor, the change will be applied in all Channels that don't have a custom Design assigned.

info

The main design can be recognized by boolean property isMain = true.

Using the Design API new design templates can be created. They are meant to be reused across multiple Channels. To apply customizations to individual Channels it is recommended to create new Designs from templates using Create design settings from template. This effectively creates custom Design settings.

The reuse of custom Designs across multiple Channels is possible, yet not recommended. Keeping them assigned to only one Channel ensures any changes applied will affect only that Channel. If the Design is to be shared it is better to use a template, whose updates should be done with more caution, keeping in mind that it may be used in multiple places.

info

The template design can be recognized by boolean property isTemplate = true.

Resources​

Design properties with file-based nature are called resources. There are designated endpoints to add or remove them from a particular Design. Follow the API Reference endpoint description for valid resource MIME types.

Filtering​

The type property always indicates the Design type and can be used for filtering.

curl --request GET {{baseUrl}}/designs?filter=type=Channel \
     --header 'Content-Type: application/json' \
     --header 'Accept: application/json' \
     --header 'Authorization: Bearer eyJh...20yA'

Assign a design to channel​

As mentioned above, when created, Channels inherit the main Design settings from the Tenant. In order to customize a Channel's style:

  1. Create design template for channel or player
  2. Optionally create custom design from template and further customize it, for the specific Channel
  3. Assign Design to Channel
info

The type of passed Design will automatically be resolved and further used in the Channel accordingly.

Note on the design response model​

Since Design settings have different types, the API reference presents all of them, but in the actual response body only the requested one will not be null. For instance Retrived design settings for type ChannelDesign would look as follows:

{
  "id": "7c9e6679-7425-40de-944b-e07fc1f90ae7",
  "name": "Template 1",
  "type": "Channel",
  "isTemplate": true,
  "channelDesign": {
    "mainColor": "#1f57a6",
    "pageBackgroundColor": "#1f57a6",
    "headerColor": "#1f57a6",
    "footerColor": "#1f57a6",
    "boxColor": "#1f57a6",
    "headerFontColor": "#1f57a6",
    "footerFontColor": "#1f57a6",
    "boxFontColor": "#1f57a6",
    "headerfontUrl": "string",
    "bodyfontUrl": "string",
    "mainImageUrl": "string",
    "logoUrl": "string",
    "faviconUrl": "string",
    "facebookShareImageUrl": "string",
    "twitterShareImageUrl": "string",
    "customCss": ".mdl-typography--display-1-color-contrast {opacity: 1;}"
  }
}