chat-box-theme.md

title	subtitle	description	redirect_from
Chat Box Theme And Size	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.	/docs/javascript-api/theme/

Single color

You can set a specific color to your chat box.

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

⛔ Legacy API ⛔

👇👇👇 We no longer support any code below this section❗ {: .alert .alert-danger }

Theme options

You can adjust width and height of chat box.

Learn more about Chat box type before you continue. {: .callout .callout-info }

Widget: Closed state

This is what closed chat box looks like.

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

Widget: Open state

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

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

Button: Closed state

This is what closed chat button looks like.

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

Button: Open state

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

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. {: .callout .callout-info }

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. {: .callout .callout-warning }

{% include component/tables/docs/javascript-api/theme/colors-variables-names.html %}

Multiple colors

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

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