Developer Documentation
ĀLO App ĀLO Website

Chat Widget

ALO's chatbot enables customer support in 99 languages

Javascript chatbot

There are 2 ways to integrate the widget into your website.

Quick One Step Method

This method best suits users seeking a quick and easy set for the chatbot.

  1. You are given an html script tag similar to the following. Put the script inside the <head></head> tag in your html page.

    <script>
  (function() {
    var alochatbot = document.createElement('script');
    alochatbot.setAttribute('src', 'https://assets.alo.ai/chatbot/alo-chatbot.js');
    window.addEventListener('aloChatbot:ready', function(){
      window.$aloChatbot.configure({apiKey: 'your-unique-application-key'})
      window.$aloChatbot.start()
    })
    document.head.appendChild(alochatbot);
  })();
</script>

    The above snippet is just an example; all values will be populated with data relevant to your application.

Google Tag Manager Method

ALO chatbot supports integration through Google Tag Manager. To add the script in GTM:

  1. create a new Tag with the following properties:

    • Tag Type: Custom HTML

    • HTML:

      <script>
  (function() {
    var alochatbot = document.createElement('script');
    alochatbot.setAttribute('src', 'https://assets.alo.ai/chatbot/alo-chatbot.js');
    window.addEventListener('aloChatbot:ready', function(){
      window.$aloChatbot.configure({apiKey: 'your-unique-application-key'})
      window.$aloChatbot.start()
    })
    document.head.appendChild(alochatbot);
  })();
</script>

    • Tag Firing Options: Unlimited

    • Additional Consent Checks: No additional consent required

  2. create a trigger with the following properties and assign it to the new Tag

    • Trigger Type: Page View

    • This Trigger Fires on: All Pages

Advanced Styling

If you would like to style the Chat Widget, use this script and change the hex color codes to match the style you wish to use.

This script gets inserted inside the <head> tag on any HTML page or it can be places inside Google Tag Manager in the HTML textbox.

Here's a breakdown of what you can style:

  1. Widget (appears on the web page bottom right)

    1. Note that the color can only be "white" or "black" since it's a JIF 

                  widgetButton: {
            color: "white",
            background: "#212121",
            hover: {
                background: "#40403f",
            },

  2. Areas of Widget

    1. chatInputArea (bottom of the window) 

              chatMessages: {
            background: "#40403f",
            color: "#f3f4f6",
            },

    2. headerArea (top of the window) 

              headerArea: {
            background: "#212121",
            color: "#f3f4f6",
            },

    3. commonQuestionsArea (middle of the window) 

            commonQuestionsArea: {
            background: "#363636",
            },

  3. Chat

    1. chatMessages (live chat)

        chatMessages: {
            background: "#40403f",
            color: "#f3f4f6",
            },

    2. uploadButton (upload attachments for live chat)

        uploadButton: {
            background: "#424242",
            color: "#ffffff",
            hover: {
                background: "#616161",
                color: "#ffffff",

    3. sendButton (this looks like a paper airplane)

        sendButton: {
            background: "#ffb74d",
            color: "#3c3939",
            border: "#ff855e",
            hover: {
                background: "#ffb74d",
                color: "#3c3939",
                border: "#ff855e99",
            },

    4. faqButton (self-help FAQ suggestions)

        faqButtons: {
            background: "#616161",
            color: "#ffffff",
            border: "#424242",
            hover: {
                background: "#616161",
                color: "#ffffff",
            },

  4. Contact Fields

    1. inputFields (input fields + language selector)

                  inputFields: {
            color: "#ffffff",
            border: "#ffffff33",
            hover: {
                color: "#ffffff99",
                border: "#ffffff22",
            },

    2. cancelButton (cancel button on the contact form)

              cancelButton: {
            color: "#ffffff",
            border: "#ffffff33",
            hover: {
                color: "#ffffff",
                border: "#ffffff22",
            },

    3. submitButton (submit button on the contact form)

            submitButton: {
            background: "#ffb74d",
            color: "#3c3939",
            border: "#ff855e",
            hover: {
                background: "#ffb74d",
                color: "#3c3939",
                border: "#ff855e99",

ALO widget

<script>

  (function() {

    var alochatbot = document.createElement('script');
    var theme = {
        colors: {
            sendButton: {
            background: "#ffb74d",
            color: "#3c3939",
            border: "#ff855e",
            hover: {
                background: "#ffb74d",
                color: "#3c3939",
                border: "#ff855e99",
            },
            },
            submitButton: {
            background: "#ffb74d",
            color: "#3c3939",
            border: "#ff855e",
            hover: {
                background: "#ffb74d",
                color: "#3c3939",
                border: "#ff855e99",
            },
            },
            cancelButton: {
            color: "#ffffff",
            border: "#ffffff33",
            hover: {
                color: "#ffffff",
                border: "#ffffff22",
            },
            },
            uploadButton: {
            background: "#424242",
            color: "#ffffff",
            hover: {
                background: "#616161",
                color: "#ffffff",
            },
            },
            faqButtons: {
            background: "#616161",
            color: "#ffffff",
            border: "#424242",
            hover: {
                background: "#616161",
                color: "#ffffff",
            },
            },
            inputFields: {
            color: "#ffffff",
            border: "#ffffff33",
            hover: {
                color: "#ffffff99",
                border: "#ffffff22",
            },
            },
            chatInputField: {
            color: "#ffffff",
            border: "#ffb74d",
            hover: {
                color: "#ffffff99",
                border: "#ffb74d99",
            },
            },
            chatInputArea: {
            background: "#2e2e2e",
            },
            messageImages: {
            background: "#5c5c5c",
            },
            chatMessages: {
            background: "#40403f",
            color: "#f3f4f6",
            },
            headerArea: {
            background: "#212121",
            color: "#f3f4f6",
            },
            commonQuestionsArea: {
            background: "#363636",
            },
            widgetButton: {
            color: "white",
            background: "#212121",
            hover: {
                background: "#40403f",
            },
            },
        },
    };

    alochatbot.setAttribute('src', 'https://assets.alo.ai/chatbot/staging-alo-chatbot.js');

    window.addEventListener('aloChatbot:ready', function(){

      window.$aloChatbot.configure({apiKey: 'demo', theme})

      window.$aloChatbot.start()

    })

    document.head.appendChild(alochatbot);

  })();

</script>
PreviousVideo Management SystemNextSupported Language Codes

Last updated