Calling API

If you'd like to create your own Cohere widget or programmatically start a call with your own logic, you can use our calling API!

An example custom calling widget

To start a call from your widget, use makeCall :

// Call this when the user clicks the "Talk now" button, for example.
Cohere.makeCall();

To adapt the calling popup to your website layout, you can pass in an optional options object to makeCall.

You can also subscribe to the call status to update the widget based on the current state:

const listener = (callStatus, attrs) => {
// type CallStatus = 'closed' | 'dialing' | 'missed' | 'inCall' | 'ended'
// type CallStatusAttrs = { pickupDuration?: number, callDuration?: number } | undefined
// See table below for additional details
}
Cohere.addCallStatusListener(listener);
// You can also unregister a call status listener:
Cohere.removeCallStatusListener(listener);

Call Status

Description

Attributes

"closed"

The call window is not currently open

"dialing"

The call has been made but has not yet been picked up

"missed"

Nobody was able to pick up the call in time

"inCall"

The call has been accepted and is currently in progress

{ pickupDuration: number } – How long it took for an agent to pick up in milliseconds

"ended"

The call has ended after being picked up

{ callDuration: number } – How long the call lasted in milliseconds

Here's an example React calling widget component that:

  • Has an expanded and collapsed state

  • Initiates calls and renders a widget based on the call status

  • Dispatches tracking events for when a call is made, picked up, or missed (the example API is for Mixpanel)

const CohereCallWidget = () => {
// Tracks whether the widget is expanded/collapsed
const [expanded, setExpanded] = useState(false);
// Subscribe to the call status
const [callStatus, setCallStatus] = useState("closed");
useEffect(() => {
Cohere.addCallStatusListener(setCallStatus);
// Cleanup
return () => Cohere.removeCallStatusListener(listener);
}, []);
if (callState === "closed") {
return expanded ? (
<button
onClick={() => {
Cohere.makeCall();
}}
>
Talk to us
</button>
) : (
<button onClick={() => setExpanded(true)}>Need help?</button>
);
} else {
return (
<button onClick={() => Cohere.focusCallWindow()}>Return to call</button>
);
}
};