Documentation 2017-04-25T12:48:40+00:00

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

Configure App Settings

SITES

If you have just one website / brand, just fill in the details. In case you have several websites, you can configure a unique configuration for each one of them.

  • To add more websites click on “Add site” button.
  • To choose website to configure, press on the triangle under the button.
  • After you finish to configure your website – press on “save settings” at the end of “Sites” section.
  • After saving the changes, you’ll be able to see the preview in the right preview panel.

websites

Configure chat widget appearence

Color – In order to set the color palette, click on the “click to customize” button. After choosing the main color of your chat widget, press “OK”. The other colors of the palette will be calculated automatically.

colors

General appearence

You can choose between normal mode and classic mode. In the normal mode the chat messages are “floating”, while in the classic mode there is a background to the chat. You can play around with this configuration item, and see the implication in the preview window.

Hide chat by default – Check this to hide the chat in the website. Use this option when you want to customize your own chat button.

Live help button – The text appears on the button when there are agents online.

Contact us title – When all agents are offline, clicking on the chat button will open up the contact us form. The “Contact us title” is the title of the form.

Contact us text – The subtitle of the contact us form.

Popup invitation text – When agent invite visitors to chat, this is the text that will appear on the invitation.

Show contact form before starting chat – If checked, the client will have to insert his contact details before starting the chat.

Offline button – The text appears on the button when there are no agents online.

Special URLS – In this section, you can define the types of URLs in your website. For example, success page (“www.my-website.com/thank-you”), cart pages, checkout pages.

Defining the success page will mark each visit in this URL as a purchase. We highly recommend not to use the success pages mechanism, but to use our conversion tracking API.

Other pages may be used for marking visitors as “hot leads“.

The way Proonto checks the urls is by cheching whether the current URL of the visitor contains the URL you defined.

contactus

For example:

If you define your checkout page as “mywebite.com/checkout” – the following URLs will be considered as checkout pages:

mywebite.com/checkout

www.mywebite.com/checkout

https://mywebite.com/checkout?cartId=1234564

COMPANY

This is section is about data that is related to the company, regardless to a specific website or brand.

Company ID – States your company ID. The company ID is important when you install our code or set the conversion tracking code. It will also help us if you’ll send us your company ID when contacting Proonto support.

Company name – The nasme of the company and the name of the default brand.

Email – The email of the company.

Phone – The phone of the company or it’s call center, in case the website visitor wants to initiate a phone call.

If missing, the visitor won’t have the option to call the company.

Hide widget when there are no online agents – Check this if you don’t want the chat widget to appear in your website, when there are no agents online. Please note that if there are no agents online, only “contact us” form can be opened.

Show widget on mobile devices – Check this to hide the chat widget for visitors who come from mobile devices.

Enable Salesforce integration – Set the integration with salesforce. See salesforce integration.

phone

The phone number format is +[country code][number].

For example: +19176249021

HOT LEAD SEGMENTATION

Hot Lead Segmentation helps distinguishing clients with a higher purchase or engagement potential from the accidental visitor.

We can tell if a client is “serious” by several parameters:

  • How long has the client been on your site.
  • Has the client conversed with an agent before.
  • Has the client left his details before (name / email / phone number).
  • Is the client on a special page *.

Hot lead segmentation settings are configured under “Company Settings ->  Hot Lead Filtering” (scroll down to view).

hot-lead-filtering1

Once one of the checked conditions above is met, the client becomes a hot lead.

* Special Pages are configured just above the hot lead segmentation under “Sites -> Special URLs”:

sites
special-urls

Just add you’re website’s special pages urls, and once a client is on a checked special page – he will become a hot lead.

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);
var companyId='{{YOUR_COMPANY_ID_HERE}}'
myImage.src = 'https://chat.proonto.com/chat/rest/orders/shopify?' + 'url=' + encodeURIComponent(document.location.href) + '&companyId=' + companyId + '&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!

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.

successful-purchase

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:

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.

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.

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