Upgrade
Sign In : Sign Up : Blog : Search: Language : Help :
Upgrade to our Platinum service and let us build your bot for you
Bot Libre Forum

Embedding your bot on your own website with the Bot Libre JavaScript SDK

by admin posted Sep 10 2014, 13:04

Bot Libre enables you to embed your bot on your own website. It is quite easy to embed a bot, and only takes a few lines of HTML code. You can embed a bot on your website to provide help or service, to provide information, or just for fun.

The embedding HTML code can be copied from your bot's Embed page (click its Embed button on its main page).

The simplest solution is to embed your bot inside your webpage using an iframe. This just displays embedded content directly from the Bot Libre website inside your webpage. The Embed page provides lots of options that let you customize the embedded content, such as changing the background color, changing the prompt and button text, or even providing your own CSS style sheet.

Another option is to access the Bot Libre web API from your website's server (PHP/Java/etc.), or to access the web API from JavaScript. Using the API directly gives you complete control over the interface to your bot. Bot Libre now provides an open source JavaScript SDK that makes embedding and accessing a bot using JavaScript a lot easier.

The Bot Libre JavaScript SDK is provided as open source under Bot Libre on GitHub and SourceForge. The Bot Libre SDK includes a Java and Android SDK and components, an iOS/iPhone SDK, and a JavaScript SDK.

To add the Bot Libre JavaScript SDK to your webpage you just need to import it in your webpage's section.

<script type="text/javascript" src="http://www.botlibre.com/scripts/sdk.js"></script>

The SDK provides several components that lets you access Bot Libre's services including:

  • SDK - static class providing services such as Text To Speech (TTS), debugging, and configuration.
  • SDKConnection - class providing access to the Bot Libre web API through JavaScript Data Transfer Objects (DTO). This includes chat bots, live chat, forums, and user administration.
  • WebChatbotListener - class that links the chat bot web API to an HTML form.
  • LiveChatConnection - class providing access to Bot Libre's live chat web socket API.
  • LiveChatListener - interface for live chat.
  • WebLiveChatListener - class that links the live chat API to an HTML form.
  • Credentials - class to provide your application credentials including your application id.
  • ChatConfig - DTO class to provide a chat bot message.
  • ChatResponse - DTO class to provide a chat bot response.
  • UserConfig - DTO class to provide user information.
  • BrowseConfig - DTO class to browse or search the bot/channel/forum/domain directory.
  • InstanceConfig - DTO class to provide chat bot information.
  • ForumConfig - DTO class to provide forum information.
  • ChannelConfig - DTO class to provide live chat channel information.
  • DomainConfig - DTO class to provide domain information.

To embed your chat bot you can either use the SDKConnection directly, or use the WebChatbotListener to link the API to an HTML form in your webpage. Using WebChatbotListener is the easiest solution, the following code demonstrates how to create a form and link it using JavaScript.

Example embedded chat bot using JavaScript and HTML


<script type="text/javascript" src="http://www.botlibre.com/scripts/sdk.js"></script> <script type="text/javascript"> SDK.applicationId = "<your app id>"; // You can obtain one from your user page. var sdk = new SDKConnection(); var web = new WebChatbotListener(); web.connection = sdk; web.instance = "{bot's id}"; // Your bot's id, you can get it from your bot's page. web.instanceName = "{bots name}"; // Your bot's name. web.userName = "You"; web.speak = true; web.greet(); </script> <table style="height:150px;width:100%;"> <tr style="height:150px;width:100%;"> <td height="200" width="200" align="left" valign="top"> <img id="avatar" src="http://www.botlibre.com/avatars/a5018.jpg"style="max-height:200px;max-width:200px;min-width:100px"/> </td> <td valign="top" style="height:200px;width:100%;" align="left"> <div id="scroller" style="height:200px;width:100%;overflow:auto;text-align:left"> <table id="console" style="width:100%;" cellspacing=2> </table> </div> </td> </tr> </table> <p id="response"></p> <form class="message" onsubmit="return web.sendMessage();"> <table style="width:100%;"> <tr style="width:100%;"> <td style="width:100%;"><input id="chat" style="max-width:none" placeholder="You say" type="text" name="input" autofocus x-webkit-speech onFocus="this.select();" onMouseOut="javascript:return false;"/></td> <td align="left"><input id="send" type="submit" name="submit" value="Send"/><br/></td> </tr> </table> <input title="Speech requires an html5 audio supporting browser" type="checkbox" name="speak" checked onClick="return web.toggleSpeak();">Speak</input> <a style="float:right;margin:4px" class="menu" onClick="return web.exit();">Disconnect</a> </form>

Try it out now live

The above script was included in this page to enable you to talk with Brain Bot.


Speak Disconnect


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


Id: 374593
Tags: blog, api, sdk, javascript, embed, web
Posted: Sep 10 2014, 13:04
Updated: Mar 6, 11:41
Replies: 0
Views: 6806, today: 2, week: 2, month: 162
I'm sure
Flag graphic as offensive, or in violation of site rules