Hi all,
Hoping someone can help me with an error I am getting when running a very basic webpage with webchat deployment.
I get a DOMException error in the Console Log. Screenshot here:
The error comes when I load the page, and nothing happens when i click the "Start Chat" button...?
Here is a copy of my HTML page. It is the same page code taken from here (https://developer.mypurecloud.com/api/webchat/), but with my own org details and deployment details inserted.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PureCloud Webchat Demo</title>
</head>
<body>
<form id="chatForm">
<h3>Participant Information- local</h3>
<table class="webchat-config">
<tbody>
<tr>
<th>First Name:</th>
<td><input type="text" id="first-name" value="John" /></td>
</tr>
<tr>
<th>Last Name:</th>
<td><input type="text" id="last-name" value="Doe" /></td>
</tr>
<tr>
<th>Agent Email:</th>
<td><input type="text" id="agent-email" value="alex.agent@example.com" /></td>
</tr>
</tbody>
</table>
<button type="button" id="chat-button">Start Chat</button>
</form>
<div id="chat-container" style="height:600px"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript">
console.log("debug 1")
$(document).ready(function initializeChat () {
var chatConfig = {
// Web chat application URL
webchatAppUrl: 'https://apps.mypurecloud.com/webchat',
// Web chat service URL
webchatServiceUrl: 'https://realtime.mypurecloud.com:443',
// Numeric organization ID
orgId: 1106,
// Organization name. Replace with your org name.
orgName: 'wrendatalimited',
// Requested agent language skill (Agent must have this language skill to receive chat)
language: 'English - Spoken',
// Requested agent skills (Agent must have these skills to receive chat)
//skills: ['Computers', 'Printers'],
// OR
//skills: [],
// Priority
priority: 0,
// Queue Name
queueName : 'City Wonders - Other Queries',
// Whether to show submit button or send message on Enter keypress
showSubmitButton: false,
// Log level
logLevel: 'DEBUG',
// Locale code
locale: 'en',
// Whether to allow reconnects
reconnectEnabled: true,
//Allowed reconnect origins
reconnectOrigins: ['https://wrendata.com'],
// Text displayed with chat window is displayed
welcomeMessage: 'Thanks for chatting.',
// CSS class applied to the chat window
cssClass: 'webchat-frame',
// Custom style applied to the chat window
css: {
width: '100%',
height: '100%'
}
};
var chatButton = document.getElementById('chat-button');
// Required if reconnects are enabled
window.PURECLOUD_WEBCHAT_FRAME_CONFIG = {
containerEl: 'chat-container'
};
ININ.webchat.create(chatConfig)
.then(function (webchat) {
// Optionally use isAutoJoined if reconnects are enabled
if (webchat.isAutoJoined()) {
// Do something to disable chat button
} else {
chatButton.onclick = function () {
var firstName = document.getElementById('first-name').value;
var lastName = document.getElementById('last-name').value;
var agentEmail = document.getElementById('agent-email').value;
// Use getConfig.setConfigProperty() for any web chat configuration property to dynamically set config values.
webchat.getConfig().setData({
firstName: firstName,
lastName: lastName,
addressStreet: '64472 Brown Street',
addressCity: 'Lindgrenmouth',
addressPostalCode: '50163-2735',
addressState: 'FL',
phoneNumber: '1-916-892-2045 x293',
phoneType: 'Cell',
customerId: 59606
});
// Alternatively, call webchat.renderPopup here. Note that reconnects do not apply to popup chat.
webchat.renderFrame({
containerEl: 'chat-container'
});
};
}
})
.catch(function (err){
console.log(err);
});
});
</script>
<script
id="purecloud-webchat-js"
type="text/javascript"
src="https://apps.mypurecloud.ie/webchat/jsapi-v1.js"
region="eu-west-1"
org-guid="f5285863-142e-47b4-89da-b040fc4fcb24"
deployment-key="fdff4137-95af-49d6-af9c-ca1585cbaffa"
></script>
</body>
</html>
Thanks for any help in advance!
Marian