Customize UI

This section describes how to reuse Proto User Interface with full functionality without the need to implement Proto iOS API.

Start the ChatList screen in the View Controller that you want to start the Proto Chatbot:

let storyboard = UIStoryboard (
    name: "Main", bundle: Bundle(for: HomeViewController.self)
)
let chatListVC = storyboard.instantiateInitialViewController() as! UIViewController
self.present(chatListVC, animated: true, completion: nil)

Change Color

Copy the ProtoStyle attributes below to your 'AppDelegate' file and change the color codes to match your design

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        
        // init Proto by setting gateway/channel id
        Proto.initialize(gatewayId: "")
        
        // Uncomment section below to custom style
//        ProtoStyle.userAvatarBG = "#666666"
//        ProtoStyle.chatPrimary = "#000000"
//        ProtoStyle.chatPrimaryFocus = "#000000"
//        ProtoStyle.chatPrimaryPressed = "#000000"
//        ProtoStyle.chatPrimaryDisabled = "#66000000"
//        ProtoStyle.chatBackground = "#FFFFFF"
//        ProtoStyle.chatBackgroundInput = "#FFFFFF"
//        ProtoStyle.chatSecondary = "#FFFFFF"
//        ProtoStyle.chatSecondaryFocus = "#F1F1F1"
//        ProtoStyle.chatSecondaryPressed = "#E9E9E9"
//        ProtoStyle.chatSecondaryDisabled = "#66FFFFFF"
//        ProtoStyle.botBGBubbleStroke = "#f5f5f8"
//        ProtoStyle.botBGBubble = "#f5f5f8"
//        ProtoStyle.botText = "#4a4a4a"
//        ProtoStyle.userBGBubbleStroke = "#000000"
//        ProtoStyle.userBGBubble = "#000000"
//        ProtoStyle.userText = "#ffffff"
//        ProtoStyle.checkbox = "#161616"
//        ProtoStyle.chatboxHintText = "#d4d4d4"
//        ProtoStyle.chatboxDivider = "#ececec"
//        ProtoStyle.dateTimeText = "#d4d4d4"
//        ProtoStyle.sendButton = "#d4d4d4"
//        ProtoStyle.statusBarColor = "#00FFFFFF"
//        ProtoStyle.cardSelectedBg = "#000000"
//        ProtoStyle.newChatButton = "#f9c927"
//        ProtoStyle.botNameColor = "#9c9c9c"
        
    return true
}