1

Install Proonto code

Install Proonto code in your website

After you were first registered to Proonto, you can implement our chat in your website and start talking to visitors. In order to do so, you need to take the snippet of code located here and put it in your website.

The code should be added in every page of your website, and placed at the begining of the body tag.

In case you are using Shopify or Magento platforms, you can download the relevant extensions from the links on the bottom of the page.

If you are not familiar with the techincal details of your website, please contact your webmaster.

In any problem, contact Proonto support (support@proonto.com).


widget

App Settings

Conversion Tracking

CONVERSION TRACKING

In order to enable Proonto’s platform to track purchases that were made thanks to our sales agents we’ll need to track after successful purchases. Setting up conversion tracking correctly will help you better tracking of your website perfromance and our agents performance. It will also help us send you accurate statistics.

In case you are using our magento extension , you don’t need to take any action. For shopify extension see instruction below.

CONVERSION TRACKING PIXEL

Used for tracking your website’s conversion data.

A simple 2 step installation:

1. copy and paste the code on the right into your “Success / Thank You” page.

2. populate the following variables with their real value:

  • companyId – can be found under App Installation Screen. (*mandatory)
  • OID – OrderId, populate it with the orderId value received from your CRM / CMS / Shopping cart platforms  (*mandatory for Purchase & license renewal)
  • CURRENCY – Probably ‘USD’ but all currencies are supported.
  • DESCRIPTION – A general description of the conversion, this will help you keep track on specific deals in your deals report.
  • TYPE‘ PURCHASE’, ‘LEAD’, ‘SIGNUP’, ‘LICENSE_RENEWAL’, ‘TICKET_RESOLUTION’, ‘FORM_SUBMISSION’.
  • AMOUNT – purchase or license renewal value.

 

Example of a 389$ license renewal conversion data:

var proonto_vars = {
     'companyId': 42920458,
     'OID': 'OD_DGF2342',
     'CURRENCY': 'USD',
     'DESCRIPTION': 'License renewal for 3 months',
     'TYPE' :'LICENSE_RENEWAL'
     'AMOUNT': 389
 };
<script type="text/javascript">
function EncodeQueryData(data){ var ret = [];for (var d in data)ret.push(encodeURIComponent(d) + "=" + encodeURIComponent(data[d]));return ret.join("&");}
var proonto_vars = { 
 'companyId': {{COMPANY_ID}}, 
 'OID': '{{OrderId}}', 
 'CURRENCY': '{{CURRENCY}}',
 'DESCRIPTION': 'General Text',
 'TYPE' :'PURCHASE'
 'TOTAL': {{TOTAL_AMOUNT}}
};
var myImage = new Image(1, 2); myImage.src = '//chat.proonto.com/chat/rest/orders/api?clientId='+((a=document.cookie.match('(^|; )prt_clientId=([^;]*)')) ? a[2]:'') + '&uniqueId='+((b=document.cookie.match('(^|; )prt_uniqueId=([^;]*)')) ? b[2]:'') + '&' + EncodeQueryData(proonto_vars) + '&url=' + encodeURIComponent(document.location.href)+ '&pageTitle=' + encodeURIComponent(document.title) + '&cookiesEnabled=' + navigator.cookieEnabled;
</script>

CONVERSION TRACKING FOR SHOPIFY

Go to your account dashboard at Shopify Checkout Page and scroll to the additional content & scripts  sectionIn the “Additional content & scripts” section insert the following code into the text area beside it:

 

<script type="text/javascript">
var myImage = new Image(1, 2);
myImage.src = 'https://chat.proonto.com/chat/rest/orders/shopify?' + 'url=' + encodeURIComponent(document.location.href) + '&referer=' + encodeURIComponent(document.referrer) + '&CURRENCY={{ shop.currency }}&OID={{ order_number }}{% for line_item in line_items %}&ITEM{{ forloop.index }}={{ line_item.sku }}&AMT{{ forloop.index }}={{ line_item.line_price | money_without_currency }}&QTY{{ forloop.index }}={{ line_item.quantity }}{% endfor %}';
</script>

CONVERSION TRACKING FOR BIGCOMMERCE

BigCommerce provides certain variable names (surrounded by double percentage-marks like so: %%ORDER_ID%%). These names can be embedded in the regular Proonto conversion tracking snippet easily.

Here’s how:

  1. In BigCommerce – go to Settings -> Advanced Settings -> Affiliate Conversion Tracking, and paste the code to the right into the Conversion Tracking Code field.
  2. Replace everything in curly braces (e.g. {{CURRENCY}} with the correct value.)
    1. Make sure to also replace the curly braces themselves!
  3. Replace {{CURRENCY}} with, for example, ‘USD’ (so keep the quotation marks)
  4. Replace {{YOUR_COMPANY_ID}} with your company ID – notice there are no quotation marks.
  5. Save – and that’s it!
<script type="text/javascript">
var companyId ={{YOUR_COMPANY_ID}};
var OID = '%%ORDER_ID%%';
var CURRENCY = '{{CURRENCY}}';
var TOTAL = %%ORDER_AMOUNT%%;
var myImage = new Image(1, 2); myImage.src = '//chat.proonto.com/chat/rest/orders/api?clientId='+((a=document.cookie.match('(^|; )prt_clientId=([^;]*)')) ? a[2]:'') + '&uniqueId='+((b=document.cookie.match('(^|; )prt_uniqueId=([^;]*)')) ? b[2]:'')+ '&CURRENCY=' + CURRENCY +'&OID=' + OID + '&companyId=' + companyId + '&TOTAL=' + TOTAL + '&url=' + encodeURIComponent(document.location.href)+ '&pageTitle=' + encodeURIComponent(document.title) + '&cookiesEnabled=' + navigator.cookieEnabled;
</script>

USING SUCCESS PAGE FOR CONVERSION TRACKING

 

When you log in to the platform, you can go to “App settings”, and set there your website urls (product pages, checkout pages, etc.).

If you set a success page, whenever a user arriaves to this page – it will count it as conversion.

For additional information, see app setting configuration.

VERIFYING  SUCCESSFUL  INSTALLATION

In order to verify a successful conversion code installation, you’re more than welcome to use the “Purchases Tester”, under the “company settings” tab – right above the “hot lead segmentation” section.

1. Open the purchases tester.

purchase-tester

2. Click on “start test”.

you will receive the following message.

connection-message

3. Make a test purchase.

4. See if the purchase details have been sent correctly.

In case of an error, an error description and a link to the solution will be provided.

successful-purchasefailed-purchase

Click edit button to change this code.

The dashboard

This article will help you better understand the main platform view – the dashboard, or the online traffic screen.

We recommend to take a tour with our live guided demo.

online-screen-1024x749

Online tables

In the main view, you can see three tables: traffic, hot leads and inbound.
Every new visitor will get into the traffic table. If we find that this visitor has more potential to close a purchase, he may be promoted to the hot leads table. For example, if the visitor arrieved to a checkout page. This visitors segmentation is configurable, and can be defined in app-settings.

If the visitor has any interaction with the agent or ask for help, e.g opening the chat widget or sending a message – the visitor will jump up to the inbound table.

You can filter the visitors with the filter box, on top of the inbound table.

online-1024x346

Engaging with a visitors

In order to engage with a visitor, just click on his row. A lock icon will appear on the right side of the visitor row. This lock indicates that you are the one who holds the visitor and talking to him. In addition, a chat box will be opened.

Open video stream – If the agent camera is opened (right under the profile picture, in the left side of the screen), clicking on the video icon will open the video chat in the visitor side. The visitor will be able to see the agent, and only if he wants – he will be able show himself.

Auto messages – In the personal settings, you can prepare constant messages. When talking to visitor, you can press on the dropdown arrow and choose one of the messages. Please note that if there are no auto-messages configures, the dropdown button will be hidden.

Open visitor chatbox – force opening the chat box to the visitor.

Invite visitor to chat – proactively inviting visitor to chat.

Open contact form – the visitor will recieve a contact form to fill, inside the chat screen.

Redirect client to a webpage – the agent needs to enter a URL in the website the visitors is currently in, and the visitor will be redirected to this page.

Browsing history – form will be opened, showing you all past visits and details of this visitor.

Online agents

In the left side, you can see all the agents. If agent is online, he is marked in green. If he is away, he is marked in orange.

To set yourself in “away” mode, click the “away” checkbox in the header. By doing so, you’ll not consider as online agent, and visitors won’t be able to engaged with you.

Store owners, “admins” have star sign near their name.

chatbox

Javascript API

Proonto chat provides javascript API to interact with the chat.

The most common use-case for using this API, is to create custom chat button. For doing that, please refer to this article .
For extended examples, see js-api
Here is the complete reference for the javascript API.

On load event

The chat widget is loaded asynchronically. Therefore, not all the data is set after the code sinppet is loaded. For example, calling proonto.getClientId() may return null if the data was not yet loaded.

Therefore, you can use the on load event:

window.onProontoChatLoad (isAgentOnline)

isAgentOnline – true if there are online agents while the chat widget was loaded.
isControlGroup – true if the client is in control group, and therefore is not presented to the agent.

window.onProontoChatLoad = function(isAgentOnline, isControlGroup)
{
console.log('chat widget loaded');
console.log('clientId: ' + window.proonto.getClientId());
console.log('is agent online: ' + isAgentOnline);
console.log('is on control group: ' + isControlGroup);
}

Returns the ID of the current visit of the visitor. This ID lasts for an hour after the visitor leave the website.

proonto.getClientId()

Returns the ID of the visitor. If visitor visits a website 5 times, he will have five client ids and one unique id.

proonto.getUniqueId()

Returns the company ID. It is similar to the company ID that exists code snippet you installed in your website.

proonto.getCompanyId()

Returns true if at the time of the chat initialization, there was any online agent. Return false otherwise.

proonto.isAgentOnline()

Force opening the chat. Used by custom buttons. In case there are no online agents, the contact form will be opened.

proonto.openChat()

Hide the chat widget from specific pages by calling HideWidgetOnPage() inside the window.onProontoChatLoad function.

proonto.hideWidgetOnPage(true);

Setting the clients details. Can be used to correleate between website registered users and Proonto client records.

If sendNotification parameter is true, the behavior of calling to setContactDetails is the same as putting the data in “contact us” form (offline mode).

If sendNotification parameter is false, no email will be sent about new lead, the lead won’t be counted in the statistiscs and new lead would be created in salesforce, in case the integration was set.

proonto.setClientDetails(name, email, phone, msg, sendNotification)

Setting a clients customId can be used to correlate between existing customers and Proonto client records. That way chats could be saved under existing CRM records easily.

Another use case could be adding a marketing ID that will be reported later on back weather the user was converted or not.

proonto.setCustomClientId(customId);

Events

In order to catch an event, use the following syntax:

proonto.on(proonto.Events.eventName, callbackFunction)

proonto.on(proonto.Events.onHide, function() {
console.log('chat widget is now hidden');
});

Event types

proonto.Events.onShow – called when the chat widget is opened.

proonto.Events.onHide – called when the chat widget is closed.

proonto.Events.onClientDetailsEntered – called when a visitor enters his contact details.

Callback function parameters: name, email, phone and question.

proonto.Events.onChatMessage- called when a visitor sends chat message.

Callback function parameters: clientId, chat message.

proonto.Events.onClientAction- called when a visitor makes any action in the website, such as accepting chat invitation, fill his contact details, etc.

Callback function parameters: clientId, actionDescription.

proonto.on(proonto.Events.onClientDetailsEntered, function(name, email, phone, question) {
console.log('client details: name - ' + name + ', email - ' + email + ', phone - ' + phone + ', question - ' + question);
});

window.proonto.on(window.proonto.Events.onChatMessage, function(clientId, msg) {

console.log('client ' + clientId + ' sent a chat message: ' + msg);

});

window.proonto.on(window.proonto.Events.onClientAction, function(clientId, actionDescription) {

console.log(actionDescription);

});

Custom Chat Button

Three steps are needed to create your own custom chat button:
  1. Hide the default button.
  2. Add your custom button, and open Proonto chat when clicking on it.
  3. React to chat events.

 

1. Hide default button

  • Login to the dashboard.
  • Go to company settings.
  • Under “sites” check “Hide chat by default”.
  • If you have multiple websites, select each site that you want to add your custom button to, and check the “Hide chat by default” option.
custom-cta-button

2. Add your custom button

  • Add your custom button to your website.
  • When clicking on it, open the chat with the javascript command:
proonto.openChat();

3. React to chat events

Usually, your custom button should be hidden whenever the chat is opened, and shown when the chat is hidden. It is very important to do this in case the custom botton is in the same place where the chat is opened (i.e. bottom right corner).

It is not enough to hide the chat when clicking on the custom button. The agent can proactively open the chat from the dashboard; The chat may automatically open when navigating between pages (depends if the user was chatting before or not); The website visitor may close the chat; Therefore, you must catch the hiding and showing events.

In addition, you may want to react differently if there are online agents or not. For example, not displaying the chat at all when there are no agents; Change the caption of the button from “Let’s chat” to “Contact us” and so on.

For extended javascript examples, see this js-api

The following example demonstrates how to know whether any agent is online, and catch the hiding and showing events:

<script type="text/javascript">//Proonto API for customized CTA button.
window.onProontoChatLoad = function(isAgentOnline)
{
// use the isAgentOnline to determine if there is an online agent or not.

// catching the onHide / onShow events of the chat UI
proonto.on(window.proonto.Events.onShow, function() {
// fired when the chat is being presented
});
proonto.on(proonto.Events.onHide, function() {
//fired when the chat is being hidden
});
};
</script>

Celery Integration

Celery Integration

If you are using the Celery framework, you have two options for setting a thank-you / confirmation page: Celery default or a custom one.

If you are using the default Celery thank-you page, add the following snippet to the confirmation page, as described here.

Don’t forget to replace {{CompanyId}} with your company ID, which was sent to you in the registation email.

If you are not using a custom confirmation page, configure the conversion tracking code as describe here.

<script type="text/javascript">
var order = App.getOrder({version: 'v1'});
var companyId = {{CompanyId}}; 
var OID = order.number; 
var CURRENCY = 'USD'; 
var TOTAL = order.total / 100;
var myImage = new Image(1, 2); myImage.src = 'https://chat.proonto.com/chat/rest/orders/api?CURRENCY=' + CURRENCY +'&OID=' + OID + '&companyId=' + companyId + '&TOTAL=' + TOTAL + '&url=' + encodeURIComponent(document.location.href)+ '&pageTitle=' + encodeURIComponent(document.title);
</script>

Global-e Integration

If You are using Global-e framework, use the following code snippet in your thank-you page.

Don’t forget to replace {{Proonto CompanyId}} with your company ID, that was sent to you in the registration email.

<script type="text/javascript">
gle("OnCheckoutStepLoaded",function(data){
switch(data.StepId){
	case data.Steps.SHIPPING:
	case data.Steps.REVIEW:
	case data.Steps.PAYMENT:
		break;
	case data.Steps.CONFIRMATION:
	if (data.IsSuccess){
		var companyId = {{Proonto CompanyId}}; 
		var OID = data.OrderId; 
		var CURRENCY = data.details.currency; 
		var TOTAL = data.details.totalProductsPrice;
		var myImage = new Image(1, 2); myImage.src = 'https://chat.proonto.com/chat/rest/orders/api? &CURRENCY=' + CURRENCY +'&OID=' + OID + '&companyId=' + companyId + '&TOTAL=' + TOTAL + '&url=' + encodeURIComponent(document.location.href)+ '&pageTitle=' + encodeURIComponent(document.title);
			}
		 break;
	}
});
</script>

Salesforce Integration

By setting the Proonto – Salesforce integration, you can get contact details of the visitors or chat logs, posted through Proonto chat, directly to your salesforce account.

The chat logs / contact details will be sent as web-to-lead.

To configure the salesforce integration:

  • In the right hand menu of the live chat platform, press on “App settings”.
  • Under the “Company settings” section, check the “Enable Salesforce integration”
  • Set the “salesforce account” field with the your salesforce organization ID, used for web-to-lead. Use this link to find how to find your organization ID.
  • Check “Send leads from contact form” if you want to get visitor contact details as web-to-lead.
  • Check “Send chat logs” if you want to get chat logs as web-to-leads. Chat logs will be sent after the visitor exit the website, and only if he sent at least one message.

salesforce