Nearsighted Penguin March

    This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at for more info.

    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    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.


    npm install @snapcall_/agent-app-react

    Basic usage

    import { AgentApp } from '@snapcall/agent-app-react';
    const App = () => (
      <AgentApp apiKey="123" agentEmail="" />



    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 }) => ReactNode View used when the agent is waiting for a call (ready)
    ringingView ?({ answer: Function, decline: Function, callID: string }) => 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

    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


    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


    import { AgentApp } from '@snapcall/agent-app-react';
    const RingingView = ({ answer, decline, callID }) => (
        <p>A call is coming! (ID: {callID})</p>
        <button onClick={answer}>Answer</button>
        <button onClick={decline}>Decline</button>
    const InCallView = ({ hangUp, timer, Video }) => (
        <Video timer={timer} />
        <button onClick={hangUp}>Hang up</button>
    const App = () => (
        onClientLostConnection={() => console.log('The client lost the connection!!')}




    npm i @snapcall_/agent-app-react

    DownloadsWeekly Downloads






    Unpacked Size

    221 kB

    Total Files


    Last publish


    • jballanger
    • pnoyelle
    • tom2bec