Pre-built widget about amazon-connect-chat-ui-examples HOT 22 CLOSED

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

from amazon-connect-chat-ui-examples.

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

from amazon-connect-chat-ui-examples.

Agree with @wildone on this one.

from amazon-connect-chat-ui-examples.

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

1. 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.
2. The message is in the contact flow Play Prompt block.
3. Good suggestion! I will work on adding it in the coming months.
4. 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?

from amazon-connect-chat-ui-examples.

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.

from amazon-connect-chat-ui-examples.

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

from amazon-connect-chat-ui-examples.

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.

from amazon-connect-chat-ui-examples.

cc @efh365

from amazon-connect-chat-ui-examples.

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

from amazon-connect-chat-ui-examples.

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

from amazon-connect-chat-ui-examples.

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)

from amazon-connect-chat-ui-examples.

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.

from amazon-connect-chat-ui-examples.

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.

from amazon-connect-chat-ui-examples.

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>
    `)
    }
}

from amazon-connect-chat-ui-examples.

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

from amazon-connect-chat-ui-examples.

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?

from amazon-connect-chat-ui-examples.

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?

from amazon-connect-chat-ui-examples.

@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.

from amazon-connect-chat-ui-examples.

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?

from amazon-connect-chat-ui-examples.

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

from amazon-connect-chat-ui-examples.

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

from amazon-connect-chat-ui-examples.

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

from amazon-connect-chat-ui-examples.