LiveLike

The LiveLike Developer Hub

Welcome to the LiveLike developer hub. You'll find comprehensive guides and documentation to help you start working with LiveLike as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Custom Themes

How to apply custom theming to features

The Theme system allows you to customize the look of the Engagement SDK’s Widgets and Chat UI. This includes common UI properties such as background colors and border colors, corner radii, and text size and fonts. Those customizations are saved in a standard format and can be reused across platforms. Some common use cases for the theme system include:

  • Quickly matching your application’s style with minimal development effort
  • Uniquely theming Widgets for a sponsorship opportunity
  • Improving the accessibility of your application or supporting alternate styles

You can get started with Theming in 3 easy steps!

  1. Product owner + designer uses theme web tool to generate a theme json
  2. Use the platform SDK to deserialize the json into a Theme object
  3. Apply Theme object to platform SDK UI

📘

Minimum Supported SDK Version

iOS: 2.5
Android: 2.1
Web: 1.26.3

Theme System

Each widget is broken down into components that can be themed. Each component has a list of component properties that can be modified that will change the visual appearance of the component.

There are two types of components: container components and text components. Container components have other components inside of them, including text components and other container components. Each type of widget uses a base set of components, and then individual types can have more depending on the widget.

Container Components

Container components have properties like backgrounds, borders, and corner radii. Container components usually have other container components inside them, as well as text components. The exact properties are:

  • Background (Fill or Gradient)
  • Border Color
  • Border Width
  • Corner Radii

Text Components

Text components can have their font faces, sizes, and weights customized, as well as their colors. The exact properties are:

  • Color
  • Size
  • Font Family
  • Font Weight

Widgets

Alert Widgets

  • Main Container
    • Header Container
      • Title Text
    • Body Container
      • Description Text (optional)
    • Footer Container (optional)
      • Link Text

Poll, Quiz, and Prediction Widgets

  • Main Container
    • Header Container
      • Title Text
    • Body Container
      • Option Container (repeated for each option)
        • Progress Bar Container
        • Option Description Text
        • Option Percentage Text

📘

Images in options aren't themed

Polls, quizzes, and predictions have an image variant where each option also has an associated image. That image can't be themed, and always appears on the right. In the text variant, the Option Percentage takes the place of the image on the right.

Other Widgets

🚧

More Widget Support Coming Soon

Cheer Meters, and Rich Text can be customized using custom code, but the common theme format does not support them yet.

iOS - https://docs.livelike.com/docs/ios-custom-theming
Android - https://docs.livelike.com/docs/android-customization
Web - https://docs.livelike.com/docs/web-theming

Animations

Most widgets use animations to provide user feedback. The following animations can be overridden by following the instructions on iOS, Android and Web.

Widget

Animations

Poll

:no-entry-sign:

Image Slider

:no-entry-sign:

Trivia/Quiz

:white-check-mark: Correct / Incorrect

Prediction

:white-check-mark: Stay Tuned / Correct / Incorrect

Cheer Meter

:white-check-mark: Win / Lose

Alerts

:no-entry-sign:

Chat

🚧

Chat Support Coming Soon

The Chat UI is not currently supported by the theme system and can only be customized with code.

iOS - https://docs.livelike.com/docs/ios-custom-theming
Android - https://docs.livelike.com/docs/android-customization
Web - https://docs.livelike.com/docs/web-theming

Applying Theme JSON

  1. Locate and load the Theme JSON in your project.
  2. Use the provided SDK API to generate the objectified Theme object from the Theme JSON.
  3. Apply the Theme object to SDK UI's
class SomeClass {
    // Loaded from server, local storage, text field, etc.
    // Must be compatible with `JSONSerialization.data(withJSONObject:options:)`
    let jsonObject: Any 
    
    let widgetViewController: WidgetPopupViewController
    
    func someMethod() {
        do {
            let theme = try Theme.create(fromJSONObject: jsonObject)
            widgetViewController.setTheme(theme)
        } catch {
            // Fails if json is invalid
            print(error)
        }
    }
    
}
// apply theme by passing json object or theme object
LiveLike.applyTheme(livelikeThemeObject)
//Create theme object
val themeObject = LiveLikeTheme.instanceFrom(themeJsonObject)

// apply theme by passing json object or theme object
widgetView.applyTheme(liveLikeThemeObject)
widgetView.applyTheme(liveLikeThemeJsonObject)

Updated 3 days ago

Custom Themes


How to apply custom theming to features

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.