Design System
Starting from version 5.0, the SDK uses a design system - a tool for managing the appearance and behavior of UI elements.
The design system consists of 5 layers:
- Colors - color palette
- Typography - fonts and text styles
- Images - icons and images
- Components - reusable UI elements (buttons, input fields, etc.)
- User Flows - screen configurations and their elements
Customization Levels
The SDK offers 3 customization levels:
- Minimal - setting colors, fonts, and/or images (e.g., for corporate colors)
- Component-based - configuring SDK design system components (reusable elements like buttons)
- Precise - detailed flow configuration (chat or search screens), configuring specific screen elements
Levels have nested structure:
let components = ChatComponents(images: ChatImages(), colors: ChatColors(), typography: ChatTypography())
let flows = ChatFlows(components: components)
let theme = ChatTheme(flows: flows)
Lower levels have higher priority, meaning if you set an element color in ChatFlow, it will override the color set in ChatColors component.
Theme Application
To apply a theme, assign it to the SDK instance:
let chatCenterSDK = ChatCenterUISDK(providerUid: "providerUid", chatConfig: chatConfig)
// Apply light theme
chatCenterSDK.theme = myLightTheme
// Apply dark theme (optional)
chatCenterSDK.darkTheme = myDarkTheme
The SDK automatically switches between light and dark themes based on system settings.