Customize UI Appearance

You can customize the appearance of the TapTalkLive view's color scheme. To do this, you can add the methods below to your AppDelegate class.
Note: Don't forget to add #import <TapTalkLive/TTLStyleManager.h>
Default Color Theme
Customize default color theme
To customize the chat UI's color theme, you can define your own color by accessing TTLStyleManager using the following method.
Objective-C
#import <TapTalkLive/TTLStyleManager.h>
​
//You can use this method
[[TTLStyleManager sharedManager] setDefaultColor:COLOR forType:TYPE];
​
//For example
//Set your default primary color
[[TTLStyleManager sharedManager] setDefaultColor:COLOR forType:TTLDefaultColorPrimary];
Parameters
COLOR: (UIColor) Your preferred color
TYPE: (Enum TTLDefaultColor) type of default color
Note: you can override the default color values partially, but it is recommended to change all of them accordingly to make sure the color theme within the chat UI matches
Obtain default color theme
You can get customized chat UI's color theme by accessing TTLStyleManager using the following method.
Objective-C
#import <TapTalkLive/TTLStyleManager.h>
​
//Obtain default primary color
UIColor *color = [[TTLStyleManager sharedManager] getDefaultColorForType:TTLDefaultColorPrimary];
TTLDefaultColorType
Description
TTLDefaultColorPrimary
Your default primary brand color, will be used in various style, icons and shapes in the TapTalk.io SDK.
TTLDefaultColorPrimaryExtraLight
Your default primary brand color with extra light accent, will be used in various style, icons and shapes in the TapTalk.io SDK.
TTLDefaultColorPrimaryLight
Your default primary brand color with light accent, will be used in various style, icons and shapes in the TapTalk.io SDK.
TTLDefaultColorPrimaryDark
Your default primary brand color with dark accent, will be used in various style, icons and shapes in the TapTalk.io SDK.
General Colors
Customize general colors
The following are the values used as general component colors, you can set the colors by calling this method in TTLStyleManager.
Objective-C
#import <TapTalkLive/TTLStyleManager.h>
​
//You can use this method
[[TTLStyleManager sharedManager] setDefaultColor:COLOR forType:TYPE];
​
//For example
//Set your default primary color
[[TTLStyleManager sharedManager] setDefaultColor:COLOR forType:TTLDefaultColorPrimary];
Parameters
COLOR: (UIColor) Your preferred color
TYPE: (Enum TTLDefaultColor) type of default color
Obtain general colors
You can get general color by accessing TTLStyleManager with the following method.
Objective-C
#import <TapTalkLive/TTLStyleManager.h>
​
//Obtain default primary color
UIColor *color = [[TTLStyleManager sharedManager] getDefaultColorForType:TTLDefaultColorPrimary];
TTLDefaultColorType
Description
TTLDefaultColorSuccess
Identifies successful actions.
TTLDefaultColorError
Identifies errors or destructive actions.
TTLDefaultColorTextLight
Light text color on dark background.
TTLDefaultColorTextMedium
Medium text color generally used on subtitles or placeholders.
TTLDefaultColorTextDark
Dark text color on light background.
TTLDefaultColorIconPrimary
Primary colored icons used on light background.
TTLDefaultColorIconWhite
White icons used on colored background.
TTLDefaultColorIconGray
Default color for gray icons.
TTLDefaultColorIconSuccess
Default icon color for successful actions.
TTLDefaultColorIconDestructive
Default icon color for errors or destructive actions.
Font Style
If you are using a custom font on your application, don't forget to add key 'Fonts Provided by application' in your info.plist file. Otherwise, font won't be loaded
Add custom font in info.plist
Customize default font style
To use your application's font resource in the chat UI, set the following values in TTLStyleManager method with the following example:
Objective-C
#import <TapTalkLive/TTLStyleManager.h>
​
//You can use this method
[[TTLStyleManager sharedManager] setDefaultFont:FONT forType:TYPE];
​
//For example
//Set your default regular color
[[TTLStyleManager sharedManager] setDefaultFont:FONT forType:TTLDefaultFontRegular];
Obtain default font style
To use your application's font resource in the chat UI, you can obtain UIFont by using this method.
Objective-C
#import <TapTalkLive/TTLStyleManager.h>
​
//Obtain regular font
UIFont *obtainedFont = [[TTLStyleManager sharedManager] getDefaultFontForType:TTLDefaultFontRegular];
TTLDefaultFontType
Description
TTLDefaultFontRegular
Your defined default font family with regular style
TTLDefaultFontMedium
Your defined default font family with medium style
TTLDefaultFontBold
Your defined default font family with bold style
TTLDefaultFontItalic
Your defined default font family with italic style

Authentication

OneTalk Live Chat for Web

Last modified 1yr ago

TTLDefaultColorType	Description
TTLDefaultColorPrimary	Your default primary brand color, will be used in various style, icons and shapes in the TapTalk.io SDK.
TTLDefaultColorPrimaryExtraLight	Your default primary brand color with extra light accent, will be used in various style, icons and shapes in the TapTalk.io SDK.
TTLDefaultColorPrimaryLight	Your default primary brand color with light accent, will be used in various style, icons and shapes in the TapTalk.io SDK.
TTLDefaultColorPrimaryDark	Your default primary brand color with dark accent, will be used in various style, icons and shapes in the TapTalk.io SDK.

TTLDefaultColorType	Description
TTLDefaultColorSuccess	Identifies successful actions.
TTLDefaultColorError	Identifies errors or destructive actions.
TTLDefaultColorTextLight	Light text color on dark background.
TTLDefaultColorTextMedium	Medium text color generally used on subtitles or placeholders.
TTLDefaultColorTextDark	Dark text color on light background.
TTLDefaultColorIconPrimary	Primary colored icons used on light background.
TTLDefaultColorIconWhite	White icons used on colored background.
TTLDefaultColorIconGray	Default color for gray icons.
TTLDefaultColorIconSuccess	Default icon color for successful actions.
TTLDefaultColorIconDestructive	Default icon color for errors or destructive actions.

TTLDefaultFontType	Description
TTLDefaultFontRegular	Your defined default font family with regular style
TTLDefaultFontMedium	Your defined default font family with medium style
TTLDefaultFontBold	Your defined default font family with bold style
TTLDefaultFontItalic	Your defined default font family with italic style