Human Handoff

As bots aren’t perfect, we allow the transfer of a conversation to an agent.

Configuration

To configure the transfer, you must provide the session parameters and then the queueId and onFinish, which are optional, but recommended.

The queueId is the id of the queue where you want to transfer the conversation. If a queue with that id doesn't exist, it will transfer the chat into a random open queue.

The onFinish allows you to specify a payload or a path in order to trigger the action that the bot will follow after the conversation with the agent has finished.

Queue

Here’s a simple example of how to transfer the conversation a queue with ID HUBTYPE_DESK_QUEUE_ID. Once the human agent has solved the case, the bot will receive the payload endConversation which will trigger the action SayGoodbye.

src/routes.js

import SayGoodbye from './actions/say-goodbye'
import HumanHandoff from './actions/human-handoff.js'
export const routes = [
{ payload: 'endConversation', action: SayGoodbye },
{ text: 'handoff', action: HumanHandoff },
]

Note: The conversation is transferred to Hubtype Desk, so the queueId must be the id of a queue inside Hubtype Desk. Contact us if you need to integrate with another CRM. You can find the HUBTYPE_DESK_QUEUE_ID by checking the URL https://app.hubtype.com/organization/queues/{HUBTYPE_DESK_QUEUE_ID}/messengers under Edit Queue tab.

./actions/handoff-example.js

import React from 'react'
import { Text } from '@botonic/react'
import { humanHandOff } from '@botonic/core'
export default class extends React.Component {
static async botonicInit({ input, session, params, lastRoutePath }) {
await humanHandOff(session, 'HUBTYPE_DESK_QUEUE_ID', {
payload: 'endConversation',
})
}
render() {
return (
<Text>
Thanks for contacting us! One of our agents will take the conversation
as soon as possible.
</Text>
)
}
}

Note: If you run withAgentId with the agent ID or withAgentEmail with the agent's Hubtype Desk e-mail, without passing a queue parameter, the handoff is automatically done to the first queue assigned to the agent.

Open Queues

You can get an array of all the open queues of your Hubtype Desk with the simple Botonic function getOpenQueues().

./actions/handoff-queue-example.js

import React from 'react'
import { Text } from '@botonic/react'
import { getOpenQueues } from '@botonic/core'
export default class extends React.Component {
static async botonicInit({ input, session, params, lastRoutePath }) {
let openQueues = await getOpenQueues(session)
return { openQueues }
}
render() {
if (!this.props.openQueues.queues.length) {
return <Text>There are no open queues</Text>
} else {
return <Text>Open queues: {this.props.openQueues.queues.join(',')}</Text>
}
}
}

Note: Both features are only available when the bot is deployed. When you are in development mode (botonic serve command), you can press the button 'Continue' in order to emulate the resolution of a case.

Case Handling

Each time a Human Handoff is done a new case will be created in Hubtype's Desk. When creating a new case you can autoassign this case to a specific agent using getAvailableAgents as shown below. You can also send relevant information to Hubtype Desk by specifying the optional parameter with caseInfo and note.

  • caseInfo can contain, as an example, the name of the action where the user get stucked. Will be displayed in case details in Hubtype Desk.

  • note can be used to leave a message for other agents who don't have constancy of the case.

import React from 'react'
import { Text } from '@botonic/react'
import { getAvailableAgentsByQueue, humanHandOff } from '@botonic/core'
export default class extends React.Component {
static async botonicInit({ input, session, params, lastRoutePath }) {
let isHandoff = false
let agentEmail = ''
try {
agentEmail = (
await getAvailableAgentsByQueue(session, 'HUBTYPE_DESK_QUEUE_ID')
).filter(agent => agent == 'agent-name@hubtype.com')[0]
await humanHandOff(
session,
'HUBTYPE_DESK_QUEUE_ID',
{ path: 'thanks-for-contacting' },
agentEmail,
{
caseInfo:
'This is some case information that will be available in the new created case',
note:
'This is a note that will be attached to the case as a reminder',
}
)
isHandoff = true
} catch (e) {}
return { isHandOff: isHandoff }
}
render() {
if (this.props.isHandOff) {
return <Text>You are being transferred to an agent!</Text>
} else {
return (
<Text>
Sorry, right now we can't serve you... Please contact us later!
</Text>
)
}
}
}

Note: For getting the agents with extra information, sorted by the number of cases that are attending in Hubtype, you can use getAvailableAgents.

The fallback content to display on prerendering