Metrics and logs
Platform integrations
External Integrations
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 :1
// Call this when the user clicks the "Talk now" button, for example.
2
Cohere.makeCall();
Copied!
To adapt the calling popup to your website layout, you can pass in an optional options object to
makeCall.Subscribing to call events
You can also subscribe to the call status to update the widget based on the current state:
1
const listener = (callStatus, attrs) => {
2
// type CallStatus = 'closed' | 'dialing' | 'missed' | 'inCall' | 'ended'
3
// type CallStatusAttrs = { pickupDuration?: number, callDuration?: number } | undefined
4
// See table below for additional details
5
}
6
7
Cohere.addCallStatusListener(listener);
8
9
// You can also unregister a call status listener:
10
Cohere.removeCallStatusListener(listener);
Copied!
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 millisecondsCustom widget example
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)
1
const CohereCallWidget = () => {
2
// Tracks whether the widget is expanded/collapsed
3
const [expanded, setExpanded] = useState(false);
4
5
// Subscribe to the call status
6
const [callStatus, setCallStatus] = useState("closed");
7
useEffect(() => {
8
Cohere.addCallStatusListener(setCallStatus);
9
// Cleanup
10
return () => Cohere.removeCallStatusListener(setCallStatus);
11
}, []);
12
13
14
if (callState === "closed") {
15
return expanded ? (
16
<div>
17
<button
18
onClick={Cohere.makeCall}
19
>
20
Talk to us
21
</button>
22
<button
23
onClick={() => setExpanded(false)}
24
>
25
Hide
26
</button>
27
</div>
28
) : (
29
<button onClick={() => setExpanded(true)}>Need help?</button>
30
);
31
} else {
32
// Don't show widget if call window is open.
33
return null;
34
}
35
};
Copied!
Last modified 2mo ago
Copy link