@snapcall/agent-app-react

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-react

Basic usage

import { AgentApp } from '@snapcall/agent-app-react';

const App = () => (
  <AgentApp apiKey="123" agentEmail="[e-mail]" />
);

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="[e-mail]"
    ringingView={RingingView}
    inCallView={InCallView}
    onClientLostConnection={() => console.log('The client lost the connection!!')}
  />
);