CHATLIB JS

This versatile library enables seamless integration of a chatbox into web applications, enhancing user interaction and support capabilities. Designed with flexibility in mind, it can be fully customized to match the look and feel of any website, ensuring a consistent user experience. The library is compatible with a wide range of platforms, including Bubble.io and most custom-built web applications, making it an ideal solution for developers looking to add real-time communication features with minimal effort.

Installation

The easiest way to use this libary, is to simply add the javascript script tag inside the header of your website, choose an appropriate version, then the chabox will auto-display in the website.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/chatlib.js"></script>

Getting Started!

To have more control over the chabox you can follow the outlined steps!!

Displaying User Message in the chatbox

The user message appended in the chatbox automatically using the appendUserMessage() function which is called after the send button is clicked. However, you might need to manipulate the user message to send it to an API for processing, you can get the user message using the getUserMessage method.

getUserMessage(); //Return a string;

In bubble you achieve this by calling the function under the update function under the plugin editor.

function update (instance, properties, context) {

	var message = getUserMessage(); //Return a string;
    
    //Manipulate the message
}

Displaying the Bot response in the chatbox

To display a message as the second user, you need to call the receiveMessage function, which will display a seconday bubble dialog, this function is useful to handle the response of the AI assistant after you have made a call to the API.

receiveMessage(message) // Append secondary response to the chatbox;

Example

//Custom function you will create in your website

async function sendMessage() {

const url = "https://example.ai/[USER MESSAGE]"; // Send user message to your API

  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Response status: ${response.status}`);
    }

    const json = await response.json();

    /** 
     * @message a string representation of the response got from the API
    */
    receiveMessage(message);// This will append the API response in the chatbox.


    
  } catch (error) {
    console.error(error.message);
  }
}