The embedding HTML code can be copied from your bot's Embed page under Admin.
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 JavaScript SDK that makes embedding and accessing a bot using JavaScript a lot easier.
To BOT libre JavaScript SDK is provided as open source under Project libre on GitHub and SourceForge. The BOT libre SDK includes a Java and Android SDK and components, and now includes a JavaScript SDK.
To add the BOT libre JavaScript SDK to your webpage you just need to import it in your webpage's <head> section.
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
Try it out now live
The above script was included in this page to enable you to talk with Brain Bot.
|
|
So that's it, you should now be able to embed your bot on your website or blog using JavaScript.
