Human Handoff Widget

Switch from Alhena to another support widget (Freshworks, Zendesk, Intercom, etc.) when human handoff is initiated.

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:

Use Alhena for AI-powered responses
Detect when a human is needed
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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Human Handoff Example</title>
</head>
<body>

<h1>Customer Support</h1>

<!-- Alhena SDK -->
<script>
document.gleenConfig = {
    company: 'your-company-key',
    apiBaseUrl: 'https://app.alhena.ai'
};
</script>
<script src="https://app.alhena.ai/sdk/gleenWidget.js"></script>

<!-- Handoff logic -->
<script>
window.gleenWidget.on('ticket:agent_handoff_initiated', function() {
    console.log('Human handoff initiated - switching to external widget');

    // Close Alhena widget
    window.gleenWidget.closeTicket();
    window.gleenWidget.close();

    // Load your external support widget
    loadExternalWidget();
});

function loadExternalWidget() {
    // Example: Freshworks widget
    window.fwSettings = {
        widget_id: 123456789
    };
    var script = document.createElement('script');
    script.src = 'https://widget.freshworks.com/widgets/123456789.js';
    script.async = true;
    document.body.appendChild(script);
}
</script>

</body>
</html>

Platform-Specific Examples

Zendesk

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

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

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

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

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
Close Alhena: We close the current ticket and hide the Alhena widget
Load external widget: Dynamically inject the external helpdesk's script
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

Events Reference - Full event documentation
Auto-Close After Handoff - Close widget without switching
A/B Testing - Compare Alhena vs other solutions

PreviousInternationalization NextScroll-Triggered Widget

Last updated 5 months ago

What You'll Learn

Use Case

Prerequisites

Code Example

Platform-Specific Examples

Zendesk

Intercom

Freshdesk

HubSpot

How It Works

Event Timing

Considerations

Related