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 
Google Tag Manager
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>
Users
Next - Misc
Supported Language Codes
Last modified 1yr ago