Custom minimised chat buttons

Customised chat buttons based on screen size queue state and more

The Talkative chat button is the button that appears when the chat widget is minimised, example below:

By Default, the Chat Button will not show if no Standby Cards are visible.

Customizing the Chat Button

As an Account Holder, navigate to the Widget Editor, and click into a Widget Config. Click Chat Button on the menu:

Here you are able to adjust colour, size, imagery, position, and more. The preview on the right will give you an updated view of your changes as you make them.

Advanced Mode lets you upload custom images and set size/spacing of multiple elements within the Chat Button.

Creating Multiple Chat Buttons

By default, there is just a single Chat Button for each Widget Config that shows regardless of screen size, queue state or other factors.

You are able to create different chat buttons that will change depending on different rules.

These are created by clicking "Add Override Button".

You will be prompted to choose a screen size, but you can select any and override this within the settings.

In this guide we will show how to make a few different examples.

Example 1 - Have a smaller button for mobile devices.

Add a new override for Mobile, and adjust the size/style accordingly:

Note: the preview window on the right may need to be made wider to differentiate between mobile and standard (desktop) Buttons, since the width of the preview window is used to determine which button is used. In this example, you can see the desktop Button (which includes Live Chat text) shows when the preview window is made wider:

Example 2 - Have a button that says offline if the queues are offline

Again, create an Override Button. Relabel to "Offline Button".

Under visibility, change Screen Size to be Queue Status:

In this example, we have changed the text to say Offline:

Finally, to confirm the changes are as intended, we click the Queue Selector in the Widget Preview to simulate the queue being offline. When we press Update we can see the updated widget:

Example 3 - Have the Chat Button on the Left

Go to Theme and select Left from the dropdown:

Example 4 [Advanced] - Hide the chat button completely at all times

If you are using Programmatic Actions to start an interaction (i.e. create your own chat button trigger from an element on your website), then you can adjust the settings of how the Chat Button behaves under the Advanced Settings:

Example 5 [Advanced] - Start an interaction directly from the chat button

Please see: How to Auto Start an Interaction when Chat Button is Pressed