Hi all,
I tried to implement the web chat popup in a dummy web site for demonstration purposes. I followed explanations of the associated
tutorial. The chat div is populated alright and the messages and the conversation is established with the queue as expected. However the size of the window part where the messages are displayed is very small, only a few pixels. The rest is fine. Is there a way to have this part of the popup window larger ?
Here is a screen copy of the window where a "hello" message is barely seen. My javascript code follows the tutorial explanation:
In the HTML part, there is a modal window, invisible when the page is loaded:
<div id="chatPopupModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div id="chat-container"></div>
</div>
</div>
then a button can trigger the start of the chat session:
<input id="btnStartChat" type="button" value="start chat">
finally, before the end of the body, the javascript call to the PureCloud part:
<script
id="purecloud-webchat-js"
type="text/javascript"
src="https://apps.mypurecloud.ie/webchat/jsapi-v1.js"
region="eu-west-1"
org-guid="(...)"
deployment-key="(...)">
</script>
<script>
var modal = document.getElementById('chatPopupModal');
var btn = document.getElementById('btnStartChat');
var span = document.getElementsByClassName('close')[0];
btn.onclick = function() {
document.getElementById('chat-container').innerHTML = "";
modal.style.display = 'block';
window.PURECLOUD_WEBCHAT_FRAME_CONFIG = {
containerEl: 'chat-container'
};
var chatConfig = {
webchatAppUrl: 'https://apps.mypurecloud.ie/webchat',
webchatServiceUrl: 'https://realtime.mypurecloud.ie:443',
orgGuid: '(...my org guid...)',
orgId: '(...my org id...)',
orgName: '(...my org name...)',
queueName : '(...my queue name...)',
chatNowElement: 'start-purecloud-chat',
logLevel: 'INFO',
reconnectEnabled: true,
reconnectOrigins: [ '(...my dummy web page...)' ]
};
window.ININ.webchat.create(chatConfig).then(function(webchat) {
return webchat.renderFrame({
containerEl: 'chat-container'
}).catch(function(error) {
console.error('Error starting chat');
console.error(error);
});
}).catch(function(error) {
console.error('Error initializing chat');
console.error(error);
});
}
span.onclick = function() {
modal.style.display = 'none';
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = 'none';
}
}
</script>
Has anyone already experienced the same issue and found the solution ?
#Integrations------------------------------
Bastien PUYGRANIER
Orange Applications for Business
------------------------------