Demo: demo click bottom right chat bubble.

The scope of this article assumes you can build web pages using bootstrap. We provide source intended to be tweeked to your style. If you are a developer, the following simple code can be done in less than an hour. This article was written by an amature developer. That somewhat disclaimer said, lets get started. All of the code can be found here, at the bottom of this page there are links, were not using git.

AIBOT.CSS is our flavor of the css required to float a chat icon button. You may change according to your needs. Keeping things seperate, include aibot.css in your html.


<link rel="stylesheet" href="/aibot.css" />
            

The AIbot.css may have its naming conventions changed as it is a small file. Include some variation in your project. We assume everyone using bootstrap is also using font-awesome, for cool icons.


 <button class="float" id="button-modal">
    <i class="fa fa-comment bot-icon-sizeL"></i>
 </button>
            

Above, you are setting up the floating button for a simple bootstrap modal. For more information on bootstrap modal's and the corresponding style sheets and jQuery.js files please consult the appropriate docs online. We will leave the code to jQuery javascript. The HTML for the modal...


 <div id="ex1" class="modal AI">
    <h2 class="red"> Demo Name: Book a Trip</h2>
    Find the input box at the bottom. It is waiting for you to type. Try
    <i>"I'd like to book a trip". Click  to send.
    </i>. <br><br>
    <input type="text" id="AIfun" placeholder="input box" autocomplete="off" class="chat-style">
    <button id="go" class="fa fa-comment chat-go-style" > </button >
    <div id="results"></div>
</div>
             
As you can see the only meaningful code is that there be an input text box followed by a button. Plus the surrounding div tags for the modal. The last section being the js file is also tweekable. For example adding the code if the enter key is pressed. At the time of this article, it was left out on purpose but it may be included later.

<script src="/aibot.js"></script />
                            

The only important part in aibot.js to change is the requesting domain in the get statement. It must be your domain and must be registered. There is no charge at this juncture, we are just concerned about abuse. The ecommerce part is a function of sending us the script. We can just return a link or redirection.

As promised, the links you will need are as follows:
AIbot.css
AIbot.js

Once you have implemented the above code, and registered (below, free), you are done. Once ready for production applicable charges apply. $20.00 a month or $200.00 a year.