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

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

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

The simplest solution is to embed content 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 content. Bot Libre now provides an open 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 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 section.
<script type="text/javascript" src="http://www.botlibre.biz/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 Paphus Live Chat 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 Paphus Live Chat'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

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