Usage

The Halosight Embedding Helper requires simple configuration to function properly within your app.

Node

Import into your project with:

import HalosightEmbed from '@halosight-public/halosight-embedding-helper';

Usage

To embed a component in your application, you need to:

1. Create a container element in your HTML
2. Initialize the HalosightEmbed class

This example creates a Halosight chat component within your application:

<div id="chatContainer"></div>

// Make sure this code is invoked AFTER the html is rendered on the DOM
// i.e. in React this code should go within a useEffect() hook
const halosight = new HalosightEmbed({
    targetElementId: 'chatContainer',
    agentId: 'YOUR_AGENT_ID',
    type: 'chat',
}).onRegister(() => {
    console.log('Chat component is registered and ready!');

    // Customize UI if needed
    halosight.insertUiAttributes({
        title: 'Customer Support',
    });

    // Pass context to the agent
    halosight.insertAgentArguments({
        accountId: '123456789',
    });
});

Event Handling

The Halosight Embedding Helper supports various events that you can handle:

halosight
    .onRegister(() => {
        console.log('Chat is ready');
    })
    .onAction((event) => {
        console.log('Custom action received:', event);
    })
    .onSendEmail((emailParams, response) => {
        // Handle email sending
        console.log('Email request:', emailParams);
        try {
            // Respond with success. This notifies the Halosight Component
            // that the request was successful
            response.success();
        } catch (err) {
            // Or if there was an error:
            response.error('Failed to send email');
        }
    });

Customization

You can customize the appearance of components. Different components will support different style customizations, so it is important to check the component page to see what customizations are supported. It is recommended that you invoke insertUiAttributes from within the onRegister callback.

halosight.onRegister(() => {
    halosight.insertUiAttributes({
        title: 'Support Chat',
    });
});

Passing Context

To provide context to your agent, use the insertAgentArguments method. It is recommended that you invoke insertAgentArguments from within the onRegister callback. You can pass an object with any key/value pairs that are relevant to the agent. Important for the object keys to be read by the agent, they must also be configured as agent arguments within the agent configuration.

halosight.onRegister(() => {
    halosight.insertAgentArguments({
        accountId: '550e8400-e29b-41d4-a716-446655440013',
        userName: 'John Doe',
        userRole: 'Administrator',
    });
});

API Reference

HalosightEmbed