Overview

Themes let you customize the look & feel of your in-app conversations.

Before coding the appearance, a designer will often be involved to design it. To help doing with this step, here’s a Sketch document that can be customized easily.

Sketch Document Preview

EPAppearance

To create a theme, you’ll have to handle an EPAppearance object.

Here is the structure. We’ll explore the different levels of customization in the documentation below.

Global Architecture

On the EPAppearance, you can for instance customize:

You can also customize the look and feel of the Bubbles, and the Input (the custom keyboard displayed so that the user can answer the chatbot’s question).

Bubbles

On Bubbles, you can customize:

Bubble Appearance

On a Bubble Appearance object, you can define for instance:

Important: all images for the bubbles must be stretchable, and sliced in Xcode (see screenshot below).

Global Architecture

Input

On the EPAppearance, you can also customize the Input (where the user sends inputs).

Helpers

To quickly define a EPAppearance, you can call the constructor with the following arguments.

let mainColor = UIColor(hexString: "#0275D8")
let secondaryColor = UIColor(hexString: "#0379D8")
let appearance: EPAppearance = EPAppearance(resourcePrefix: "mytheme", mainColor: mainColor, secondaryColor: secondaryColor)

Global Architecture

Code sample

Here is an example, including the helper when instantiating EPAppearance:

class func myCustomTheme() -> EPAppearance {   
    let mainColor = UIColor(hexString: "#0275D8")
    let secondaryColor = UIColor(hexString: "#0379D8")
    let appearance: EPAppearance = EPAppearance(resourcePrefix: "mytheme", mainColor: mainColor, secondaryColor: secondaryColor)
    appearance.bubbleAppearance.incoming.textColor = .black
    appearance.bubbleAppearance.incomingFollowed.textColor = .black
    appearance.customFontName = "ComicBook"
    appearance.customStrongFontName = "ComicBook-BoldItalic"
    appearance.customSectionDateColor = #colorLiteral(red: 0.9931825995, green: 0.856918633, blue: 0.007652404252, alpha: 1).alpha(0.8)
    appearance.customBackgroundColor = UIColor.clear
    appearance.endBotButtonColor = #colorLiteral(red: 0.9931825995, green: 0.856918633, blue: 0.007652404252, alpha: 1)
    appearance.endBotButtonTextColor = .black
    appearance.bubbleAppearance.typingAnimation = typingAnimation(color: mainColor)
    return appearance
    }