Jak to funguje?

Design chatu (CSS) obsahuje 3 části. Statické CSS definuje komponenty zobrazení, offsety a velikost fontu. Dynamické CSS se generuje podle šablony (použití takového CSS je vidět v tomto příkladu). Poslední je Uživatelské CSS, které může upravovat všechny generované CSS styly. Díky tomu můžete kompletně změnit design chatu.

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>

Šířka, Výška

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

Chat jako tlačítko

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

Základní chat

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

Panely (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>

Pokročilé stylovaní pomocí CSS

Můžete použít pokročilé CSS stylování, pokud potřebujete upravit některé ostatní styly. HTML a CSS lze prohlížet pomocí debugovacích nástrojů v prohlížeči.

<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>