How to change the online consultant label

Using the Suo.Chat online consultant service, you can not only fully customize the appearance of your online consultant, but and use your picture or text as as the button to call the online chat.

Let’s look at some usage examples.

Using your picture (shortcut) to open an online chat

(clicking on any picture opens an online chat)

Using custom text to open an online chat

Open chat

(clicking on text opens online chat)

Now let’s see how to add a link to text or an image on your site.

 

Method used to open a module:

supportAPI.openSupport();

 

In order to open an online chat window using a link, use the following code:

 <a href="#" onClick="supportAPI.openSupport(); return false;">Your text or image</a>
         

 

In order to open the “Leave feedback” tab in the chat window, use the code:

 <a href="#" onClick="supportAPI.openReviewsTab(); return false;">Leave a Review</a>
       

 

In order to open any tab in the chat window, use the code:

 <a href="#" onClick="supportAPI.openTab(index); return false;">Your text or image</a>,
       

where index is the tab number in order (numbering starts 0).

 

In order to hide the standard label, you need to add css styles to your site

 <style>#supportTrigger, #supportTriggerMobile{ display:none !important; }</style>
       

 

If you want to replace the default label with your own

Standard online consultant label is set in CSS as

div.supportTrigger{ background-image:url('.....')...}

Accordingly, if you want to leave the label in the same place, but change the image itself, then you can write in the CSS of your site:

div.supportTrigger{ background-image:url('.....') !important; background-size: 100px 100px 
!important; width:100px !important; height:100px !important; },

where url(‘…..’) is the path to the image, width is the width of your image, and height is its height.

 

To learn more about how to add your own tabs to a form, see our article “Adding tabs to a live chat form“