Connect LabAmazon Connect study

CCP and workspace

Streams is the supported way to embed the CCP

Learn it in 5 minutes

HTML

About five minutes of reading

If you must hide the CCP inside another app, use amazon-connect-streams. Do not scrape the page.

The library initializes a CCP iframe, then emits agent and contact events. You can run it media-less, which is useful for a supervisor wall and useless as a phone. Softphone options have to be turned on for audio, and the host page has to be on the approved origin.

The GitHub repository is amazon-connect/amazon-connect-streams. Read its event list. Login, contact incoming, connected, and ended are the ones a screen pop needs.

  • Init once. A second init on navigation is a classic bug.
  • Destroy the session on sign-out.
  • Do not store the agent's password in your app. Use SAML.
  • Media still needs UDP 3478. The library does not tunnel it.

Number on this page: Library streams. amazon-connect-streams

Visual

HTML
Streams is the supported way to embed the CCP
Diagram SVGDiagram PNGDiagram HTMLFlow SVGFlow PNGFlow HTML

Picture from this room.

Worked example

HTML
  1. Init. With the CCP URL.
  2. Subscribe. Contact events.
  3. Pop. On connecting.
  4. Softphone. Or explicitly media-less.

What usually goes wrong: An iframe of the admin website as a shortcut.

Quiz

HTML

Question 1

Which term matches this description? The amazon-connect-streams library. It embeds or replaces the CCP and listens to agent and contact events.

Show the cited answer

The amazon-connect-streams library. It embeds or replaces the CCP and listens to agent and contact events. The term is Streams API.

GitHub - amazon-connect/amazon-connect-streams: Amazon Connect Streams - a browser-based contact center integration API, typically with CRM systems. ยท GitHub community. last checked 2026-10

Question 3

Which term matches this description? Supported browsers only. A locked-down browser without WebRTC permissions fails closed.

Show the cited answer

Supported browsers only. A locked-down browser without WebRTC permissions fails closed. The term is The CCP is a web app with a telephone inside (1).

How Contact Control Panel (CCP) uses WebRTC - Amazon Connect Customer AWS docs. last checked 2026-10

Sources

HTML

GitHub - amazon-connect/amazon-connect-streams: Amazon Connect Streams - a browser-based contact center integration API, typically with CRM systems. ยท GitHub community. last checked 2026-10

The prose is a study paraphrase. The link is the source of the facts.

Ecosystem

HTML

Glossary

  • CCP Contact Control Panel. The browser phone and contact UI the agent uses.
  • Agent workspace The fuller desktop around the CCP: profiles, cases, step-by-step views, and third-party apps.
  • Streams API The amazon-connect-streams library. It embeds or replaces the CCP and listens to agent and contact events.
  • Softphone media The WebRTC audio path. It needs outbound UDP 3478 to the Regional TurnNlb domain.

Mind map

Open the CCP and workspace mind map

Sister technologies

If UDP 3478 is blocked, the agent is signed in and cannot hear the customer.

Config and troubleshooting

An iframe of the admin website as a shortcut.

A custom CCP using amazon-connect-streams has to be served from an origin you approve on the instance. The softphone still needs UDP 3478. Approving the origin does not open that port.

ApprovedOrigin Streams

CloudFormation study snippet
Resources:
  CcpOrigin:
    Type: AWS::Connect::ApprovedOrigin
    Properties:
      InstanceId: !GetAtt CampusInstance.Id
      Origin: https://ccp.example.com

Integration map

Join records on ContactId. The integration map room lists the seams.

Cross-platform bridges

A CUCM calling search space is not a routing profile, but the profile is the closest idea of 'who can receive what'. A partition is not a Connect object. A UCCX CSQ and a UCCE skill group map to a queue. Precision steps map to routing criteria. A script, an Architect flow, and an Avaya vector map to a contact flow.

Open the mapping room

Future hooks

Hooks you can adopt later: EventBridge contact events, the CTR stream, agent events, Kinesis Video, Customer Profiles events, Cases, Show view, data tables, External Tool, and the flow language JSON in your pipeline. Live Sync and Agentic CX are the 2026 hooks for guided and agentic experiences.

Sources and go deeper

sources.json