Theme

With theme API you can set chat box colors and design

Methods

NameDescription
theme:setChange theme. Supported themes: 'flat', 'default'
theme:colorSet one specific chat box color
theme:colorsSet chat box colors
theme:optionsSet theme options
theme:optionSet one specific theme option
theme:stylesSet CSS styles

theme:set

Change theme. Supported themes: 'flat', 'default'

<script> smartsupp('theme:set', 'flat'); //smartsupp('theme:set', 'default'); </script>

theme:color

Set one specific chat box color. List of all supported theme colors you can find here.

Example: Run script

<script> smartsupp('theme:color', '#ff0000'); </script>

theme:colors

Set chat box colors. List of all supported theme colors you can find here.

Example: Run script

<script> smartsupp('theme:colors', { primary:'#ff0000', banner:'#333333' }); </script>

theme:option

Set one specific theme option. List of all supported theme options you can find here.

Example: Run script

<script> smartsupp('theme:option', 'widgetRadius', 15); </script>

theme:options

Set theme options. List of all supported theme options you can find here.

Example: Customize widget radius Run script

<script> smartsupp('theme:options', { widgetRadius:15 }); </script>

Example: Customize chat window size

<script> smartsupp('theme:options', { panelWidth: 300, panelHeight: 450 }); </script>

theme:styles

Set CSS styles

Example: customize chat layout and colors. Run script

<script> smartsupp('theme:styles', 'custom', { '.panel-footer': { 'background-color': '#fff' }, '.panel-info .info-box h4': { 'color': '#777' } }); </script>

Example: customize chat fonts. Run script

<script> var fontStyles = "@import url(http://fonts.googleapis.com/css?family=Poiret+One); " + "body { font-family: 'Poiret One', cursive; } " + "input, textarea, keygen, select, button { font-family: 'Poiret One', cursive; } " + ".panel-info .info-box { font-family: 'Poiret One', cursive; } "; smartsupp('theme:styles', 'fonts', fontStyles); </script>

Colors

Most colors are generated automatically to match the used theme, so we recommend to change them only of you have a strong reason to do so. Main colors are: primary and banner (chat bubble).

Color nameDescription
primaryMain color (buttons, frame, chat box, header)
primaryTextText color (buttons, frame, chat box, header)
widgetChat box color. Unless set otherwise, it's generated according tocolor 'primary'
widgetTextChat box text. Unless set otherwise, it's generated according to color 'primaryText'
bannerMain chat bubble color
bannerBorderChat bubble frame color
bannerTitleColor of 1st line text (arrow)
bannerDescColor of 2nd line text (arrow)
bannerTextText color (chat bubble)

Options

Options are used to generate theme css styles. You can change this options by api and customize your chat design.

Colors syntax

All colors must be in RGB format, e.g.#ff0000 for red color.
Shortened version e.g. red or #f00 is not supported.

Integers syntax

Width, height, border-radius, paddings and margins enter as a number (integer) without dimensions.

Main options

OptionDefaultDescription
radius4Default border radius for panels, buttons, inputs
primaryColor primaryDefault color for primary buttons, headers, icons
primaryTextBy option primaryDefault text color for primary buttons, headers, icons
primaryTextColorBy option primaryDefault color for primary texts (agent info etc.)

Widget Bar

OptionDefaultDescription
widgetWidth'auto'Widget width
widgetHeight35Widget height
widgetBgBy color widgetWidget background color
widgetColorBy color widgetTextWidget text color
widgetShadowBy option widgetBgWidget text shadow
widgetBorderColorBy option widgetBgWidget border color
widgetRadiusBy option radiusWidget border radius
widgetSizeBy option widgetHeightWidget font size
widgetIconColorBy option widgetColorWidget icon color (by default by widgetColor)

Widget Button

OptionDefaultDescription
buttonHeight35Button height
buttonBgBy option widgetBgWidget background color
buttonColorBy option widgetBgColor is inverse to widgetBg color
buttonBorderColorBy option buttonBgDarker then buttonBg
buttonIconBgBy option buttonBgLittle darker then buttonBg
buttonIconColorOption buttonColorIcon color in button widget
buttonIconBorderColorBy option buttonBgLittle darker then buttonIconBg
buttonSizeBy option buttonHeightFont size of text and icon
buttonPaddingBy option buttonHeightBase padding of widget
buttonRadiusBy option radiusButton widget radius

Panels (online, offline, login)

OptionDefaultDescription
panelWidth260Default width for all panels. Flat theme has width 300
panelHeight400Default height for all panels
offlineWidthOption panelWidthOffline panel width
offlineHeightOption panelHeightOffline panel height
loginWidthOption panelWidthLogin panel width
loginHeightOption panelHeightLogin panel height
panelBg'#ffffff'Panel background color
panelColor'#666666'Panel base color
panelBorderColor'#bbbbbb'Panel border color
panelBorderLightrgba(0,0,0, 0.2)Used as border of buttons and inputs
panelBorderLighterrgba(0,0,0, 0.1)Used in panel as inside borders
panelHeaderBgOption primaryBackground of header. By default by primary color
panelHeaderColorOption primaryTextColor of header title and tools
panelHeaderBorderColorBy option panelHeaderBgHeader top border
panelHeaderRadiusBy option radiusHeader top border radius
panelHeaderHeight27Panel header height
panelHeaderSizeBy opt. panelHeaderHeightFont size of title and tools in header
panelHeaderMargin0Integer value, can be used to move title horizontally, e.g.: -30
panelInfoHeight50Agent info height
panelInfoVisibletrueShow/hide agent info (with agent photo)
panelInfoBg'transparent'Agent info background
panelFooterBg'transparent'Footer background color
panelFooterPadding5Footer padding from all sides and inside

Tools

OptionDefaultDescription
toolBg'transparent'Background of tool button
toolColorBy option toolBgIcon color of tool button
toolRadiusBy option radiusBorder radius of tool button
toolHeightBy opt. panelHeaderHeightHeight of tool button (calculated by header height)

Buttons

OptionDefaultDescription
btnPrimaryBgBy option primaryPrimary button background color. By this color are calculated borders.
btnPrimaryColorBy option primaryTextPrimary button text color
btnRadiusBy option radiusButton radius

Inputs, Textarea

OptionDefaultDescription
inputRadiusBy option radiusInput text radius
inputBorderColorBy option panelBorderLightInput border color
inputBorderFocusColorBy option primaryFocus input color

Message bubbles in the conversation

OptionDefaultDescription
messageAgentBgBy primary colorAgent message bubble background
messageAgentColorBy primary colorAgent message bubble text color
messageAgentBorderBy primary colorAgent message bubble border color
messageVisitorBg'#ffffff'Visitor message bubble border color
messageVisitorColor'#555555'Visitor message bubble text color
messageVisitorBorder'#ececec'Visitor message bubble background

Agent rating

OptionDefaultDescription
ratingSmile1Color'#d1330e'Very bad smile icon
ratingSmile2Color'#f05823'Bad smile icon (only if ratingMode is advanced)
ratingSmile3Color'#f0aa23'Neutral smile icon
ratingSmile4Color'#b3bc26'Good smile icon (only if ratingMode is advanced)
ratingSmile5Color'#259702'Very good smile icon