Online Consultant API

Opening a module

Method used to open a module

supportAPI.openSupport(); 

Usage example:

<a href="#" onClick="supportAPI.openSupport(); return false;">Ask a Question</a>

Result:

Ask a question

 

Opening a module by link to an image

 <a href="#" onClick="supportAPI.openSupport(); return false;"><img src="URL"></a>,

where URL is the link to the image.

 

Opening the Reviews tab

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

 

Open any tab

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

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

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

 

---

 

Appearance

Hide default label

Add a line to your site’s css styles

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

 

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

 

Change the color of reviews on the site

In order to change the color of reviews on your site, you need to go to the section “Online chat – your site – Settings – General settings” and select “Custom design – Custom CSS inside the module”. In the window that opens, you need to prescribe the styles:

div.ajax.greenAjax{ background: #eeeeee; } are positive reviews
       div.ajax.redAjax{ background: #aaaaaa; } are negative

Replace #eeeeee and #aaaaaa with your desired color code.

 

Change the position of the chat window

supportAPI.setPosition(x, y);

Usage example:

In the code for calling the online chat that you posted on the site, find the lines:

var callback = function(){
               /*
                       This is where you can call the API. For example, to change the height offset:
                       supportAPI.setSupportTop(200);
               */
       };

and replace with:

var callback = function(){
               supportAPI.setPosition(100, 200);
       };

 

---

 

Toast Notifications

Initiate a toast

$SA.support.rpcActions.showNewMessage({name:"Operator name", message:"Message text",avatar:"http://"})

Such notifications are displayed on the site, but are not saved in the system and are not displayed in the communication history.

If you want to set up standard auto-invites, then do it in your account in the “Auto-greetings” section. Instructions in our article “Auto-greeting (engaging in dialogue)“.

 

Change the color of the toast

supportAPI.setNewMessageColors("rgba( 0, 0, 0, 0.80)", "#000", "#fff");

The first parameter is the background for modern browsers that support transparency (includes an alpha channel that sets the element’s transparency, a value of 0 is fully transparent, 1 is opaque).

The second parameter is the background for older versions of IE that don’t support rgba colors with transparency.

The third parameter is the color of the text.

 

Change the location of the notification window

In order to change the location of the pop-up window (auto-invite window), you need to add styles on your site:

<style>
               #supportNewMessage{
               top:30px; bottom:auto; left:30px; right:auto;
               }
       </style>

 

---

 

Visitors and operators data

Change visitor name

You can assign names to your visitors depending on who exactly is authorized on the site at the moment using the code:

<script>
               supportAPI.setName("New visitor name");
       </script>

 

Change visitor contacts

You can assign a contact phone number and email to your visitors depending on who exactly is authorized on the site at the moment using the code:

<script>
               supportAPI.changeContacts("New visitor contacts");
       </script>

 

Getting user data (name/phone/email)

If you want to get the user’s data that he entered into the form in order to use it for your own purposes, use the method:

<script>
               supportAPI.getContacts(function(data){ console.log(data); });
       </script>

To the function, to the variable data will return:

Object {name: "Customer name", phone: "Phone", email: "Email"}

 

Assigning target visitors

In the “Target Visitors” section, you will be able to set up notifications about the most important visitors to your site according to a number of parameters. Read more about setting in our article “Target visitors“.

If you want to set more complex conditions for determining target visitors, then use the method:

<script>
               supportAPI.setTarget("This is the reason why the visitor is the target");
       </script>

 

Operator name substitution

If you want to change the operator name only on one of the sites you use, then add the following script before the chat call code:

<script type='text/javascript'>
               var customSupportOperatorNames = {login:"Desired operator name"};
       </script>

where login is the operator’s login in the system.

 

Tracking agent statuses

supportAPI.listenOperatorsStatus(callback);

Usage example:

<script>
            supportAPI.listenOperatorsStatus(function(onlineOperators){
                    if (onlineOperators.length){
                            alert("Now there are "+onlineOperators.length+" operators online");
                    }
                    else{
                            alert("All operators are offline");
                    }
            });
    </script>

 

Select any operator

Using this method, you can assign any online operator to the visitor:

<script>
            supportAPI.setOperator("operator login");
    </script>

 

---

 

Auto Send Messages

Sending a message to the operator from the client

This method allows you to simulate sending a question to the operator from the client. You can implement the following scenario: in the product description, place a link to open a chat, for example, “Check product availability”. On click, an online chat opens and a template message like this is automatically sent to the operator: “Hello, check the availability of product AB057”. This is implemented as follows:

<script>
            supportAPI.sendMessage("Hello, check the availability of product AB057");
    </script>

 

Sending an auto-response to the client from the operator

The operator can automatically “answer” the question with template text, such as “Hello! Now I will check the availability of this product, please wait”. This phrase will keep the visitor and give the operator time to find the right information. This is implemented as follows:

<script>
            supportAPI.receiveMessage("Message text", "operator login");
    </script>

“operator login” – this parameter can be removed, then the answer will be sent from the operator selected in the chat.

 

Usage example:

function simulateChat(){
            supportAPI.sendMessage("Hello, check the availability of item AB057.");
            setTimeout(function(){
            supportAPI.receiveMessage("Hello! I'm checking the availability of this product, please wait.");
            },5000);
    }

The simulateChat() function can be used on the onClick event.

 

---

 

Integration with Yandex.Metrica

Find the “callback” line in your code and add the appropriate code.

1. Event associated with sending a message to the operator:

 var callback = function(){
            supportAPI.clientSendMessageCallback = function(){
            yaCounterXXXXXX.reachGoal('online_chat');
            };
    };
    

2. Chat opening event:

 var callback = function(){
        supportAPI.openSupportCallback = function(){
        yaCounterXXXXXX.reachGoal('online_chat');
        };
};

where:

• XXXXXX — your counter number;
• online_chat — your target ID.

For more information on setting up, see the article “Integrating Suo.Chat with Yandex.Metrica and Google Analytics“.

 

Google Analytics Integration:

Find the “callback” line in your code and add the appropriate code.

1. Event associated with sending a message to the operator:

 var callback = function(){
        supportAPI.clientSendMessageCallback = function(){
        _gaq.push(['_trackEvent', 'category', 'action', 'opt_label', 'opt_value', 'opt_noninteraction']);
        };
};

2. Chat opening event:

 var callback = function(){
        supportAPI.openSupportCallback = function(){
        _gaq.push(['_trackEvent', 'category', 'action', 'opt_label', 'opt_value', 'opt_noninteraction']);
        };
};

 

---

 

If you need any other API method, feel free to ask tech support for it!