aircore logo symbol
aircore logo

Sync Audio SDK for iOS: Customization

After you add the Sync Audio SDK for iOS to your app using the Quickstart, use this guide to further customize the appearance.

Customize the UI text

Use the MediaPanelConfiguration object to change any text on the panel.

let stringsConfig = MediaPanelConfiguration.Strings(
    joinButton: "Join",
    joiningButton: "Joining...",
    joinButtonTooltip: "Tap Join to start the audio session",
    leaveButton: "Leave",
    retryButton: "Retry",
    emptyCallTitle: "No one is on the call yet.",
    emptyCallSubtitle: "Tap Join below to be the first!",
    channelIsFullLabel: "The channel is full",
    genericErrorLabel: "Something went wrong..."
)
        
let config = MediaPanelConfiguration(
    ...
    strings: stringsConfig
    ...
)

You can also customize the collapsed and expanded states separately.

To do this, change the properties in CollapsedStateOptions and ExpandedStateOptions.

let config = MediaPanelConfiguration(
    ...
    collapsedStateOptions: MediaPanelConfiguration.CollapsedStateOptions(
        maxAvatars: 3,
        panelTitle: "Collapsed Title",
        panelSubtitle: "Collapsed Subtitle",
        joinButton: "Collapsed Join"
       ...
    ),
    expandedStateOptions: MediaPanelConfiguration.ExpandedStateOptions(
        panelTitle: "Expanded Title",
        panelSubtitle: "Expanded Subtitle",
        joinButton: "Expanded Join"
        ...
    )
    ...
)

Customize the theme

You can create a Theme object to customize elements on the panel.

You can also reuse this object when you create MediaPanel instances.

let myTheme = Theme(
    backgroundColor: UIColor.yellow,
    primaryColor: .blue,
    dangerColor: UIColor.red,
    borderRadius: 24,
    borderWidth: 2,
    borderColor: .green,
    fontFamily: UIFont(name: "Helvetica", size: 14)!,
    textColor: .red,
    subtextColor: UIColor.green,
    primaryContrastColor: .darkGray,
    dangerContrastColor: UIColor.purple,
    avatar: Theme.Avatar(
        background: .cyan,
        borderShape: Theme.BorderShape.circle(),
        spacing: 10
    )
)

Examples

More info