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.

[spenlep-amzn]

Hi @saurabhpandey46,

Apologies for the confusion..

At this time, we do not have an official plan to open-source the "Start Call" feature. You'll have to manually call the StartWebRTCContact to acheive this.

I'll do my best to ping this thread if I have any updates, but we do not have an ETA at this time.

I've also updated the wording in the documentation to be more clear. Linking: #306

---

To re-state what is detailed in issue #275,

pre-built Hosted Widget Chat Interface (Screenshot #1) is a different code base than this Github Chat Interface (Screenshot #2)

We try to release the newest feature, but we do not guarantee the latest internal features are available on GitHub. Github Chat Interface is provided as-is, and it's inteded to be a fully-functional boilerplate for an Amazon Connect Chat UI. Although it would be ideal, it is hard to maintain feature parity for both applications

To clarify, "Approach 2" allows you to fully customize the chat interface by forking this GitHub repo. It is not a one-to-one mirror of the [pre-built Hosted Widget] UI and features.

Regarding downloadTranscript logic, please see #275.

I'm going to resolve this issue now as this is expected behavior.

Thanks,
Spencer