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 to 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 in 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 gets stuck. It will be displayed in the case details section 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>
)
}
}
}

Human Handoff Example

To set up human handoff, you can use the Botonic library. You can select the relevant example with a very simple use case where a user is transferred to a human agent through the chatbot. The conversation is then displayed as a new case on Hubtype Desk.

In the example below, a route in src/routes.js that triggers the handoff when a user types "handoff" is set up:

src/routes.js

import TransferAgent from './actions/transfer-agent'
import Thanks from './actions/thanks'
export const routes = [
{ path: 'agent', text: /^handoff$/i, action: TransferAgent },
{ path: 'thanks-for-contacting', action: Thanks },
]

Then, in our src/actions/transfer-agent.js file, we need to call the humanHandoff method inside botonicInit. Additionally, we check if the 'Customer Support' queue is open:

src/actions/transfer-agent.js

import React from 'react'
import { Text } from '@botonic/react'
import { getOpenQueues, humanHandOff } from '@botonic/core'
export default class extends React.Component {
static async botonicInit({ input, session, params, lastRoutePath }) {
let openQueues = await getOpenQueues(session)
let isHandOff = false
if (openQueues.queues.indexOf('Customer Support') !== -1) {
await humanHandOff(session, 'Customer Support', {
path: 'thanks-for-contacting',
})
isHandOff = true
}
return { 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: Remember that the full features for getOpenQueues and humanHandOff are only available when the bot is deployed!

Available Options

Here is the list of the different handoff options available.

OptionDescriptionParameterType
withQueueID or name of the queue where the conversation is transferred.queueNameOrIdstring
withOnFinishPathSpecify a payload or a path to trigger the action that the bot will follow after the conversation with the agent has finished.pathstring
withAgentEmailAgent's email.emailstring
withAgentIdAgent's ID.agentIdstring
withNoteLeave a message for other agents to know more about the case.notestring
withCaseInfoGive details about the case.caseInfostring
withShadowingHidie agent's ID and name.shadowingboolean

Note: None of these options are required, as by default, a simple HandOff will be performed to the first queue based on the ID sorted order.

Methods to Request Agent's Information

getOpenQueues

Get the list of all the open queues.

PropertyParametersResponseDescription
queuessession{ queues: string[] }Name of the queues

getAvailableAgentsByQueue

Get the list of all the agents who can attend a case by queue.

PropertyParametersResponseDescription
agentssession, queueId{ agents: string[] }List of the agents' emails and ID of the queues

getAvailableAgents

Get extra information from the agents, sorted by the number of cases that are attending in Hubtype Desk. When creating a new case, it enables the case autoassignment to a specific agent.

PropertyParametersResponseDescription
agentssession{ agents: HubtypeAgentsInfo[] }Agent's information such as email address, number of cases attending, status (available or not) and last message sent

Details

interface HubtypeAgentsInfo {
email: string
attending_count: number
status: string
last_message_sent: string
}

getAgentVacationRanges

Get the agent's vacation information to know their availability.

PropertyParametersResponseDescription
vacation_rangessession, agentParams (only ID or Email){ vacation_ranges: VacationRange[] }Agent's vacation start and end dates (timestamp)

Details

interface VacationRange {
end_date: number // timestamp
id: number
start_date: number // timestamp
}
Was this article useful?