Embedding your bot on your own website or blog

You are free to embed the bots your create on your own website or blog. It is quite easy to embed a bot, and only takes a few lines of HTML code. You can embed a bot to provide help or service for your website, or as a stand-in for yourself on your blog.

The embedding HTML code can be copied from your bot's Embed page under Admin.

The simplest solution is to embed a bot inside your webpage using an iframe. Here is some simple code to embed Brain Bot in an iframe.

Code to embed a bot in a iframe

<iframe src="http://www.botlibre.com/embedded?chat=165&speak=false&avatar=true" width="500" height="400" frameborder="0" scrolling="auto"></iframe>

See the Talk with Brain Bot tab for an example.

Another option is to put a button or link on your website that open the chat bot in another window. This can be done using a little Java Script code.

Code to popup a bot in window

<script> function popupwindow(url, title, w, h) { var left = (screen.width/2)-(w/2); var top = 100; window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left); return false; } </script> <a href="help" onclick="popupwindow('http://www.botlibre.com/embedded?chat=165&message=How+may+I+help+you&avatar=true', 'child', 600, 400); return false;" >Talk with Brain Bot</a>

This code will produce the following:

Talk with Brain Bot

If you know a little HTML or Java Script, you can make how the bot is displayed more sophisticated. One option is to use an absolute position to make the bot popup inside a webpage. This will be demonstrated in the following code.

Code to popup a bot on a webpage

<script> function popupwindow(url, title, w, h) { hideBot(); var left = (screen.width/2)-(w/2); var top = 100; window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left); return false; } function showBot() { $("#chatbot").show(); return false; } function hideBot() { $("#chatbot").hide(); return false; } </script> <div id="chatbot" style="position:absolute;display:none;z-index:52;align:right;margin: 0 0 0 250px;border-style:solid;border-color:black;border-width:1px;background: #ffffff;"> <table> <tr> <td align="right"> <a href="" onclick="popupwindow('http://www.botlibre.com/embedded?popup=Popup','child', 600, 420);" >Popup</a > <a href="" onclick="hideBot()">Close</a> </td> </tr> <tr> <td> <iframe id="helpframe" src="http://www.botlibre.com/embedded?chat=165&message=How+may+I+help+you&avatar=true" width="620" height="420" frameborder="0" scrolling="auto"></iframe> <script> $("#helpframe")[0].contentWindow.document.body.focus(); </script> </td> <tr> </table> </div>

Code to embed a bot without the avatar

You can also choose to not display the bot's avatar and chat log. To do this pass the URL argument avatar=false in your link. You can also pass the welcome message using the message argument, i.e. message=Hello. The welcome message can also be configured from your bot's Training page under Admin. <script> function popupwindow(url, title, w, h) { var left = (screen.width/2)-(w/2); var top = 100; window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left); return false; } </script> <a href="help" onclick="popupwindow('http://www.botlibre.com/embedded?chat=165&message=Hello&avatar=true', 'child', 600, 200); return false;" >Talk with Brain Bot</a>

This code will produce the following:

Talk with Brain Bot

So that's it, you should now be able to embed your bot on your website or blog.