Skip to content

Latest commit

 

History

History
100 lines (64 loc) · 7.79 KB

HostedWidgetVSCustomBuilderSolution.md

File metadata and controls

100 lines (64 loc) · 7.79 KB

Hosted Widget vs Custom Builder Solution Documentation

Overview

Amazon Connect is an omni-channel contact center solution which includes support for chat (real time messaging between business and end-customer). An out-of-box fully managed/hosted communications widget is provided for the customer chat UI. This enables customer to copy/paste a simple code snippet to set up in minutes.

Alternatively, AWS Customer can also build a custom customer-facing chat UI with ChatJS (an open-source JavaScript library published to npm). This is a wrapper around the AWS Javascript SDK, which calls the Amazon Connect Participant Service Public APIs. The hosted widget chat interface code has also been open sourced, and is available for customer to fork to avoid re-writing boilerplate code.

AWS Customers have multiple options for integrating chat into their contact center depending on use-case and size of the business.

Hosted Widget

Simple copy/paste snippet solution to render customer chat interface on your website, fully hosted and managed by Amazon Connect. Always receive the latest features without redeploying.

Prerequisites

  • An Amazon Connect Instance (guide)

Usage:

<script type="text/javascript">
  (function(w,d,x,id){s=d.createElement('script');s.src='https://asdf5slbvr0vu.cloudfront.net/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','asdf-92ac-asdf-adfe-asdf0c3bfd');

  amazon_connect('styles', { openChat: { color: '#ffffff', backgroundColor: '#07b62a'}, closeChat: { color: '#ffffff', backgroundColor: '#07b62a'} });
  amazon_connect('snippetId', 'asdf1234asdf1234adsf1234=');
  amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown' ]);
</script>

"Hosted Widget Diagram"

Features

For latest features, refer to Admin Guide documentation along with #Features in README

  • Theme Configuration
  • Branding (logo, naming)
  • Message Receipts
  • Rich Text Formatting
  • Interactive Messages (Lex Bot)
  • File Attachments
  • Browser Refresh (reconnect to ongoing chat)
  • Persistent Chat (resume previous chat)
  • Custom Chat Duration (configurable duration of the chat session (auto-timeout))
  • Browser Notifications
  • Passing Attribute to Contact Flow

Build Your Own Widget

Customer builder solutions for a completely customized chat interface application.

"Build Your Own Widget"

Prerequisites

  • An Amazon Connect Instance (guide)

  • An Amazon Connect Contact Flow, ready to receive chat contacts (guide)

  • Custom Amazon Connect Chat backend (guide) Your chat application must make a call to the StartChatContact Public API to initiate a chat. This is provided in the AWS-SDK but requires credentials (not recommended in browser). We recommend deploying your own chat backend with the StartChatContact CFN template (as a proxy to Amazon Connect).

    After creating a chat, your application will call the ParticipantService Public API during the chat session, which can be called from the browser (without credentials)

Options

Several approaches are available for chat interface custom builders:

  1. Build chat application/widget from scratch with AWS-SDK

Description: A low-level implementation using the AWS SDK, available in multiple languages.

  1. Build chat application/widget from ChatJS (wrapper around @aws-sdk/client-connectparticipant)

Description: Use the Javascript npm library to build on top of basic chat functionality

  1. Fork the open-source amazon-connect-chat-interface.js to build custom chat application/widget

Description: Clone the pre-built chat application code and fully customize the chat interface.

Features

Related

The following open source code may also be helpful when building a custom widget: