Hi, i got a problem for implementing widget chat that said the error was ReferenceError, it seems like the customPlugin from CXBus not detected because of the Wordpress Elementor that we use for our landing page website. In the wordpress elementor after the source code for widget chat implemented there's always break tag (<br>) and some other unnecessary tags in the widget html that we used as. When we tested the code for widget without the wordpress it worked just fine. Does anyone has a experience and know how to fix this?
Thanks in advance for your attention.
This is my html code for the widget :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Inline css untuk button livechat -->
<style>
.advanced {
position: fixed;
bottom: 23px;
right: 55px;
background-color: #FF0000;
border: none;
/* color: white; */
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
border-radius: 50%;
box-shadow: 0 9px #b30000;
}
.advanced:hover {background-color: #ff3333}
.advanced:active {
background-color: #ff3333;
box-shadow: 0 5px #ff0000;
transform: translateY(4px);
}
.advanced svg{
color: white;
}
</style>
<!-- akhir inline css -->
<title>Livechat AOT</title>
</head>
<body>
<!--Javascript integrasi Genesys Cloud-->
<script type="text/javascript">
window._genesys = {
widgets: {
main: {
theme: 'light',
},
webchat: {
charCountEnabled: true,
transport: {
type: 'purecloud-v2-sockets',
dataURL: 'https://api.mypurecloud.jp',
deploymentKey : 'c5400672-8f7b-40ec-a885-70ce64bb896a',
orgGuid : '94689a3f-2f13-4209-9dc8-a929b1b30357',
interactionData: {
routing: {
targetType: 'QUEUE',
targetAddress: 'KBNI',
priority: 2
}
}
},
userData: {
"addressStreet": "",
"addressCity": "",
"addressPostalCode": "",
"addressState": "",
"phoneNumber": "",
"customField1Label": "",
"customField1": "",
"customField2Label": "",
"customField2": "",
"customField3Label": "",
"customField3": ""
}
}
}
};
</script>
<!-- Load CXBus and the widgets-core plugin -->
<script src="https://apps.mypurecloud.com/widgets/9.0/cxbus.min.js" onload="javascript:CXBus.configure({debug:false,pluginsPath:'https://apps.mypurecloud.jp/widgets/9.0/plugins/'}); CXBus.loadPlugin('widgets-core');"></script>
<!-- Optional: Use CXBus to create plugins, subscribe to events, or call commands -->
<script type="text/javascript">
const customPlugin = CXBus.registerPlugin('Custom');
customPlugin.subscribe('WebChatService.started', function (e) {
console.log('Chat started', e);
});
customPlugin.subscribe('WebChatService.ended', function (e) {
console.log('Chat ended', e);
});
</script>
<script type="text/javascript">
function getAdvancedConfig() {
return {
form: {
autoSubmit: false,
firstname: '',
email: '',
},
formJSON: {
wrapper: '<table></table>',
inputs: [
// Default fields
{
id: 'cx_webchat_form_firstname',
name: 'firstname',
maxlength: '100',
placeholder: '',
label: 'Nama Lengkap',
validateWhileTyping: true, // default is false
validate: function(event, form, input, label, $, CXBus, Common){
if(input && input.val() && (input.val()).length >= 4){
return true;
} else {
return false;
}
}
},
{
id: 'cx_webchat_form_email',
name: 'email',
maxlength: '100',
placeholder: '',
label: 'Email',
validateWhileTyping: true, // default is false
validate: function(event, form, input, label, $, CXBus, Common){
function validateEmail($email) {
var emailReg = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return emailReg.test( $email );
}
if(input && input.val() && validateEmail(input.val())){
return true;
} else {
return false;
}
}
},
// Custom Fields
{
id: 'custom_field_1',
name: 'customField1',
maxlength: '100',
placeholder: '',
label: 'Nomor HP',
value: '',
validateWhileTyping: true, // default is false
validate: function(event, form, input, label, $, CXBus, Common){
function validateNomorHP($nomorHP) {
var nomorhpReg = /^[0-9]*$/;
return nomorhpReg.test( $nomorHP );
}
if(input && input.val() && validateNomorHP(input.val())){
return true;
} else {
return false;
}
}
}
]
}
};
}
</script>
<!-- Button Livechat -->
<a class="advanced" type="button" id="chat-button" onclick="customPlugin.command('WebChat.open', getAdvancedConfig());">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chat" viewBox="0 0 16 16">
<path d="M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z"/>
</svg>
</a>
</body>
</html>
#Implementation#Integrations------------------------------
Muhammad Fahrur Rizky
PT Solusi Tiga Selaras
------------------------------