White Labeling Summary UI

We're working to improve this content! :star:

You can customize the Summary UI by adding your own logo, favicon, and other components to match your brand identity.

Customization is available with Text, Video and Trackers and Analytics UI.

When generating the Summary UI with Experience API, pass the following parameters in the request body.

📘

In the example given below, we have shown the customization of Trackers and Analytics UI, but the same is supported with Text and Video Summary UI as well.

curl --location --request POST "https://api.symbl.ai/v1/conversations/$CONVERSATION_ID/experiences" \
--header 'Content-Type: application/json' \
--header "Authorization: Bearer $AUTH_TOKEN" \
--data-raw '{
  "name": "audio-summary",
  "audioUrl": "https://cors-enabled-audio.mp3",
  "logo": "https://my-logo.png",
  "favicon": "https://my-favicon.png",
  "color": {
    "background": "#FFFF00"
  },
  "speakerAvatarURLs": {
    "9d6d34d9-5019-4694-9c9a-8ba7bfc8cfab": "https://gravatar.com/avatar/4908e2307fdc3350084daaf702d17a60?s=400&d=robohash&r=x", 
    "2f69f1c8-bf0a-48ef-b47f-95ae5a4de325": "https://gravatar.com/avatar/9839b07ba341232442f17282d4d67869?s=400&d=robohash&r=x"
  },
  "font": {
    "family": "Roboto"
    }
}'

Request Parameters

FieldRequiredTypeDescription
logoOptionalStringURL string where the logo image file is hosted. This needs to be publicly accessible.
faviconOptionalStringURL string where the favicon file is hosted. This needs to be publicly accessible.
colorOptionalObjectColor object can customize the background color. Refer below for object schema.
fontOptionalObjectFont can be customized to any valid Google Fonts. Refer below for object schema.
speakerAvatarURLsOptionalObjectSpeaker avatar in the Transcript component can be customized to accept an avatar image. Refer below for object schema.

color object

FieldRequiredTypeDescription
background OptionalStringChanges the background color of the app bar. Accepts color in Hex color code. Default background color is #333333.

font object

FieldRequiredTypeDescription
familyOptionalStringThe name of the font available in Google Fonts. The font type will be applied globally.

speakerAvatarURLs object

FieldRequiredTypeDescription
familyOptionalStringThe speakerAvatarURL object is a collection of key-value pairs, where the unique speakerId is the key and the public URL (to the avatar image) is the value.
Example: 9d6d34d9-5019-4694-9c9a-8ba7bfc8cfab is the key and https://gravatar.com/avatar/4908e2307fdc3350084daaf702d17a60?s=400&d=robohash&r=x is the value. There is a one-to-one mapping between speakerId and the avatar URL.
Note: All of the speakerIds can be fetched via a GET request to the /conversations/:id/members endpoint.

Did this page help you?