Calling API

After setting up Cohere, you can use the Calling API to initiate a Cohere Voice call from the user's end. Once a call is made, agents will be prompted to pick up the call via the Slack integration as well as a browser notification from the Cohere dashboard.

An example custom calling widget

To start a call, simply call makeCall after initializing Cohere:

// Start a call
Cohere.makeCall();

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

You may want to display a widget on the page that displays the status of the call window (or popup, depending on whether your site is a single page application). You can subscribe to the call status to update the widget based on the current state:

const listener = (callStatus) => {
// type CallStatus = 'closed' | 'dialing' | 'missed' | 'inCall'
// Where 'closed' means that the call window is not open,
// 'dialing' means that the call has been made but not yet accepted,
// 'missed' means that an agent did not pick up in time,
// and 'inCall' means that the call has been accepted and is in progress.
}
Cohere.addCallStatusListener(listener);
// You can also unregister a call status listener with
Cohere.removeCallStatusListener(listener);

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>
);
}
};