Gleen
  • Introduction
  • Getting Started
  • Architecture
  • Reference
    • Website SDK
      • Configure Proactive Nudges
    • Product FAQs
    • Website chatsdk events
    • Website chatsdk APIs
    • Chat SDK api and events examples
      • Open other external widget once human transfer is initiated
      • Show the Gleen widget only when someone scroll the page by 5 px
    • Website SDK - Custom data
      • Website SDK - Customer data with Agent
    • Website SDK - Internationalization
    • API Reference
      • API calls
  • Tutorials
    • AI Training
      • Training Steps
      • Training Data Sources
        • Websites
        • Youtube videos
        • Google Drive
        • Twitter Pages
        • Discord Messages
        • Confluence Pages
        • Upload Documents
        • Github
        • Zendesk Tickets
        • Freshdesk Tickets
        • Freshchat Tickets
        • Custom data sources
        • Shopify API
        • Woocommerce API
      • Training Frequently Asked Questions
    • Tuning Gleen AI Post Training
      • Best Practices for configuring the Gleen AI Bot’s personality and guidelines
      • Adding Human Feedback for improving specific Questions
      • Adding Human Feedback from Bot Profile Analytics
      • Tuning Gleen AI Frequently Asked Questions
    • Integrations
      • Gleen Website Chat SDK
        • Customizing Your Gleen Chat Widget
      • Integrating Gleen AI With Slack
      • Integrating Gleen AI With Discord
      • Integrating Gleen With Freshdesk
      • Integrating Gleen AI With Zendesk
      • Integrating Gleen AI With Email
      • Integrating Gleen AI With Shopify
    • Notifications
    • Gleen Dashboard
      • Managing Team
Powered by GitBook
On this page

Last updated 1 month ago

Install via Iframe

Gleen AI chat sdk can be installed in a website with iframe (like an embed). Here is the sample code for inserting in iframe

Do remember to replace gleen (as your company key) postfix in this https://gleen.ai/chat-iframe/gleen

Install via Gleen JS SDK

You can also install gleen chat sdk with button similar to the experience of chat support.

Opening the chat widget from the button click

Chat sdk has a number of functions that can be configured to change the experience.

Following methods are exposed in the sdk

open - Opens the chat bubble. If it is already opened it will leave the chat sdk as it is on UI.

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

toggle - Closed the chat bubble if it is opened and vice - versa

Example code

Adding the ability to load the sdk only if it has scrolled some px

On page load you can set the sdk to not show the chat widget and only show it after user has scrolled some px

Customize the look and feel

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. sdk doesn't load any font. It will use in the style - whatever font has been passed.

Make sure to replace company with your company key. company key is the word before dashboard in the dashboard url e.g. If this is your dashboard url then company is gleen

<style>
.iframe-container {
  text-align: center;  
}
</style>
<div class="iframe-container">
<iframe 
  src="https://gleen.ai/chat-iframe/gleen"
  width="600"
  height="500"
  frameborder="0"
  allowfullscreen>
</iframe>
</div>
https://app.gleen.ai/gleen/dashboard/
<script>
document.gleenConfig = {
    company: 'gleen',
};
</script>
<script src="https://js.gleen.ai/sdk/gleenWidget.js"></script>
<!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',
    };
</script>
<script src="https://app.gleen.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>
  • Install via Iframe
  • Install via Gleen JS SDK
  • Customize the look and feel
PreviousArchitectureNextConfigure Proactive Nudges
  1. Reference

Website SDK

Gleen's chat widget can either be installed into your pages multiple ways

<!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',
    };
</script>
<script src="https://app.gleen.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>
<!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',
        styles : {
            fontFamily : 'Mukta'
        }

    };
</script>
<script src="https://app.gleen.ai/sdk/gleenWidget.js"></script>

</body>
</html>
Gleen chat SDK