# 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
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://alhena.gitbook.io/docs/developer-reference/website-sdk/examples/human-handoff-widget.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.