How it works?

Chat design (CSS) consists of 3 parts. Static CSS defines component layout, offsets and font size. Dynamic CSS is generated according to theme (use of dynamic CSS is shown #in this example#). With User CSS you can subsequently modify all generated CSS rules. With this you can completely modify the chat box design.

Théma

<script> // setup your theme (supported: flat, default) smartsupp('theme:set', 'flat'); // setup your colors smartsupp('theme:colors', { primary: '#4ba82e', primaryText: '#ffffff', widget: '#ffffff', widgetText: '#666666', banner: '#333333' }); </script>

Width, Height

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

Button widget

<script> smartsupp('theme:options', { buttonIconBg: '#ffffff', buttonIconColor: '#4ba82e', buttonHeight: 50, buttonBg: '#ffffff', buttonBorderColor: '#cccccc' }); </script>

Default widget

<script> smartsupp('theme:options', { widgetRadius: 0, widgetHeight: 50, widgetShadow: false, widgetIconColor: '#4ba82e' }); </script>

Panels (online, offline, login)

<script> smartsupp('theme:options', { panelHeaderHeight: 50, panelHeaderBg: '#333333', panelHeaderColor: '#ffffff', panelHeaderRadius: 0, panelHeaderSize: 16, panelFooterPadding: 10, panelInfoVisible: false, // hide agent info toolBg: '#ececec', toolColor: '#767676' }); </script>

Advanced styles by CSS

You can use CSS advanced styles if you need to modify some other styles. HTML code and used CSS styles can be analyzed with debugging tools (inspect element).

<script> smartsupp('theme:styles', 'custom', { '.form-group label': { 'font-size': '15px;' } }); </script>

Finally all in one...

<script> // setup your theme (supported: flat, default) smartsupp('theme:set', 'flat'); // setup your colors smartsupp('theme:colors', { primary: '#4ba82e', primaryText: '#ffffff', widget: '#ffffff', widgetText: '#666666', banner: '#333333' }); // configure theme smartsupp('theme:options', { // button widget buttonIconBg: '#ffffff', buttonIconColor: '#4ba82e', buttonHeight: 50, buttonBg: '#ffffff', buttonBorderColor: '#cccccc', // default widget widgetRadius: 0, widgetHeight: 50, widgetShadow: false, widgetIconColor: '#4ba82e', // panel panelWidth: 350, panelHeight: 450, panelHeaderHeight: 50, panelHeaderBg: '#333333', panelHeaderColor: '#ffffff', panelHeaderRadius: 0, panelHeaderSize: 16, panelFooterPadding: 10, panelInfoVisible: false, // hide agent info toolBg: '#ececec', toolColor: '#767676' }); // customize styles smartsupp('theme:styles', 'custom', { '.form-group label': { 'font-size': '15px;' } }); </script>