Livechat is a great system for chatting live to your website visitors. But sometimes time can be wasted ascertaining pertinent details from the customer that could be looked up automatically as the chat starts.

In this example, a car parts company wanted to know exactly what type of car the person as soon as the chat started.- Using our API at http://www.regcheck.org.uk

So, the first thing to do is to set up a pre-chat survey (under settings), adding a Question saying “What is your registration number”

Once this is enabled, the chat window should appear as shown above. In this example, it’s important that the question is the third in the list, but you can modify the webhook code below to change that.

Next set up a webhook, under settings > integrations. Here it’s important to ensure that visitor and pre_chat_survey are clicked, and chat starts event is selected. The target url should point to your website, and a PHP file called livechathook.php

Now, here’s some code, for the file livechathook.php

<?php

ini_set(‘display_errors’,true);
error_reporting(-1);

$client = new soapclient(‘http://www.regcheck.org.uk/api/reg.asmx?WSDL ‘, array(‘trace’ => 1));
// Set this username to your RegCheck username
$username = ‘your-username’; // Replace this!

// read the webhook sent by LiveChat
$data = file_get_contents(‘php://input’);

file_put_contents(‘raw.txt’, $data);

try {
$json = json_decode($data);
$survey = $json->pre_chat_survey;
$question2 =$survey[2];
$answer2 =$question2->answer;
file_put_contents(‘reg.txt’, print_r($answer2, true));

// create an array of parameters
$param = array(
‘RegistrationNumber’ => $answer2,
‘username’ => $username);

$result = $client->Check($param);
$car = ‘Not found’;
file_put_contents(‘soapresponse.txt’, print_r($client->__getLastResponse(),true));
if (is_soap_fault($result)) {
file_put_contents(‘regerror.txt’,print_r($result,true));
} else {
file_put_contents(‘regdetails.txt’,print_r($result,true));
$regJson = $result->CheckResult->vehicleJson;
$djson = json_decode($regJson);
$car = $djson->Description;
}

$fields = array();
$fields[] = (object)array(
‘name’ => ‘Car’,
‘value’ => $car
);

$curlFields = http_build_query(array(
‘license_id’ => $json->license_id,
‘token’ => $json->token,
‘id’ => ‘my-integration’,
‘fields’ => $fields
));

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, ‘https://api.livechatinc.com/visitors/ ‘ . $json->visitor->id . ‘/details’);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $curlFields);
curl_setopt($ch, CURLOPT_HTTPHEADER, array(‘X-API-Version: 2’));
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec($ch);

$CurlError = curl_error($ch);
file_put_contents(‘curlerror.txt’, print_r($CurlError, true));

curl_close($ch);

file_put_contents(‘curl.txt’, print_r($result, true));

}
catch(Exception $e) {
file_put_contents(‘error.txt’, $e->getMessage());
}

?>

The end result of this, is when you are chatting with a user, you now know the exact make and model of the car they are driving.

It should be noted, that the above example assumes the user is from the UK, and you will have to change the $client->Check call to $client->CheckUSA or $client->CheckAustralia for other countries (* And you need to collect state information for USA and Australia too).

So, you might be interested to know how this works?

The webhook from LiveChatInc sends the following Json;

{
“event_type”:“chat_started”,
“event_unique_id”:“f35b043d61184384762ccf47fb761e5e”,
“token”:“00d0a8995cb9eefa3bb2e6b91a812996“,
“license_id”:“7738991“,
“visitor”:{
“id”:“S1467215931.f4e3dfcee9“,
“name”:“John Mairs”,
“email”:“John@mairs.com”,
“country”:“United Kingdom”,
“city”:“”,
“language”:“en”,
“page_current”:“http://livechat.webtropy.com/&#8221;,
“timezone”:“”
},
“chat”:{
“id”:“O9CL40K8AT”,
“started_timestamp”:1467284861,
“url”:“http://livechat.webtropy.com/&#8221;,
“messages”:[
{
“user_type”:“agent”,
“author_name”:“Fiach Reid”,
“agent_id”:“xxxxx@gmail.com”,
“text”:“Hello. How may I help you?”,
“timestamp”:1467284861
}
],
“attachments”:[

],
“events”:[

],
“agents”:[
{
“name”:“Fiach Reid”,
“login”:“fiach.reid@gmail.com”
}
],
“tags”:[

],
“groups”:[
0
]
},
“pre_chat_survey”:[
{
“id”:“146721615150601218”,
“type”:“name”,
“label”:“Name:”,
“answer”:“John Mairs”
},
{
“id”:“146721615150606648”,
“type”:“email”,
“label”:“E-mail:”,
“answer”:“John@mairs.com”
},
{
“id”:“146721615150604606”,
“type”:“question”,
“label”:“What is your registration number”,
“answer”:“UKZ2955“
}
]
}

The parts of interest are the response to the question – the registration number, the token, license and visitor id are required to feed information back to LiveChatInc.

In the code above, you can see that the car registration number is stored in $answer2, and this is then sent to the regcheck webservice, to determine the car details. If this succeeds, then the car description is stored in $car – The $fields object is then created with the car details stored in an associative array, this is then sent back to the LiveChatInc API to be associated with the current visitor.

The code above contains quite a bit of logging, which can be used for debugging purposes, but should be removed before going live.

Raw.Txt – The Json sent to the Webhook
reg.txt – The Visitors registration number
soapresponse.txt – XML returned from the webservice
regerror.txt – Any error returned from the webservice
regdetails.txt – The data returned from the webservice
curlerror.txt – Any error in calling the API
curl.txt – The result of calling the API
error.txt – Any PHP errors.

Czech this out!, Sorry, pardon the pun. We’ve just added support from the CKP (Czech Insurers Bureau) support for automated car registration lookups that allows users submit Czech car registration details into our API, and receive data about the Car back in XML and JSON format. The website is at http://www.spzapi.com

Czech Republic support

Car registration plates in the Czech Republic use the /CheckCzechRepublic endpoint and return the following information:

• Make
• Vehicle type
• Insurer
• Date last insured

Sample Json:

{“Description”:”HARLEY DAVIDSON”,”CarMake”:{“CurrentTextValue”:”HARLEY DAVIDSON”},”MakeDescription”:{“CurrentTextValue”:”HARLEY DAVIDSON”},”VehicleClass”:”MOTORCYCLE”,”Insurer”:”DIRECT POJIŠŤOVNA, A.S.”,”InsuranceDate”:”15.10.2013″}

We will shortly be adding support for stolen car detection, to assist in purchasing decisions.

Sri lanka, has over 6 million registered vehicles, in a population of 20 million, according to http://www.motortraffic.gov.lk/web/images/stories/document/pop2015.pdf

We’ve now opened up an API that offers a lookup that can obtain vehicle data from a Sri-Lankan registered vehicle at http://lk.carregistrationapi.com/

Sri Lanka support

Car registration plates in Sri Lanka use the /CheckSriLanka endpoint and return the following information:

• Make and Model
• Registration year
• Engine code
• Owner (i.e. outstanding car loans)

Sample Json:

{“Description”:”SUZUKI ALTO LXI 800″,”CarMake”:{“CurrentTextValue”:”SUZUKI”},”CarModel”:{“CurrentTextValue”:”ALTO LXI 800″},”MakeDescription”:{“CurrentTextValue”:”SUZUKI”},”ModelDescription”:{“CurrentTextValue”:”ALTO LXI 800″},”EngineSize”:{“CurrentTextValue”:”F8DN5403186″},”RegistrationYear”:”2015″,”Owner”:”n/a”,”VehicleClass”:”MOTOR CAR”,”Conditions”:”n/a”}

Say you wanted to authenticate yourself against a website that used LinkedIn OAuth for authentication, tricky ?, well, not too bad if you are using PhantomJS.

I’ve elided a bit of information below (in bold), since I’m not going to put my LinkedIn password up on this blog 🙂

var page = require(‘webpage’).create();

page.open(‘https://www.linkedin.com/uas/oauth2/authorization?redirect_uri=http://othersite.com&client_id=THEIR CLIENT ID&scope=r_emailaddress%20r_basicprofile&response_type=code&state=THEIR STATE‘, function (status) {
console.log(“opened linkedin page”);
page.evaluate(function() {
var usernameField = “session_key-oauth2SAuthorizeForm”;
var elUsername = document.getElementById(usernameField);
elUsername.value = ‘XXXXX@gmail.com‘
var passwordField = “session_password-oauth2SAuthorizeForm”;
var elPassword = document.getElementById(passwordField);
elPassword.value=”XXXXXX“;
var elForm = document.querySelector(“form”);
elForm.submit();
});
page.onLoadFinished = function(){
console.log(“Logged in”);
page.render(“linkedin-2.png”);
step2();
};
});

If you want to have a service that can be contacted either with Basic Authentication, or without authentication, then you may not want your server to return a 401 challenge response, but want to look for the Authentication header anyway.

Here’s how I’ve done it with asp.net

var strAuthHeader = HttpContext.Current.Request.Headers[HttpRequestHeader.Authorization.ToString()];
if (!string.IsNullOrEmpty(strAuthHeader))
{
strAuthHeader = strAuthHeader.Substring(6);
byte[] bAuthHeader = Convert.FromBase64String(strAuthHeader);
strAuthHeader = Encoding.UTF8.GetString(bAuthHeader);
var strAuthUsername = strAuthHeader.Split(new char[] {‘:’})[0];
var strAuthPassword = strAuthHeader.Split(new char[] {‘:’})[1];
}

So, for example, you can call our RegCheck webservice, passing the credentials via basic authentication.

string userName = “user”;
string password = “password”;
WebClient client = new WebClient();
string credentials = Convert.ToBase64String(Encoding.ASCII.GetBytes(userName + “:” + password));
client.Headers[HttpRequestHeader.Authorization] = string.Format(“Basic {0}”, credentials);
var strUrl = “http://www.regcheck.org.uk/api/reg.asmx/Check?RegistrationNumber=ukz2952&username=&#8221;;
var strHtml = client.DownloadString(strUrl);
Response.Write(strHtml);

Sometimes you want to let your users upload images or other files to your server, but you’re not a wizard at PHP, so you’d like to do it just using Javascript, and with no server side coding at all. Just two lines of code … yes please!

So, here’s what we’ve come up with at http://ftp.apixml.net

• 1. Include the script:

  < script src="http://ftp.apixml.net/ftp.js">
  </script>

• 2. Include an upload button:

  <input type=file 
  onchange="Ftp.upload('access_token', this.files)"/>

Now, you have to go to the website ftp.apixml.net  to enter your username and password, and you’ll get an secure access token back. The reason for this, is that you’d never want to put your FTP username and password into the Javascript directly, it would be too insecure. Instead, you enter it into the website, and get a code back. using this code, the javascript will know where to put your file, but hackers can’t determine your password.

Now, if you’re interested on how this works, it uses two technologies that are new to HTML5, the FileReader Object, which allows client side javascript to read the file that the user has just uploaded, and CORS, which allows the file to be sent to a server other than the one that served the page. It uses the C# FTP library at http://www.ftpclient.co.uk 

The code for the FTP library is as follows – which you are free to modify, but please leave the copyright notice at the head.

// Script from http://FTPJS.XYZ
// Copyright 2016 FTPJS.XYZ, DO NOT REMOVE THIS COPYRIGHT NOTICE
var Ftp = {
    createCORSRequest: function (method, url) {
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr) {
            // Check if the XMLHttpRequest object has a "withCredentials" property.
            // "withCredentials" only exists on XMLHTTPRequest2 objects.
            xhr.open(method, url, true);
        } else if (typeof XDomainRequest != "undefined") {
            // Otherwise, check if XDomainRequest.
            // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
            xhr = new XDomainRequest();
            xhr.open(method, url);
        } else {
            // Otherwise, CORS is not supported by the browser.
            xhr = null;
        }
        return xhr;
    },
      upload: function(token, files) {
        var file = files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.addEventListener("load",
            function() {
                var base64 = this.result;               
                var xhr = Ftp.createCORSRequest('POST', "http://www.ftpjs.xyz/upload.aspx");
                if (!xhr) {
                    throw new Error('CORS not supported');
                }
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && xhr.status == 200) {
						Ftp.callback(file);
					}
				};
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send("token=" + token + "&data=" + encodeURIComponent(base64) + "&file=" + file.name);
            },
            false);
    },
	callback: function(){}
    }
};

Got this error message today;

+ e {System.Net.WebException:

The request was aborted: Could not create SSL/TLS secure channel.
at System.Net.HttpWebRequest.GetResponse()

The solution to this, in .NET 4.5 is

ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls12;

// Requires .NET 4.5

If you don’t have .NET 4.5 then use

ServicePointManager.SecurityProtocol = (SecurityProtocolType)3072;

Today, we added support for Slovakia in our network of European car registration APIs at
http://www.ečv.com/

Car registration plates in Slovakia use the /CheckSlovakia endpoint and return the following information

• Make and Model
• Engine Size
• Registration year
• Power in Kw
• Colour (in Slovak)
• VIN number

Sample Json:

{“Description”:”SKODA FABIA”,”CarMake”:{“CurrentTextValue”:”SKODA”},”CarModel”:{“CurrentTextValue”:”FABIA”},”MakeDescription”:{“CurrentTextValue”:”SKODA”},”ModelDescription”:{“CurrentTextValue”:”FABIA”},”EngineSize”:{“CurrentTextValue”:”1598″},”RegistrationYear”:2009,”Power”:”77″,”Colour”:”CERVENA”,”VechileIdentificationNumber”:”TMBGD25J893173003″}