Pre-built widget

Question

Pre-built widget

Closed this issue 4 years ago · 22 comments

Nice to see the new chat feature. I've deployed these quickstarts and started playing around. I have a good idea of how the contact flows and the agent integration will work, but the pre-built widget (for the chat customer) is leaving me with some questions.

It is very helpful to have a pre-built widget to use, both to have it ready without having to build one ourselves, and to have an AWS-supported widget that will benefit from further improvements (that I don't have to add). It looks like it was added more as a way for us to get started quickly, and isn't quite in it's final form for public use. Is there a plan at some point to spin this off into a separate repository, or host it on CloudFront to be embedded more easily (kind of like the CCP)?

Here are a few initial points:

On the asyncCustomerChatUX deployment, the widget first has a title of "Chat Demo - This is a demo of interacting with a Lex bot." After the first message it becomes "Chat Demo - This is a demo of a customer chat experience." I don't find either of these messages in the amazon-connect-chat-interface.js file. Maybe the stack deployed from the button in this repo uses a different version of that file.
When using the startChatContactAPI deployment, that presents a title of "Hi there! - This is an example of how customers experience chat on your website." I do find that in the amazon-connect-chat-interface.js file.
The 'chat-test' section of the Connect console gives a nice little floating button with a speech bubble icon. Any plans to build that into the widget interface?
Our ideal solution would be able to provide a small snippet to embed on a client's website, without too much engineering on their end. Any plans for that?

Answer 1 · 2019-11-26T13:29:29.000Z

Thanks for your feedback! I'm glad to hear that the pre-built widget is easy to use. I will address your points:

Good catch! I missed updating the the header in when initializing it. If you look at the index.html file you will see that you can control the values that are in the header and footer to be any html that you want. So I overrode the default header value with my own value.
The message is in the contact flow Play Prompt block.
Good suggestion! I will work on adding it in the coming months.
We don't have any plans to provide a small snippet past what we have at the moment. Have you looked at the section of the README telling you how to add the widget to your website? Is that sufficient?

Answer 2 · 2019-11-26T17:22:27.000Z

Thanks! I'll go into the first two points, just to clarify how the header is being set.

In asyncCustomerChatUX/website/index.html, the first headerConfig shows up on line 255 inside of a connect.ChatInterface.init() with the message "Chat Demo - You can modify this header or use the default". This message is never rendered, I believe because connect.ChatInterface.initiateChat() has not been called.

That happens on line 283 after submitting the form, and it then calls the successHandler(). Inside that handler is another connect.ChatInterface.init() with a headerConfig message of "Chat Demo - This is a demo of interacting with a Lex bot." This is what appears when the chat widget is actually rendered.

If, before an agent connects, the visitor sends a message, it changes to "Hi there! - This is an example of how customers experience chat on your website," which is the default header in amazon-connect-chat-interface.js (on line 72894).

Once an agent is connected, it changes the header to "You are now chatting with..." This is set in the chatSession.incomingItemDecorator() on line 324 (335). In this case, it's not set with headerConfig, but by changing the DOM.

So I guess I'm just wondering exactly how the headerConfig should be used, and more generally what different options there are for all of these methods (chatSession.* and connect.ChatInterface.*).

Great work. I'll end this comment here, but I'm probably going to follow up with some thoughts on 3&4.

Answer 3 · 2019-12-03T17:03:32.000Z

You are right that init() is being called before anything is rendered. You have to call init() before initiateChat() otherwise initiateChat() wont work. The call to init() after the chat was started is not needed. I can remove that line and the header will reflect the initial call to init().

For the agent header message, you can either call init() again to set the header or just replace the DOM as I did here. Both methods work and I was just showing an alternate way to update the header.

In terms of your question, you can update the header at any point using init() or by replacing the dom, but you do need to call init() (with or without the header config) before you actually initiate the chat. We do not currently have documentation on all the functions available. However, chatSession is a wrapper around ChatJS so you can follow that documentation to see what functions are available.

https://github.com/amazon-connect/amazon-connect-chatjs

Answer 4 · 2019-12-13T14:31:21.000Z

Would it be possible to spin the amazon-connect-chat-interface.js into a separate repository? There's a lot going on there, and I imagine you may have a non-minimized or -linted version that would be a little more accessible. Something along the lines of the streams API, with separate source files and a makefile to build.

Answer 5 · 2019-12-19T01:47:40.000Z

Is there a reason the chat widget is only available as a minified JS bundle, versus something more open and configurable?

Answer 6 · 2019-12-20T20:02:23.000Z

cc @efh365

Answer 7 · 2019-12-20T22:39:06.000Z

We are actively working on open sourcing the code for the interface.js file, but we have no timeline on that right now.

Answer 8 · 2019-12-20T23:03:41.000Z

@efh365 Could you at least point to some documentation on connect.ChatInterface? E.g. what parameters the init() and initiateChat() functions take?

Answer 9 · 2020-01-02T13:20:08.000Z

I will work on adding short documentation, but it only takes the parameters used in the code shared:

connect.ChatInterface.init({
containerId: String (div id where the chat widget should go),
headerConfig: {
isHTML: true,
render: () => {
return (<html code here/> )
}
},
footerConfig: {
isHTML: true,
render: () => {
return (<html code here/> )
}
}
);

connect.ChatInterface.initiateChat({
name: String,
username: String,
region: String,
apiGatewayEndpoint: String,
contactAttributes: JSON Object,
contactFlowId: String,
instanceId: String
}, successHandler, failureHandler)

Answer 10 · 2020-01-24T12:38:42.000Z

Hi Experts,
Is there any way to integrate whatsapp with Amazon connect chat? Scenario is Customer will send message via whatsapp and agents will be able to respond from Amazon Connect chat.
Thank you in advance.

Answer 11 · 2020-04-07T20:33:02.000Z

Hi @efh365 ,
Is there a way to render the message coming from the bot side to be shown in multiple messages based on splitting the incoming message on some delimiter. I am trying to achieve this functionality but got to know can only be achieved in UI. Please tell me a way where I can split the incoming message and show it into multiple messages in the Chat widget UI.

Answer 12 · 2020-04-08T07:41:34.000Z

Hi @mschersten , @efh365 , @winzig, @chiraibm, @gunjanteo

How to add a function in the html of the footer?
thanks

footerConfig: {
    isHTML: true,
    render: () => {
    return (`
    <div class="footer-actions">
        <div class="button-wrapper">
            <button id="endChat" class="action-button" type="default" onclick="testEndFunction()">
               btn-testEndFunction
            </button>
        </div>
    </div>
    `)
    }
}

Answer 13 · 2020-04-12T10:04:31.000Z

Hi Experts
I want to integrate React Application with Amazon connect chat. Pls tell the way for doing this integration???

Answer 14 · 2020-04-22T06:55:41.000Z

Thanks for this repo. As this is a paid product is there a ready to go example of this widget that can be dropped straight into a page without any work/hosting. This seem to be described in this page https://aws.amazon.com/blogs/aws/new-omnichannel-contact-center-web-and-mobile-chat-for-amazon-connect/ and illustrated in this this image:

Would like to have this to make this process easier as its seems to be a non-starter in current state.

Here is an example of this from Salesforce, and even this can be way optimized but it better than nothing:

var sfscript = document.createElement('script');
sfscript.setAttribute('src','https://service.force.com/embeddedservice/5.0/esw.min.js');
document.head.appendChild(sfscript);
sfscript.onload = function() {
var initESW = function(gslbBaseURL) {
embedded_svc.settings.displayHelpButton = true;
embedded_svc.settings.language = '';
embedded_svc.settings.enabledFeatures = ['LiveAgent'];
embedded_svc.settings.entryFeature = 'LiveAgent';
embedded_svc.init(
'https://XXXX.my.salesforce.com',
'https://XXX.force.com/liveAgentSetupFlow',
gslbBaseURL,
'XXXX',
'XXXX',
{
baseLiveAgentContentURL: 'https://XXX.salesforceliveagent.com/content',
deploymentId: 'XXX',
buttonId: 'XXX',
baseLiveAgentURL: 'https://XXX.salesforceliveagent.com/chat',
eswLiveAgentDevName: 'XXXX',
isOfflineSupportEnabled: false
}
);
};
if (!window.embedded_svc) {
var s = document.createElement('script');
s.setAttribute('src', 'https://XXXX.my.salesforce.com/embeddedservice/5.0/esw.min.js');
s.onload = function() {
initESW(null);
};
document.body.appendChild(s);
} else {
initESW('https://service.force.com');
}
};

Good example would be how google analytics code works and instructions around it are straight forward, here is a link for this https://developers.google.com/analytics/devguides/collection/analyticsjs

Answer 15 · 2020-05-07T04:27:54.000Z

Agree with @wildone on this one.

Answer 16 · 2020-08-26T02:30:27.000Z

Also, it wasn't immediately obvious, but jQuery is required by the widget - I converted widgetIndex.html to not use it and got an error. Any plans on removing the dependency?

Answer 17 · 2020-09-10T18:08:50.000Z

I will work on adding short documentation, but it only takes the parameters used in the code shared:

connect.ChatInterface.init({
containerId: String (div id where the chat widget should go),
headerConfig: {
isHTML: true,
render: () => {
return (<html code here/> )
}
},
footerConfig: {
isHTML: true,
render: () => {
return (<html code here/> )
}
}
);

connect.ChatInterface.initiateChat({
name: String,
username: String,
region: String,
apiGatewayEndpoint: String,
contactAttributes: JSON Object,
contactFlowId: String,
instanceId: String
}, successHandler, failureHandler)

Would you be open to a community PR to add this information to the Readme?

Answer 18 · 2020-09-30T19:24:29.000Z

@efh365 is there any movement on open sourcing the non-minified JS? We want to adopt this but it is hard to troubleshoot some issues without being able to step through the code.

Answer 19 · 2020-09-30T21:41:21.000Z

We definitely have this feedback and are considering it, but I cannot share more in this forum.

Would you be able to create an AWS Support case for this?

Answer 20 · 2020-10-01T12:57:08.000Z

We have talked to our AWS provided solutions architect about it. Should we also open up a support ticket?

Answer 21 · 2020-10-01T13:48:24.000Z

Yes, please open a support ticket and tell them that it was requested for you to do so from here.

Answer 22 · 2020-10-06T19:09:20.000Z

It seems like the original question was answered. If you have any other questions, please open a new issue.