We are hiring

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.

Theme

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