Skip to main content

Required ccp setup

It's in the works.

Let's first import the CCPContainer React component. This react component initializes the aws ccp and its children components can access ccp features.

Create CCP.tsx file​

info

Every export written with a pascal case from ccp-react is a React component.

CCP.tsx
import { CCPContainer } from "@neev/ccp-react";

export const CCP = () => {
  return (
    <section>
      <CCPContainer
        loggedOutComponent={<div>You are Logged out</div>}
        config={{
          ccpUrl: "https://modular-architecture.my.connect.aws/ccp-v2/",
          loginUrl: "https://modular-architecture.my.connect.aws/ccp-v2/",
          region: "us-east-1",
          loginPopup: true,
        }}
      >
        <div>CCP Logged In!</div>
      </CCPContainer>
    </section>
  );
};

The config parameter here accepts the ccp initCCP options.

Update App.tsx to use CCP and import the amazon connect libraries​

App.tsx
import React from 'react';

import 'amazon-connect-streams';
import 'amazon-connect-chatjs';
import 'amazon-connect-taskjs';

import { CCP } from './CCP';

function App() {
  return (
    <section>
      <CCP />
    </section>
  );
}

export default App;

Try running the app​

yarn start
note

You should initially see "You are Logged out" with a full width iframe window below it. A aws connect login popup should appear, and you should be able to login using the agent credentials. After logging in, the popup window should close and you should see the "CCP Logged In!" message. The Iframe would now be replaced with the aws connect connect control panel window.

This Iframe window is only displayed for development purposes. In production, you would hide the iframe window using the css display: none property.