> For the complete documentation index, see [llms.txt](https://alhena.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://alhena.gitbook.io/docs/developer-reference/website-sdk/examples/human-handoff-widget.md).
# Human Handoff Widget
This example shows how to close the Alhena widget and load an alternative support solution when a conversation needs human attention. Use this when you want Alhena AI to handle initial inquiries but transfer to your existing helpdesk widget for human support.
## What You'll Learn
* Listen for `ticket:agent_handoff_initiated` event
* Close the Alhena widget gracefully
* Load an external support widget dynamically
## Use Case
Many companies use Alhena AI for first-line support but have an existing helpdesk (Zendesk, Freshworks, Intercom) for human agents. This pattern lets you:
1. Use Alhena for AI-powered responses
2. Detect when a human is needed
3. Seamlessly switch to your helpdesk's native widget
## Prerequisites
* Alhena SDK installed on your website
* External helpdesk account (Zendesk, Freshworks, etc.)
* External widget snippet available
## Code Example
```html
Human Handoff Example
Customer Support
```
## Platform-Specific Examples
### Zendesk
```javascript
window.gleenWidget.on('ticket:agent_handoff_initiated', function() {
window.gleenWidget.closeTicket();
window.gleenWidget.close();
// Load Zendesk widget
var script = document.createElement('script');
script.id = 'ze-snippet';
script.src = 'https://static.zdassets.com/ekr/snippet.js?key=YOUR_KEY';
document.body.appendChild(script);
});
```
### Intercom
```javascript
window.gleenWidget.on('ticket:agent_handoff_initiated', function() {
window.gleenWidget.closeTicket();
window.gleenWidget.close();
// Initialize Intercom
window.intercomSettings = {
api_base: 'https://api-iam.intercom.io',
app_id: 'YOUR_APP_ID'
};
var script = document.createElement('script');
script.src = 'https://widget.intercom.io/widget/YOUR_APP_ID';
script.async = true;
document.body.appendChild(script);
// Open Intercom when loaded
script.onload = function() {
if (window.Intercom) {
window.Intercom('show');
}
};
});
```
### Freshdesk
```javascript
window.gleenWidget.on('ticket:agent_handoff_initiated', function() {
window.gleenWidget.closeTicket();
window.gleenWidget.close();
// Load Freshdesk widget
window.fwSettings = {
widget_id: 123456789,
locale: 'en'
};
var script = document.createElement('script');
script.src = 'https://widget.freshworks.com/widgets/123456789.js';
script.async = true;
document.body.appendChild(script);
// Open widget when loaded
script.onload = function() {
if (window.FreshworksWidget) {
window.FreshworksWidget('open');
}
};
});
```
### HubSpot
```javascript
window.gleenWidget.on('ticket:agent_handoff_initiated', function() {
window.gleenWidget.closeTicket();
window.gleenWidget.close();
// Load HubSpot chat
var script = document.createElement('script');
script.src = '//js.hs-scripts.com/YOUR_HUB_ID.js';
script.async = true;
script.defer = true;
document.body.appendChild(script);
});
```
## How It Works
1. **User requests human help**: When the AI determines human help is needed (user asked for a person, AI couldn't answer, etc.), the `ticket:agent_handoff_initiated` event fires
2. **Close Alhena**: We close the current ticket and hide the Alhena widget
3. **Load external widget**: Dynamically inject the external helpdesk's script
4. **Open external widget**: Optionally auto-open the new widget
## Event Timing
There are two related events:
| Event | When It Fires | Use Case |
| -------------------------------- | -------------------------------------------------------- | ------------------------- |
| `ticket:agent_handoff_initiated` | AI decides human help is needed, before email collection | Switch widgets early |
| `ticket:agent_handoff` | After user submits email, ticket created in helpdesk | Switch after confirmation |
Use `ticket:agent_handoff_initiated` if you want to switch widgets before the user enters their email (they'll enter it in the external widget instead).
Use `ticket:agent_handoff` if you want Alhena to collect the email first, then switch.
## Considerations
* **Script caching**: External widget scripts may already be cached, so loading is usually fast
* **User context**: The external widget won't have the Alhena conversation history
* **Analytics**: Track this handoff event in your analytics to measure AI deflection rate
## Related
* [Events Reference](/docs/developer-reference/website-sdk/events.md#ticket-agent_handoff_initiated) - Full event documentation
* [Auto-Close After Handoff](/docs/developer-reference/website-sdk/examples/auto-close-after-handoff.md) - Close widget without switching
* [A/B Testing](/docs/developer-reference/website-sdk/ab-testing.md) - Compare Alhena vs other solutions