Hotline iOS Theming and customization guide

Modified on: Wed, 18 Jan, 2017 at 3:17 PM

Hotline can be themed to make the support UI match your app’s look and feel.

The SDK contains a "HLTheme.plist" file which controls the look and feel of the SDK. You can copy this file into your app's project and edit it to achieve desired results to make the support UI right at home in your app. If you choose to rename this file, you can instruct the SDK to use your theme file by including the following in your init code.

config.themeName = @"<CUSTOM THEME>";

Guidelines for entering theme values

Font Name : Font names have to be specified using their family and style. For instance, HelveticaNeue-Light refers to the HelveticaNeue font in “Light” style. Have a look at iosfonts.com to see the font families that are supported by iOS. If you want to use custom font, you can directly import the ttf file to the project and refer that name in the theme plist.

Color : Colors have to be specified in the hexadecimal format. For instance FFFFFF is white.

Image : Hotline follows the iOS image naming conventions. Required images must be included in your project and they can be referred to by their filename. For instance, “Image1.png” will be used on non-retina displays while “Image1@2x.png” will be used on retina displays.

Once you have imported the image to the project, you need to refer it in the HLTheme.plist file in the images section.

System font

If you prefer to use the System font for the SDK, you can set the font name to “SYS_DEFAULT_FONT_NAME” in the theme config (HLTheme.plist or your custom theme file ). SDK will use the system font depending on the iOS version.

iOS 8 and below : Helvetica Neue

iOS 9 and above : San Francisco

Note: SDK uses SYS_DEFAULT_FONT_NAME by default.

Preferred font size

If you specify the string “DEFAULT_FONT_SIZE” as the value for font sizes , SDK will pick the user preferred font size from settings ( Dynamic Type).

Chat Bubble customization

The chat bubbles in the conversation view are also color-customizable. You can replace the chat bubble images as long as they match the dimensions of the images included in the SDK. In case the dimensions don't match, you can control the insets for the chat bubble in the theme file.

Note: If the theme changes are not reflecting in the app, clear derived data followed by a clean build.

Theme Guide

The following images are a guide to the keys used in the theme file.

Note : Article List uses values from Table View for the common elements.