Website SDK

Install via Alhena JS SDK

You can install Alhena chat widget though the JavaScript SDK, allowing the users to interact with your AI agent through any page on your website.

Make sure to replace company with your company. company is the word after dashboard in the dashboard url e.g. If this is your dashboard url https://app.alhena.ai/dashboard/gleen/ then company is gleen

<script>
document.gleenConfig = {
    company: 'gleen',
    apiBaseUrl: '<API_BASE_URL>'
};
</script>
<script src="<API_BASE_URL>/sdk/gleenWidget.js"></script>

You can also find the snippet code in the Alhena dashboard by navigating to Integrations > Website > Installation.

Based on your region, API_BASE_URL can be

https://app.alhena.ai or https://eu.alhena.ai

Final snippet code after updating URL will be if API_BASE_URL = https://eu.alhena.ai

<script>
document.gleenConfig = {
    company: 'gleen',
    apiBaseUrl: 'https://eu.alhena.ai'
};
</script>
<script src="https://eu.alhena.ai/sdk/gleenWidget.js"></script>

Alhena SDK JavaScript functions

The Alhena Chat SDK has a number of functions that can be configured to change the experience.

The Following methods are exposed in the SDK

open - Opens the chat window. If it is already opened it will leave the chat widget as it is

window.gleenWidget.open()

close - Closes the chat window. If it is already closed it will leave the chat sdk as it is on UI.

window.gleenWidget.close()

toggle - Closes the chat window if it is opened and vice - versa.

window.gleenWidget.toggle()

sendMessage - Opens the widget with the given message send from the user's perspective.

window.gleenWidget.toggle()

See Website SDK JavaScript APIs for more details and APIs available.

Example code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample HTML Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
            background-color: #f2f2f2;
        }

        header, main, footer {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        header {
            text-align: center;
        }

        main {
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

<header>
    <h1>Welcome to the Sample HTML Page</h1>
</header>

<main>
    <p>This is a sample content area. You can place your content here.</p>

    <button onclick="handleOpen()">Open Chat Widget</button>
    <button onclick="handleClose()">Close Chat Widget</button>
    <button onclick="handleToggle()">Toggle Chat Widget</button>

    <div style="height: 1000px"></div>
</main>

<footer>
    <p>Sample Footer Information</p>
</footer>


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


<style>
    #helix-chat-container {
        display: none;
    }
</style>

<script>
    

    function showChatWidget() {
        document.getElementById('helix-chat-container').style.display = 'block';
    }
    
    showChatWidget();


</script>

<script>
    /* handling the function events for button clicks */
    function handleOpen() {
        showChatWidget();
        window.gleenWidget.open();
    }

    function handleClose() {
        window.gleenWidget.close();
    }

    function handleToggle() {
        window.gleenWidget.toggle();
    }
</script>

</body>
</html>

On page load, you can set the SDK to not show the chat widget and only show it after user has scrolled some number of pixels.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample HTML Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
            background-color: #f2f2f2;
        }

        header, main, footer {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        header {
            text-align: center;
        }

        main {
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

<header>
    <h1>Welcome to the Sample HTML Page</h1>
</header>

<main>
    <p>This is a sample content area. You can place your content here.</p>

    <button onclick="handleOpen()">Open Chat Widget</button>
    <button onclick="handleClose()">Close Chat Widget</button>
    <button onclick="handleToggle()">Toggle Chat Widget</button>

    <div style="height: 1000px"></div>
</main>

<footer>
    <p>Sample Footer Information</p>
</footer>


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


<style>
    #helix-chat-container {
        display: none;
    }
</style>

<script>
    /* Logic to show the widget on scroll */
    function showChatWidget() {
        document.getElementById('helix-chat-container').style.display = 'block';
    }

    // Load the chat widget after the user scrolls down 5px, for example
    window.addEventListener('scroll', function() {
        var scrollPosition = window.scrollY || window.pageYOffset;
        if (scrollPosition > 5) {
            showChatWidget();
            // Remove the event listener once the widget is loaded
            window.removeEventListener('scroll', arguments.callee);
        }
    });
</script>

<script>
    /* handling the function events for button clicks */
    function handleOpen() {
        showChatWidget();
        window.gleenWidget.open();
    }

    function handleClose() {
        window.gleenWidget.close();
    }

    function handleToggle() {
        window.gleenWidget.toggle();
    }

    /* handling the SDK APIs  */
    window.gleenWidget.on('widget:opened', function() {
        console.log('widget:opened');
    });
    
    window.gleenWidget.on('widget:closed', function() {
        console.log('widget:closed');
    });
</script>

</body>
</html>

Customize the look and feel

You can customize the general look and feel from the Website settings under Integrations in the dashboard. The SDK has some properties that can be customize as per the need.

styles can take the parameter fontFamily

Please make sure your website has logic to load the font. The SDK doesn't load any font. Any font famility passed in must be loaded by your site's own code.

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

<script>
    document.gleenConfig = {
        company: 'gleen',
        apiBaseUrl: 'https://app.alhena.ai',
        styles : {
            fontFamily : 'Mukta'
        }
    };
</script>
<script src="https://app.alhena.ai/sdk/gleenWidget.js"></script>

</body>
</html>

PreviousArchitecture NextInstall Chat Widget via iframe

Last updated 4 months ago

Install via Alhena JS SDK

Based on your region, API_BASE_URL can be

Alhena SDK JavaScript functions

Example code

Loading the widget only after the user has scrolled

Customize the look and feel