Web Chat popup with some kind of form included

[Srdjan_Kojic]

Hello everyone,

I would like to ask for a little help, to a fellow junior developer. Is there a way, when I generate "Chat popup" to actually include some kind of form fields for customer which is interacting with the chat, so that users can fill out some information about themselves as our customer agents can have some information about them when they chatting. I am asking that because I am making some kind of bridge solution with Bold 360, with Bold 360 only allowing scripts to be runned. So most obvious thing creating HTML page with a form is not functioning. I tried to read forums, but not found anything similar to this. So maybe someone has some idea, or pointer for me, how could I solve this problem.

Similar example is like Dev tools page where you can create web chat interface, with populated fields, only i would like for people to populate fields themselves instead of automatism.

Thank you in advance for any kind of reply.

Best regards.

[tim.smith]

Just collect whatever info you want and set it to the supported properties in the data property in the chat config before you start the chat.

[Srdjan_Kojic]

Thank you for your reply Tim. Sorry for the late reply from my side though, I cannot use document.getElementByID().innerHTML.value property to collect data from the apropriate HTML elements, but ok. I thought maybe there is some other way, which I can not think of at the moment, but will try to resolve it somehow on the other end (Bold 360).

Thank you once again for the assistance.

Best regards.

[Srdjan_Kojic]

@tim.smith

e

Hi again, I didn't created the new topic, since it's related to the this one. I managed to use modal to create some kind of popup and invoke its apperance with Jquery. But I'm strugling with after actions, I am banging my head how to create the chat after clicking on the submit and parse the form field values into the Chat Config variable.

Here is the Code:

$('#submit').click(function(){

  var firstName = $('#first-name').val();
  var lastName = $('#last-name').val();
  var firstName = $('#email').val();
  var firstName = $('#registration-number').val();


let chatConfig = {

"webchatAppUrl": "https://apps.mypurecloud.ie/webchat",
"webchatServiceUrl": "https://realtime.mypurecloud.ie:443",
"orgId": "8410",
"orgName": "fjellinjenas",
"queueName": "Chat",
"logLevel": "DEBUG",
"locale": "",
"data": {
"firstName": firstName,
"lastName": lastName,
"addressStreet": "",
"addressCity": "",
"addressPostalCode": "",
"addressState": "",
"phoneNumber": ""
},
"companyLogo": {
"width": 600,
"height": 149,
"url": "http://i65.tinypic.com/2hr1ytg.jpg"
},
"companyLogoSmall": {
"width": 25,
"height": 25,
"url": "http://i68.tinypic.com/2m3gto6.jpg"
},
"agentAvatar": {
"width": 462,
"height": 462,
"url": "http://i67.tinypic.com/1eqted.png"
},
"welcomeMessage": "Du snakker med kundebehandler.",
"cssClass": "webchat-frame",
"css": {
"width": "100%",
"height": "100%",
"display": "block",
"left": "90%",

}
};
});

ININ.webchat.create(chatConfig, function(err, webchat) {
if (err) {
console.error(err);
throw err;
}
webchat.renderFrame({
containerEl: 'chat-container'
});
});

Is there anyone who can seee something i missed here, it's all dots and parenthesys, comma's in front of my eyes.

Thank you for any assistance.

[tim.smith]

The webchat.renderFrame(...) function is what will create the webchat. Whenever that's called, it will render the webchat in the element with the ID you've provided.

[Srdjan_Kojic]

Thank you Tim. Again sorry for the late reply.I figured it out. Everything is now working fine.