Chat Widget

A chat widget is a user interface element that enables real-time communication between users and an AI-powered system, such as Feedloop's AI solutions. It is typically embedded into websites or online platforms to provide various functionalities, including automated customer support, lead generation, interactive FAQs, and real-time assistance.

Here's a breakdown of what a chat widget typically includes and how it functions:

Embedded Interface: The chat widget is designed to be easily integrated into websites or online platforms. Users can access it directly on the webpage without needing to navigate to a separate application or interface.
AI-Powered Interaction: The chat widget is powered by AI technology, allowing it to understand user queries, provide relevant responses, and engage in conversations in a human-like manner. This AI functionality enables the chat widget to handle various tasks autonomously, such as answering questions, providing recommendations, or assisting with troubleshooting.
Customizable Appearance: Users can customize the visual appearance of the chat widget to align with their branding and user experience preferences. This customization typically includes options to set the chatbot's name, upload a custom logo or avatar, choose accent colors, and customize launcher buttons.
Dynamic Preview: As users make changes to the chat widget's appearance settings, a dynamic preview allows them to see real-time updates of how the chat widget will look to users. This helps users visualize and adjust the chat widget's appearance according to their preferences.
Integration Capabilities: The chat widget can be integrated with various systems and platforms using APIs and code embedding. This integration enables seamless communication between the chat widget and other applications or databases, allowing for data exchange and interoperability.

Overall, a chat widget serves as a versatile tool for businesses and organizations to provide AI-driven support, engagement, and assistance to users directly on their websites or online platforms. It enhances user experience, increases engagement, and streamlines communication processes through AI-powered interactions.

User Manual

Getting Started

Logging In: Access the Feedloop AI platform using your registered credentials.
Project Selection: Choose the desired project from the project management section.

App Listing

View Apps: In the project dashboard, navigate to the "Apps" tab to view the list of deployed apps associated with the selected project.

Creating a New App

Selecting Deployment Type: Click on the "Add App" button to create a new app. Choose the deployment type (e.g., Chatbot App, Qore Integration, WA App).

App Configuration: Provide the necessary details for the app, such as app name, description, and relevant settings.

App Appearance

Allows you to personalize the visual identity of your app, making it stand out and aligning it with your brand. You can customize chatbot name,the logo, accent colors, launcher buttons, and more

App's Name
- In the App Appearance Customization section, find the "App Name" option.
- Click on the input field under the "App Name" section.
- Enter the desired name for your app.
Custom Avatar by URL
- In the App Appearance Customization section, locate the "Logo" option.
- Click on the input text area under the "Custom Avatar" section.
- Paste the URL of the logo image that you want to use. For example: https://i.ibb.co/sHj8nb4/avatar.png
- The logo will be displayed. in preview
Choosing Accent Colors
- Find the "Accent Color" option in the customization settings.
- Click on the color box to open the color picker.
- Choose the accent color you want by clicking on it in the color picker or entering its HEX or RGB value.
- The selected color will be displayed in the color box.

Launcher Button by URL
- Find the "Custom Launcher Button" option in the customization settings.
- Click on the input text area under the "Custom Launcher Button" section.
- Paste the URL of the image with the desired color. For example: https://i.ibb.co/sHj8nb4/launcher.png
- The selected image will be applied to your app's header and buttons.

Dynamic Preview

As you make changes in the customization settings, a dynamic preview of your app's appearance will be shown in real-time. This helps you see how the changes will actually look to users. The dynamic preview includes:

Apps Name: name of your chatbot agent that you've configured
Dynamic Color Accent: The accent color you've chosen will be reflected throughout the app's interface.
Dynamic Agent/Apps Name: The agent's or app's name will be shown according to your settings.
Launcher with Custom Color: The launcher button color will be displayed as per your customization.

Saving Your Customizations

After you are satisfied with the changes you've made:

Scroll down to find the "Save" or "Apply" button.
Click on it to save your customizations.
Your app's appearance will now reflect the changes you've made.
Next to the "Save" or "Apply" button, you will find the "Reset" button.
Click on the "Reset" button.

Integration

provides you with the capability to integrate your AI chatbot with various systems and platforms.This integration can be achieved through the use of APIs and code embedding.

Embed Code

Getting Your Embed Code
- Go to the "App Integration" section.
- Locate the "Embed Code" provided for your app. This code is a script that you'll need to add to your website's HTML.

<script src="https://storage.googleapis.com/flai/widget.js?token=U2FsdGVkX19lulFUxeuNN6bvSrL9xLnI8H3RoIgMDKIP-PrDH1Lj9zQlTECATIwc7xET_E7bAZOI1P2jjXQg8dr5J4BAgQ_vFjd4zNtYAl3qZfOhx54wzmHwImxKiMfFs5nkTxNk7Vz7e-r6rdHySg"></script>

https://storage.googleapis.com/flai/:
- https://storage.googleapis.com/: This part of the URL indicates that the content is hosted on Google Cloud Storage, a service provided by Google for storing and serving files over the internet.
- flai/: This is the path to a specific folder or directory within the Google Cloud Storage. It's likely that "flai" stands for "Feedloop AI," which suggests that the files related to the Feedloop AI service are stored in this directory.
- Querry Paramater : token=U2FsdGVkX19...:
  - token is a query parameter passed to the JavaScript file for identification and authorization purposes. In this case, it's used to uniquely identify your app or chatbot within the Feedloop AI system.
  - token serves as a unique identifier for each individual app or deployment. Each time you create a new app or deploy your chatbot, you'll receive a specific token that corresponds to that particular instance.
Embedding Code
- Open the HTML code of the web page where you want to integrate the chatbot. This is usually found in your website's content management system (CMS).
- Locate the <body> tag within the HTML code. This is usually near the top of your HTML structure.
- Paste the provided embed code within the <body> tag. It should look something like this:

<body>  <!-- Your website content -->
  <!-- Paste the embed code here -->  <script src="https://storage.googleapis.com/flai/widget.js?token=YOUR_TOKEN_HERE"></script></body>

Replace "YOUR_TOKEN_HERE" with the actual token from the provided embed code.
Save the changes to your HTML file and update your website.

API

Notes

[APP_TOKEN]: The unique token for your app deployment.
[CONVO_ID_FROM_INIT]: The conversation ID obtained from the chat initialization response.
[USER_ID_FROM_INIT]: The user ID obtained from the chat initialization response.

Chat Initialization

Initialize a chat session

This API initializes a chat session in Feedloop AI Apps. It needs user's identity and optional data. The identity can be any identifier, and the optional data can have more user-related info. It's necessary to start a chat with the chatbot and get a conversation ID (convo_id) for further interactions.

API

POST/https://platform-api.feedloop.ai/app/init Endpoint: /app/init

Method: POST

Headers:

Token: [APP_TOKEN]

Request Body:

{    "identity": "user name",    "data": {        "email": "ajudan@feedloop.io"    }}

Example Request

curl --location 'https://platform-api.feedloop.ai/app/init' \--header 'Token: [APP_TOKEN]' \--header 'Content-Type: application/json' \--data-raw '{    "identity": "user name",    "data": {"email": "ajudan@feedloop.io"}}'

"identity": This is the identity of the user interacting with the chatbot. It can be any identifier that you want to associate with the user. In the example provided, it's referred to as "user name".
"data": This is an optional object that can contain additional data related to the user. In the example provided, it includes the user's email address.

Get Chat HistoryRetrieve the chat history of a conversation.Use this API endpoint with a specific **[CONVO_ID]** to retrieve the chat history, including user and chatbot interactions.

API

GET/https://platform-api.feedloop.ai/widget/convo_id/chats

Example:GET/https://platform-staging-api.feedloop.ai/widget/1e722d5b-39fa-483f-9d33-e99baabc8148/chatS

Endpoint:

/widget/[CONVO_ID_FROM_INIT]/chats

Method: GET

Headers:

Token: [APP_TOKEN]

Example Request:

curl --location 'https://platform-staging-api.feedloop.ai/widget/[CONVO_ID_FROM_INIT]/chats' \ --header 'Token: [APP_TOKEN]'  --header 'Content-Type: application/json'

Post Chat Message

Send a chat message within a conversation.Use this API endpoint to send a new chat message to an ongoing conversation.

Provide the **[CONVO_ID]**, message, and user_id as parameters in a POST request to add a new message

API

POST/https://platform-api.feedloop.ai/widget/convo_id/chats

Example :POST/https://platform-staging-api.feedloop.ai/widget/1e722d5b-39fa-483f-9d33-e99baabc8148/chatS

Endpoint: /widget/[CONVO_ID_FROM_INIT]/chats

Method: POST

Headers:

Token: [APP_TOKEN]
Content-Type: application/json

Request Body:

{    "message": "halo",    "user_id": "[USER_ID_FROM_INIT]"}

Example Request

curl --location 'https://platform-api.feedloop.ai/widget/[CONVO_ID_FROM_INIT]/chats' \--header 'Token: [APP_TOKEN]' \--header 'Content-Type: application/json' \--data '{    "message": "halo",    "user_id": "[USER_ID_FROM_INIT]"}'

Integration Steps:

Obtain APP_TOKEN: Retrieve your unique app token from the Feedloop AI Apps platform under the "Integration" section of your app.
Initialize Chat: Use the POST /app/init API call to initialize the conversation. Store the received CONVO_ID for future interactions.
Get Chat History: If needed, retrieve the chat history using the GET /widget/[CONVO_ID]/chats API call.
Post Chat Message: Allow users to send messages to the chatbot using the POST /widget/[CONVO_ID]/chats API call.

Tips:

Ensure that you replace placeholders such as [APP_TOKEN], [USER_ID], and [CONVO_ID] with actual values.
Handle API responses appropriately. Errors and success responses will provide crucial information.
Thoroughly test the integration in a controlled environment before deploying it.

Apps Identity

Identity is a unique identifier for users or conversations. It distinguishes and tracks them in your application, allowing for personalized interactions. The “profile" includes additional user information.Here's a breakdown of the two concepts:

Identity: This is a single unique identifier that represents a user or a conversation. It's used to keep track of different users or conversations. It's often a user ID, username, or email address. This identity allows the system to associate past interactions and provide a personalized experience.
Profile: The profile contains multiple attributes or pieces of information about a user. It provides additional context about the user, which can be used to customize interactions. This might include the user's name, email.

When a user logs into your website or application, you might use their user ID or email as the identity in Feedloop AI Apps. Then, you can attach their complete profile with various attributes to provide a richer and more personalized conversation.

Implement Automatic Identity Detection in Feedloop AI Apps using Embed Code

After Embed the Feedloop AI Apps widget code into your website. Within your website's JavaScript code, you can use the flaiuserdata local storage to store the user's identity once they are logged in.To automatically detect the user's identity, follow these steps:

When a user logs in to your website, gather the user's unique identifier (e.g., user ID or email).
Store the user's identity in the local storage of the user's browser. Create a local storage item named flaiuserdata and set its value to the user's identity. This information will be used for automatic identity detection in the chat integration.

example

// After user loginconst userIdentity = {  identity: "user@email.com", // Replace with the actual user identity  data: {    name: "user john doe", // Replace with the actual user name    email: "user john doe" // Replace with the actual user email    // You can add more user data properties here if needed  }};
// Store user identity in local storagelocalStorage.setItem('flaiuserdata', JSON.stringify(userIdentity));
// Inform the user that their identity has been storedconsole.log("User identity stored in local storage:", userIdentity);

Comming Soon
App Version ControlManaging Versions: Track and manage different versions of the app, view the current version, and, if applicable, the next version to be published. App Identity ConfigurationPrimary Identity Attribute: Define the primary identity attribute, including name, description, and example value.Profile Attributes: Add multiple profile attributes with names, descriptions, and example values.Enabling/Disabling Identity: Enable or disable the identity configuration as needed.
Saving, Publishing, and Drafting AppsSave App Configuration: Save app settings to retain changes.Publish App: Make the app accessible to users by publishing it.Save Draft: Save the app as a draft for future modifications.