White label the Summary UI

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

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

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

📘

Note

The following example shows how to customize the Trackers and Analytics UI. You can use the same process for Text and Video Summary UI.

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.