Advanced branding

Advanced branding allows you to configure elements on your meeting's UI per-room.

Configuring the advanced branding consist in setting up an endpoint on your backend which will serve the branding data payload.

  • You need to authenticate your endpoint with an Authorization header.
  • Your endpoint should process the room/conference name which you will receive as a query parameter in the request: GET [your_endpoint]?conference=[AppID]/[room_name] and it should return the branding data payload for that specific conference as json, or a default (could be empty) payload in case you don't want any branding or you want a default generic branding applied to it.

This will result in the room from the conference query parameter having applied the branding configuration corresponding to the settings you have on your response payload.

Note:

In case you setup an advanced branding URL, your global Branding configurator settings will be ignored, even when your advanced branding endpoint fails to respond or errors out.

Branding data payload

All the branding data fields are optional:

  • backgroundColor (string): The background color
  • backgroundImageUrl (string): The URL for the background image
  • didPageUrl (string): The URL for a custom DID's page hosted by you
  • inviteDomain (string): The base URL of the meeting invite link. For more details on custom invite links please check the configuring the invite link section
  • logoClickUrl (string): The URL which should open on clicking the logo image. Usually your Company's URL
  • logoImageUrl (string): The URL of the logo image for the meeting
  • avatarBackgrounds (Array[string]): Backgrounds list overwriting the default avatar backgrounds pool
  • premeetingBackground (string): Custom background for prejoin/lobby screens. It maps to the background css property of the premeeting screens container.
  • virtualBackgrounds (Array[string]): A list of images that can be used as video backgrounds. When this field is present, the default images will be replaced with those provided. (NOTE: Fetching the images must not be protected by CORS.)

Example payload:

{
   "backgroundColor":"#FFF",
   "backgroundImageUrl":"https://mycompany.com/images/background.png",
   "didPageUrl":"https://mycompany.com/dids",
   "inviteDomain":"https://mycompany.com/invite",
   "logoClickUrl":"https://mycompany.com",
   "logoImageUrl":"https://mycompany.com/images/logo.png",
   "avatarBackgrounds": ["#12A378", "linear-gradient(125.83deg, #000 0%, #FFF 99.09%)"],
   "premeetingBackground": "url(https://mycompany.com/images/premeetingBackground.png)",
   "virtualBackgrounds": ["https://my.img01.jpg", "https://my.img02.jpg"]
}

Did this page help you?