We are hiring

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>