Skip to content
By using AWS re:Post, you agree to the AWS re:Post Terms of Use
AWS re:Postre:Post
About re:Post

Connect Chat Interface: customizationObject and customStyles does not apply when using customerChatInterfaceUrl

0

Why when I use amazon_connect('customerChatInterfaceUrl', 'amazon-connect-chat-interface.js'); it does not apply the customizations and styling i have declared on 'customizationObject' and 'customStyles'. So far it only changes the height and width of the chat widget.

removing that customerchatinterfaceUrl will make those customizations work as usual. but i have this requirement where i need to use this custom js file while having those customizations intact.

Especially the UI changes and Transcript download are nowhere to be found the source code available in GitHub as of now. Also I have a minor tweak in the code that allows interactive messages to be persistent.

Is there a way to apply these customizations i have while having my current custom JS build? Any help would be appreciated. Thanks!

<!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-asdasdasd');
  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>
Topics
Application IntegrationMachine Learning & AIBusiness Applications
Tags
Amazon Connect
Language
English

asked 10 months ago233 views

1 Answer
-1

When you use amazon_connect('customerChatInterfaceUrl', 'amazon-connect-chat-interface.js'), you're essentially overriding the default chat interface with your custom JavaScript file. This is likely why your customizations defined in customizationObject and customStyles aren't being applied - your custom JS file may not be designed to handle these customization parameters.

The issue is that when you provide a custom interface URL, the widget loads your custom JavaScript implementation instead of the default one. Your custom implementation would need to specifically handle and apply the customization parameters that you're passing.

There are a few approaches you could take to resolve this:

  1. Modify your custom JS file to handle the customization parameters. This would require adding code to process the customizationObject and customStyles parameters in your custom implementation.

  2. If you only need a few minor tweaks to the default interface (like making interactive messages persistent), consider removing the customerChatInterfaceUrl parameter and instead finding alternative ways to achieve those specific modifications.

  3. Create a hybrid approach where you apply your customizations directly in your custom JS file rather than trying to pass them through the Amazon Connect widget initialization.

For features like the transcript download functionality, which requires the header dropdown to be enabled, your custom JS implementation would need to specifically include this functionality. According to the documentation, the download transcript button is located within a dropdown menu in the header, which is enabled by setting header.dropdown: true in the customization object.

If you absolutely need both your custom JS file and the customizations, you might need to modify your custom JS implementation to recognize and apply the customization parameters that are being passed to it.
Sources
Download the transcript for your chat widget in Amazon Connect - Amazon Connect
Additional customizations for your Amazon Connect chat widget - Amazon Connect

answered 10 months ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Relevant content