Theme

Create your own design and set colors.

You can set your own dimensions to chat box in different states and adjust colors to fit your branding.

Navigation

theme:options

You can adjust width and height of chat box.

Learn more about Chat box type before you continue.

Widget: Closed state

This is what closed chat box looks like.

<script>
  smartsupp('theme:options', {
    widgetWidth: 350,
    widgetHeight: 50
  });
</script>

chat box type widget closed

Widget: Open state

This is what open chat box looks like. It is called panel.

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

chat box type widget open

Button: Closed state

This is what closed chat button looks like.

<script>
  smartsupp('theme:options', {
    buttonWidth: 150,
    buttonHeight: 50
  });
</script>

chat box type button closed

Button: Open state

This is what open chat button looks like. It has same layout as Widget: Open state.

chat box type widget open

Offline form

This theme options offlineHeight is design just for offline form to be able to fit custom fields defined by user.

offlineHeight

By default offline form is not high enough to fit extra fields unless you want to see scrollbar.

<script>
  smartsupp('theme:options', {
    offlineHeight: 475
  });
</script>

Example is explained in Customization section Offline form with textinput.

Colors and variables names

Colors are generated automatically to match Smartsupp default theme. Change them when you need to customize chat box to match your company brand colors for example.

Color syntax: Format must be full hex pairs #ff0000 and not #f00 shorthand.

variable name description
primary Main color (buttons, frame, chat box, header).
primaryText Text color (buttons, frame, chat box, header).
widget Chat box color. Unless set otherwise, it's generated according to primary.
widgetText Chat box text. Unless set otherwise, it's generated according to primaryText.
banner Main chat bubble color.
bannerBorder Chat bubble frame color.
bannerTitle Color of 1st line text (arrow).
bannerDesc Color of 2nd line text (arrow).
bannerText Text color (chat bubble).

theme:color

You can set a specific color to your chat box.

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

theme:colors

You can also set colors to multiple elements of the chat box.

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