Chat box design

Adjust texts, colors and logo on single or multiple domains.

⛔  Legacy API

You are browsing legacy API. Current version you can find here.

Bubble types

In Dashboard Settings > Chat box > Text (opens new window) you can set Bubble type.

This feature only works when chat status is ONLINE. Does not work when chat is Offline.

We provide 3 types:

1. Bubble
2. Arrow
3. Image (My Picture)

Bubble

Dashboard settings is Bubble type: Bubble. You can set your own text.

<script>
  smartsupp('translate', {
    banner: {
      bubble: {
        text: 'Can we help?'
      }
    }
  }, 'en');
</script>

Arrow

Dashboard settings is Bubble type: Arrow. You can set your own text.

<script>
  smartsupp('translate', {
    banner: {
      arrow: {
        title: 'Any questions?',
        desc: 'We are here to help.'
      }
    }
  }, 'en');
</script>

Image

Dashboard settings is Bubble type: Image (My picture). You can define set own picture.

How chat box panel width works:

• default chat panel width is 220px
• open panel width is 300px
• banner image width affects the entire panel width

Let's say in our example we use banner width of 240px as it fits better to our design. It is also good to mention that there is no limit on banner height at this moment.

Our example end result will look like this.

<script>
smartsupp('banner:set', 'image', {
  src: 'IMAGE_URL'
})
</script>

Chat banner, texts and colors

Imagine you have 2 websites but 1 Smartsupp account. You want to adjust chat box design for both of them.

Website 1

We change banner, texts and colors in Online state and only one text, title of the window, in Offline state.

<script>
  // banner (logo)
  smartsupp('banner:set', 'image', {
    src: 'IMAGE_URL',
  });

  // texts
  smartsupp('chat:translate', {
    online: {
      title: 'The best support',
      infoTitle: 'The best company',
    },
    offline: {
      title: 'We are offline now ...',
    },
  });

  // colors
  smartsupp('theme:colors', {
    widget: '#c0392b',
    primary: '#c0392b',
  });
</script>

Website 2

No custom banner, same texts but different colors.

<script>
  // texts
  smartsupp('chat:translate', {
    online: {
      title: 'The best support',
      infoTitle: 'The best company'
    },
    offline: {
      title: 'We are offline now ...'
    }
  });

  // colors
  smartsupp('theme:colors', {
    widget: '#9b59b6',
    primary: '#9b59b6'
  });
</script>

Chat box colors based on status

Chat box colors can change based on chat status if set to Online or Offline.

<script>
  smartsupp('on', 'status', function (status) {
    if (status == 'online' || status == 'away') {
      smartsupp('theme:colors', {
        widget: '#2ecc71',
        primary: '#2ecc71'
      });
    } else {
      smartsupp('theme:colors', {
        widget: '#c0392b',
        primary: '#c0392b'
      });
    }
  });
</script>