|
Embedding your bot on your own website with the Bot Libre JavaScript SDK |
|
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 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="https://www.botlibre.com/scripts/sdk.js"></script>
The SDK provides several components that lets you access Bot Libre's services including:
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="https://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="https://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 liveThe above script was included in this page to enable you to talk with Brain Bot.
|
|||
|
|
|||
|
|
|||
