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
| Field | Required | Type | Description |
|---|---|---|---|
logo | Optional | String | URL string where the logo image file is hosted. This needs to be publicly accessible. |
favicon | Optional | String | URL string where the favicon file is hosted. This needs to be publicly accessible. |
color | Optional | Object | Color object can customize the background color. Refer below for object schema. |
font | Optional | Object | Font can be customized to any valid Google Fonts. Refer below for object schema. |
speakerAvatarURLs | Optional | Object | Speaker avatar in the Transcript component can be customized to accept an avatar image. Refer below for object schema. |
color object
color object| Field | Required | Type | Description |
|---|---|---|---|
background | Optional | String | Changes the background color of the app bar. Accepts color in Hex color code. Default background color is #333333. |
font object
font object| Field | Required | Type | Description |
|---|---|---|---|
family | Optional | String | The name of the font available in Google Fonts. The font type will be applied globally. |
speakerAvatarURLs object
speakerAvatarURLs object| Field | Required | Type | Description |
|---|---|---|---|
family | Optional | String | The 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. |
Updated over 1 year ago