customizationObject and customStyles does not apply when using customerChatInterfaceUrl #326
Description
So I have a custom js with very minor tweaks in code and we still want to apply UI changes to our chat widget but when I use this code amazon_connect('customerChatInterfaceUrl', 'amazon-connect-chat-interface.js'); it does not apply the UI changes i made using amazon_connect('customizationObject' and amazon_connect('customStyles'
Is there a way we can customize the widget through this way?
if so, what I might be missing? if not where/how can we customize the UI?
Also it seems that I can't find transcript download button as well as the dropdown that is primarily available through the code below...
Thanks Any help would be appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
(function(w, d, x, id){
s=d.createElement('script');
s.src='https:/INSTANCE_NAME.my.connect.aws/connectwidget/static/amazon-connect-chat-interface-client.js';
s.async=1;
s.id=id;
d.getElementsByTagName('head')[0].appendChild(s);
w[x] = w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
})(window, document, 'amazon_connect', '65630fdf-XXXXXX');
amazon_connect('customerChatInterfaceUrl', 'amazon-connect-chat-interface.js');
amazon_connect('styles', { iconType: 'CHAT', openChat: { color: '#ffffff', backgroundColor: '#7ee0d6' }, closeChat: { color: '#ffffff', backgroundColor: '#7ee0d6'} });
amazon_connect('snippetId', 'QVFJREFIZ0JXUSAMPLETESTSNIPPETID');
amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response' ]);
amazon_connect('mockLexBotTyping', true);
amazon_connect('customizationObject', {
header: {
dropdown: true,
dynamicHeader: true,
},
transcript: {
hideDisplayNames: false,
eventNames: {
customer: "User",
},
eventMessages: {
participantJoined: "{name} has joined the chat",
participantDisconnect: "",
participantLeft: "{name} has dropped",
participantIdle: "{name}, are you still there?",
participantReturned: "",
chatEnded: "Chat ended",
},
displayIcons: true,
iconSources: {
botMessage: "https://www.shutterstock.com/image-vector/chat-bot-icon-virtual-smart-600nw-2478937553.jpg",
systemMessage: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJ3zuiCMftWe1kDVDUBIroYM1hy_mlAdMJmQ&s",
agentMessage: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJ3zuiCMftWe1kDVDUBIroYM1hy_mlAdMJmQ&s",
customerMessage: "https://cdn3d.iconscout.com/3d/premium/thumb/user-chat-6896154-5656067.png",
},
},
composer: {
disableEmojiPicker: true,
disableCustomerAttachments: true,
},
footer: {
disabled:true,
skipCloseChatButton: false,
},
endChat: {
enableConfirmationDialog: true,
confirmationDialogText: {
title: "End Chat",
message: "Are you sure you want to end this chat?",
confirmButtonText: "End Chat",
cancelButtonText: "Cancel",
},
},
attachment: {
rejectedErrorMessage: "Custom Error Message: Files cannot exceed 15 MB." //this is customizable attribute
}
});
amazon_connect('customStyles', {
global: {
frameWidth: '400px',
frameHeight: '700px',
textColor: '#2c3e50',
fontSize: '16px',
footerHeight: '100px',
typeface: "'AmazonEmber-Light', sans-serif",
customTypefaceStylesheetUrl: "https://ds6yc8t7pnx74.cloudfront.net/etc.clientlibs/developer-portal/clientlibs/main/css/resources/fonts/AmazonEmber_Lt.ttf",
headerHeight: '120px',
},
header: {
headerTextColor: '#ffffff',
headerBackgroundColor: '#0d6efd', // Bootstrap blue
},
transcript: {
messageFontSize: '14px',
messageTextColor: '#2c3e50',
widgetBackgroundColor: '#f8f9fa', // light gray
agentMessageTextColor: '#212529',
systemMessageTextColor: '#6c757d',
customerMessageTextColor: '#ffffff',
agentChatBubbleColor: '#e9ecef',
systemChatBubbleColor: '#dee2e6',
customerChatBubbleColor: '#0d6efd',
},
footer: {
buttonFontSize: '16px',
buttonTextColor: '#ffffff',
buttonBorderColor: '#0d6efd',
buttonBackgroundColor: '#0d6efd',
footerBackgroundColor: '#ffffff',
startCallButtonTextColor: '#ffffff',
startChatButtonBorderColor: '#0d6efd',
startCallButtonBackgroundColor: '#198754',
},
logo: {
logoMaxHeight: '50px',
logoMaxWidth: '80%',
},
composer: {
fontSize: '16px',
},
fullscreenMode: true
});
</script>
</body>
</html>