Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
172 lines (131 sloc) 4.1 KB
title subtitle description
Chat box design
Adjust texts, colors and logo on single or multiple domains.
Create different chat box designs and use this API for different departments or sections on your website.

To better understand examples below read Theme and Multilanguage chat box before you continue. {: .callout .callout-info }

Bubble types

In Dashboard Settings > Chat box > Text{:target='_blank'} you can set Bubble type.

This feature only works and is visible when chat status is ONLINE. Does not work on Offline. {: .callout .callout-warning }

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.

chat type bubble

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

Arrow

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

chat type arrow

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

example banner

Defaul chat panel width is 220px. Open panel width is 300px. Banner image width affects the entire panel width. {: .callout .callout-info }

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.

240×80px placeholder image

Our example end result will look like this.

chat type my picture

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

design 01 online design 01 offline

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>

design 02 different colors

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>

colors status online offline