Amazon Connect: In-App Financial Video & Voice Help
We’ll explore how AnyCompany used Amazon Connect, covering architecture, integration, and best practices for personalized, in-app customer experiences.
Published Jun 7, 2025
In today’s digital-first world, clients expect seamless, personalized interactions—especially when it comes to managing their finances. AnyCompany, a forward-thinking financial services provider, is enhancing its digital engagement by enabling clients to connect directly with their assigned financial advisors through its website. Using Amazon Connect’s in-app, web, and video calling capabilities, AnyCompany is providing a streamlined and secure way for clients to initiate voice or video conversations without ever leaving the site.
Powered by Amazon Connect’s fully managed communications widget and SDK, this solution not only simplifies deployment but also integrates contextual data—like client profiles, authentication status, and in-app activity—directly into the advisor’s desktop. This empowers advisors to deliver highly personalized guidance in real-time, improving both customer satisfaction and operational efficiency.
Before diving into this blog, it’s important to have some foundational knowledge to get the most out of the material. This guide is intended for readers with an intermediate understanding of web development and Amazon Connect, but it doesn’t require deep expertise. Here’s what you should be familiar with:
- Basic Web Development Skills: You should have a working knowledge of HTML, CSS, and JavaScript. While experience with modern JavaScript frameworks like React, Angular, or Vue.js is helpful, it’s not required.
- Development Environment Setup: You’ll need a local or cloud-based development environment. This should include a code editor, a web server (like Apache, Nginx, or a tool such as live-server), and any build tools necessary for your chosen framework.
- Amazon Connect Fundamentals: An understanding of core Amazon Connect concepts—such as communication channels, contact flows, communication widgets, queues, and routing profiles—will help you follow along. If you’re new to these, the Amazon Connect Administrator Guide is a great place to start.
- Basic WebRTC Knowledge: Since the in-app audio and video calling features in Amazon Connect are powered by WebRTC (Web Real-Time Communication), a general understanding of how WebRTC works—including signaling, media channels, and peer-to-peer communication—will be useful. You can learn more at WebRTC.org.With these basics in place, you’ll be ready to explore how to implement seamless voice and video experiences directly within your web applications using Amazon Connect.
- Please download the Amazon Connect in-app, web and video calling workshop stack and save the file named web_in_app_calling.yaml to your local machine.
- Please log in to your AWS account with administrator access to the following services: Amazon Connect, Amazon S3, Amazon API Gateway, AWS Lambda, AWS Systems Manager, AWS CloudFormation, and Amazon CloudFront.
- Navigate to the AWS CloudFormation service and select the option to Create a stack.
- Select "Choose an existing template" under "Prepare template."
- Choose Upload a template file under the Specify template section.
- Click on Choose file under Upload a template file, then select the web_in_app_calling.yaml file from the folder where it is saved. Click Next.
- Enter a stack name (e.g., connect_lab_web_calling) and select Next.
- Under Stack failure options, choose Delete all newly created resources. Click Next.
- Check settings and edit if necessary. Click "I acknowledge that AWS CloudFormation might create IAM resources with custom names."
- Select Submit.
- Go to AWS Management Console and select Secrets Manager.
- In the Secrets Manager dashboard, find the secret named "LabConnectRandomPassword" and click on it.
- Click the "Retrieve secret value" button to reveal the password.
- Copy the revealed password and use it to log in to the Amazon Connect instance.
- Log into your Amazon Connect instance from the same AWS region where CloudFormation was deployed using the Access URL and administrator credentials Userid: wsadmin and the password selected above.
- In your Amazon Connect console on the left navigation menu, choose Channels, Communication widgets
- In the page with list of communications widgets, select Add widget.
- Enter a name for your widget, optionally provide a description.
- In the Communication options section, choose how your customers can engage with your widget.
- By default, Chat is enabled. For this exercise, we will disable Chat by deselecting the 'Add chat' option.
- Allow web calling and video for customers. Select the lab-cf-guides-handler for your Web calling contact flow.
- Select Save and continue.
- In the Customize widget screen select Save and continue
- Open a new browser window and go to your Amazon Web Services Admin console.
- Search for CloudFormation, choose the web-in-app-calling-workshop stack under Stacks, and select the Outputs tab.
- Copy the WebsiteURL
- Go back to the Amazon Connect console
- In your communications widget wizard, navigate to the Domain & Security section, under the Add the required domains for the communication widget paste the URL that you have copied from the above step.
- Under Add security for your communications widget requests. Choose No - I will skip this step.
- Select Save and continue.
- The communications widget has been created. To include the widget on your website pages, copy the HTML code snippet by clicking Copy script.
Add the communication widget to your website
- Navigate to your AWS Console and search for S3. Click on S3 to navigate to the AWS S3 Console.
- From the list of buckets select the S3 bucket name starting with lab-vvcall-website
- Select the object index.html and download it onto your local machine.
- Edit the downloaded file using a text editor of your choice, and paste the copied script code below the line 62 in your index.html file.
- Save the modified index.html file, and then upload it back to the S3 bucket whose name starts with lab-vvcall-website
- Open the website from the URL copied from the CloudFormation stack.
- You can test the web calling experience using the newly added communications widget on the bottom right corner. (hint: Try using different browsers as the communications widget sometimes does not appear in Chrome.)
- Ensure that an agent is logged into the Amazon Connect Agent Workspace using the credentials UserId: wsagent and the password from the session above, and that the agent is in an available state.
- Click on the communications widget icon on your website to launch a web call with the agent.
- To test the video call functionality, please click on Start Video in your communication widget on the website from the customer side.
In this session, you will add a new HTML page with a web form to your website. This form will pass customer details to your communications widget, allowing the portfolio specialist to see the context and provide a personalized experience.
Configure your website to include a customer form.
- Click to Download the zip file lab-assets.zip containing the workshop assets.
- Unzip the lab-assets.zip file in your local machine.
- From the files, choose index2.html file
- Edit index2.html file using your favorite text editor
- Insert the code script from your communications widget into the index2.html page, remove the script tags from the copied snippet, and save the file.
- Upload updated index2.html page into the bucket starting with lab-vvcall-website
Launch the website using the URL
- To fetch the URL, navigate to your AWS Management Console
- Search for CloudFormation in the search bar.
- Navigate to the stack web-in-app-calling and select the outputs tab.
- Copy the value from the WebsiteURL
- Open a new browser window and paste the URL ending with /index2.html to launch your website.
- The new page will now contain a form
- Fill the form with your name and email address, reason for contact (ensure the email address contains "@") and choose Submit
- Once the form is submitted, click the phone icon located at the bottom right corner of the webpage to initiate a call.
- Log into your Amazon Connect Agent Workspace instance using another browser window with the credentials UserId: wsagent and Password: Use the password chosen from the previous session.
Congratulations !!!
You have successfully configured the method for transferring customer details to your agent through a communications widget on your website.