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

 

The SDK contains a "FCTheme.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.

  • Font Size - Font sizes can be specified as float values. For instance, 14.0f.

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

  • Image - Chat 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.

  • iOS 8 and below - Helvetica Neue

  • iOS 9 - San Francisco

  • iOS 10 and above - Helvetica Neue


Note: SDK uses SYS_DEFAULT_FONT_NAME by default and it is customizable from component level to global under Miscellaneous.

 

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.


FAQ Article Detail Customisation

You can make changes to the look and feel of FAQ articles in Chat. To do so,

  1. Go to FCResources.bundle

  2. Copy the normalize.css file and place it in your app's project folder.

  3. Rename the normalize.css file in your project folder to avoid duplication of file names.

  4. Next, go to FCTheme.plist file and under Miscellaneous category, add the key "ArticleDetailCSSFileName". 

  5. Define the key value as your new .css file name.

Now you can make changes to the .css file in your project folder, based on your requirements.

 

Note: The ensures when iOS SDK version is updated, the css customisations are auto-applied.

 

Theme Guide

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