Theme

Theme API služi nastaveniu farieb a grafickych vlastností chatu.

Methods

NázevPopis
theme:setNastavuje tému: Podporované hodnoty: 'flat', 'default'
theme:colorNastavuje farbu chatu
theme:colorsNastavuje farby chatu
theme:optionsNastavuje možnosti témy
theme:optionNastavuje jednu možnosť témy
theme:stylesNastavuje css štýly

theme:set

Nastavuje tému: Podporované hodnoty: 'flat', 'default'

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

theme:color

Nastavuje farbu chatu. List of all supported theme colors you can find here.

Example: Spustit script

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

theme:colors

Nastavuje farby chatu. List of all supported theme colors you can find here.

Example: Spustit script

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

theme:option

Nastavuje jednu možnosť témy. List of all supported theme options you can find here.

Example: Spustit script

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

theme:options

Nastavuje možnosti témy. List of all supported theme options you can find here.

Example: Customize widget radius Spustit script

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

Example: Customize chat window size

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

theme:styles

Nastavuje css štýly

Example: customize chat layout and colors. Spustit script

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

Example: customize chat fonts. Spustit 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>

Farby

Skoro všetky farby sa generujú automaticky, preto ich zmenu doporučujeme len ak vám automaticky generovaná farba nepáči. Hlavné farby sú: primary a banner.

Color nameDescription
primaryHlavná farba (tlačítka, orámovanie, widget, hlavička)
primaryTextFarba textu (tlačítka, orámovanie, widget, hlavička)
widgetFarba widgetu, ak nie je nastavene, generuje sa podla farby 'primary'
widgetTextText widgetu, ak nie je nastavene, generuje sa podla farby 'primaryText'
bannerHlavná farba baneru
bannerBorderFarba oramovania baneru
bannerTitleFarba hlavního textu (šípkový banner)
bannerDescFarba popisku (šípkový banner)
bannerTextFarba textu (bublinový banner)

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