Human Handoff


View on Github


Objective

This template shows a very simple use case where a user is transferred to a human agent through the chatbot. The conversation will appear as a new case on Hubtype Desk.

Example

In this example we've set up a route in src/routes.js that triggers the handoff when a user types "handoff":

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!

The fallback content to display on prerendering