Pass Customer details from webpage to web chat

Genesys Cloud Web Chat
1

Hello,

I want to pass customer details from a web page to webchat. For example, a webpage has a registration form with fields like name, address, email, phone number etc. A customer comes in visits the website, fills the registration form, then he wants to talk to agent and opens webchat, the webchat fields must be auto filled with the customer information taken from registration form on the webpage.

Below is the genesys-Adobe you tube link which shows the same scenario. when the web chat pops up, all of its fields are already filled with firstname, lastname, email. How to get these fields auto filled?

Please give me some guidance on implementing this.

Thank you

2

This actual demo was done using the old Predictive Engagement SDK. I populated email, givenName and familyName using the traits mapper described here Map traits to link customer records - Genesys Documentation. I used this javascript to trigger it:

scriptPE.onload = (function(a,t,c,l,o,u,d){a['_genesysJourneySdk']=o;a[o]=a[o]||function(){

(a[o].q=a[o].q||[]).push(arguments)},a[o].l=1*new Date();u=t.createElement(c),
d=t.getElementsByTagName(c)[0];u.async=1;u.src=l;u.charset='utf-8';d.parentNode.insertBefore(u,d)
})(window, document, 'script', 'https://apps.usw2.pure.cloud/journey/sdk/js/web/v1/ac.js', 'ac');
ac('init', 'orgID', { region: 'region' ,
globalTraitsMapper: [
{
"fieldName": "login_email",
"traitName": "email"
}, {
"fieldName": "firstname",
"traitName": "givenName"
}, {
"fieldName": "mobilenr",
"traitName": "homePhone"
}, {
"fieldName": "lastname",
"traitName": "familyName"
}
]
});

This maps form fields on the website in that demo (login_email, firstname, mobilenr and lastname) to the correct fields to identify a user.

However, if the customer fills the chat form before starting and you have Single Customer View (About single customer view - Genesys Cloud Resource Center) enabled, it should happen automatically with Widget v2. The form uses a field called email for the email address, and this is used to match as described in the docs above.

3

Hi msassoon,

Thanks a lot for the information. I am sorry for late reply.
Would like to understand few things, in reference to the video, when the customer becomes a known customer i.e, after filling the login form, does it pass the customer data to adobe or can predictive engagement track that information and autofill the webchat fields?

As per my understanding, globalTraitsMapper helps to show customer data on live now, how will it help me get the webchat fields autofilled?

Thank you

4

It is all done via Predictive Engagement events, that is what the traits mapper is from. If the field names match the form names (if you don't change anything from the default, they will) they get auto filled based on the field names.

6

I think what is missing is that the values need to be set from the page, it is not totally automatic in the form. In your case, you are mixing the form names, but I set them from the WebChat.open command like so:

if (localStorage.getItem("login_email") != null) {
    var email=document.getElementById("login_email").value;
    console.log('Email address is ' + email);};

if (localStorage.getItem("firstname") != null) {
    var firstname=document.getElementById("firstname").value;
    console.log('First Name is ' + firstname);};

if (localStorage.getItem("lastname") != null) {
    var lastname=document.getElementById("lastname").value;
    console.log('Last Name is ' + lastname);};

    document.getElementsByClassName("btn-chat")[0].onclick = function() {
        console.log('Chat clicked');
        customPlugin.command('WebChat.open',{form: {
            autoSubmit: false,
            firstname: firstname,
            lastname: lastname,
            email: email,
            subject: 'Enquiry'

This gets the data from the page into variables and then sets them when the form is popped. The automatic mapping I was covering was for the journey view.

7

Hi msassoon,

Thanks for your help. I understood the process and was able to implement it .

Thank you

8