How to add "Start a Call" and "Download Chat transcript" in Approach 2 Deployment "Approach 2: Host Widget Snippet Integrated Custom UI (S3 Bucket/CDN)"

[saurabhpandey46]

We are following approach 2 "Approach 2: Host Widget Snippet Integrated Custom UI (S3 Bucket/CDN)" for enabling customer chat widget.

Kindly confirm how the customizable Options like "Start a Call" ,"Chat Transcript download" which are available in approach 1 "Approach 1: Pre-built Amazon Connect Hosted Widget Snippet" can be added in Approach

[mrajatttt]

Approach 2 is as similar as Approach 1, it just gives you flexibility to modify the logic/UI of main chat interface.
Regarding options/items like "Start a call" -> it is controlled at widget configuration ref and "Chat Transcript download" is something which is enabled in script ref so as long as you don't hinder the basic chat interface functionalities, you should be good with your custom UI.

[saurabhpandey46]

Hi Rajat
Thank you for informing. When I am following Approach 1 - following is my widget source code. In this case I do get option for "Start a call" and "Chat Transcript download".

---

<script type="text/javascript"> (function(w, d, x, id){ s=d.createElement('script'); s.src='https:///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', ''); amazon_connect("styles", { openChat: { color: "#ffffff", backgroundColor: "#07b62a" }, closeChat: { color: "#ffffff", backgroundColor: "#07b62a" }, }); //amazon_connect('styles', { iconType: 'CHAT_VOICE', openChat: { color: '#ffffff', backgroundColor: '#123456' }, closeChat: { color: '#ffffff', backgroundColor: '#123456'} }); amazon_connect('snippetId', 'QVFJREFIaUpYdjhaUmd2VmlOeXhuZFo4OWJTanhLR3pJYStHc1BvQms1ZnNIczNJNEFIVzJJUDBHbjc4SnArSTBnRUtOME1jQUFBQWJqQnNCZ2txaGtpRzl3MEJCd2FnWHpCZEFnRUFNRmdHQ1NxR1NJYjNEUUVIQVRBZUJnbGdoa2dCWlFNRUFTNHdFUVFNb0FyVjBxcURkbnZRWW11SkFnRVFnQ3Z5R0U5ZnoxdTJhYTBuRUlqSWxHSDJta3VranMrUDFBVW1TcWRZUkVQa28ycXBNQkppT3Qwb213cjQ6Om9JeWViTlpxaFlmOEp1Z2RMM3JvWUQ2cDBRUEIxK3VVbDJYVFdYL3BvYU1MdlRlOS81RUFCQUFOSTZmREI4QVBWQXh1NHBkWGN0RDlLYzVQcnhqQk1zSlpicW5aTWVTQzNVREF0WGo2TFNaQnR4Y3RrbzhCc210NVN4UitJYmxkV2NyV1NuSDZHaGM0YS9zS2VwRHlUaUQvWVFCUUxmTT0='); amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response' ]); amazon_connect('customizationObject', { header: { dropdown: true, dynamicHeader: true, }, transcript: { hideDisplayNames: false, eventNames: { customer: "User", agent: "Webchat Agent", supervisor: "Webchat Supervisor" }, displayIcons: true, iconSources: { botMessage: "imageURL", systemMessage: "imageURL", agentMessage: "imageURL", customerMessage: "imageURL", }, }, composer: { disableEmojiPicker: true, disableCustomerAttachments: true, }, footer: { disabled:false } }); </script>

---

For changing above code to Approach 2 I simply build the code from this repository . Copy generated 'amazon-connect-chat-interface.js' locally in website and add a single line of code as shown below in above Approach 1 code (just before the place where I am configuring 'customizationObject'). I was expecting that I should have still got the option for "Start a call" and "Chat Transcript download" in my customized widget

amazon_connect('customerChatInterfaceUrl', './amazon-connect-chat-interface.js');

I am attaching the two screenshots of Approach 1 and Approach 2 . Kindly inform if I am missing something.

[mrajatttt]

Ah, I might have idea about what this problem is. I will discuss this with my team and update.

[saurabhpandey46]

Hi
Kindly inform if there is any update on this.