1.5.0 • Published 4 years ago
@snapcall/agent-app-react v1.5.0
SnapCall Agent App React
The SnapCall Agent App is a react component that will help you integrate SnapCall to receive calls.
This component is using the SnapCall widget API, and need a working react environment like this one.
Installation
npm install @snapcall/agent-app-reactBasic usage
import { AgentApp } from '@snapcall/agent-app-react';
const App = () => (
<AgentApp apiKey="123" agentEmail="sauveur@snapcall.io" />
);Props
AgentApp
| Name | Type | Description |
|---|---|---|
apiKey | string | Your SnapCall API key |
agentEmail | string | The email of the agent receiving calls |
snapcalljsUrl | ?string | A custom URL for the SnapCall Widget SDK script |
onDisconnect | ?() => void | Event triggered when the agent got disconnected |
onReconnect | ?() => void | Event triggered when the agent got reconnected |
onClientLostConnection | ?() => void | Event triggered when the client lost connection |
onClientWeakNetwork | ?() => void | Event triggered when the client network is weak |
onAgentMicrophoneDown | ?() => void | Event triggered when the agent microphone is down |
onAgentMicrophoneUp | ?() => void | Event triggered when the agent microphone is up |
loadingView | ?() => ReactNode | View used for loading |
waitingView | ?({ resetWrapUpTime: Function, wrapUpTimeLeft: number, startOutboundCall: Function, VideoPreview: ReactNode }) => ReactNode | View used when the agent is waiting for a call (ready) |
ringingView | ?({ answer: Function, decline: Function, callID: string, VideoPreview: ReactNode }) => ReactNode | View used when the agent is receiving a call |
inCallView | ?({ hangUp: Function, toggleHold: Function, timer: number, Video: ReactNode }) => ReactNode | View used when the agent is in call |
errorView | ?({ error: string }) => ReactNode | View used when a blocking error occurs |
Waiting view
Parameters available in the WaitingView component:
| Name | Type | Description |
|---|---|---|
resetWrapUpTime | () => void | Alias for snapcallAPI.resetWrapUpTime |
wrapUpTimeLeft | number | Seconds left until wrap up time is over |
startOutboundCall | ({ phoneNumber: string }) => void | Start an outbound call on the provided phone number |
Ringing view
Parameters available in the RingingView component:
| Name | Type | Description |
|---|---|---|
answer | () => void | Function to answer the call |
decline | () => void | Function to decline the call |
callID | string | The ID of the ringing call |
In Call View
Parameters available in the InCallView component:
| Name | Type | Description |
|---|---|---|
hangUp | () => void | Function to hang up the call |
toggleHold | () => void | Function to put the call on hold or to resume it |
timer | number | Seconds since the call started |
Video | ReactNode | See Video component details below |
Video
The Video component is available as a props for the inCallView.
| Name | Type | Description |
|---|---|---|
timer | ?number | If set, will display the call timer on top of the video element |
hideControls | ?boolean | Whether the control buttons should be displayed or not |
Example
import { AgentApp } from '@snapcall/agent-app-react';
const RingingView = ({ answer, decline, callID }) => (
<div>
<p>A call is coming! (ID: {callID})</p>
<button onClick={answer}>Answer</button>
<button onClick={decline}>Decline</button>
</div>
);
const InCallView = ({ hangUp, timer, Video }) => (
<div>
<Video timer={timer} />
<button onClick={hangUp}>Hang up</button>
</div>
);
const App = () => (
<AgentApp
apiKey="123"
agentEmail="sauveur@snapcall.io"
ringingView={RingingView}
inCallView={InCallView}
onClientLostConnection={() => console.log('The client lost the connection!!')}
/>
);