Friday, September 12, 2014

Embedding your bot on your own website with the Paphus Live Chat JavaScript SDK

Paphus Live Chat 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 Paphus Live Chat 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 Paphus Live Chat 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. Paphus Live Chat now provides an open JavaScript SDK that makes embedding and accessing a bot using JavaScript a lot easier.

To Paphus Live Chat JavaScript SDK is provided as open source under Project libre on GitHub and SourceForge. The Paphus Live Chat SDK includes a Java and Android SDK and components, and now includes a JavaScript SDK.

To add the Paphus Live Chat 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 Paphus Live Chat'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

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


Speak Disconnect

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