diff --git a/docs/.gitbook/includes/visuel-editor-with-simple-text-block.md b/docs/.gitbook/includes/visuel-editor-with-simple-text-block.md
new file mode 100644
index 000000000..2f496c547
--- /dev/null
+++ b/docs/.gitbook/includes/visuel-editor-with-simple-text-block.md
@@ -0,0 +1,5 @@
+---
+title: Visuel Editor with Simple Text Block
+---
+
+
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 000000000..07a3a91ed
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,47 @@
+---
+icon: house-window
+---
+
+# Welcome
+
+Welcome to the Hexabot Documentation! Hexabot is a powerful and versatile open-source chatbot platform designed to simplify the creation and management of intelligent conversational chatbots. Whether you're a business owner seeking to automate customer interactions, an organization looking to engage your audience, or a developer wanting to integrate conversational AI into your applications, Hexabot provides the tools and flexibility you need.
+
+{% include ".gitbook/includes/visuel-editor-ui.md" %}
+
+## Key Features
+
+Hexabot comes equipped with a comprehensive suite of features to empower your chatbot development:
+
+* **Intuitive Visual Editor:** Build complex conversation flows without coding using our drag-and-drop interface and a diverse library of pre-built blocks.
+* **NLU Engine:** Leverage state-of-the-art NLU technology to understand user intent, extract key information, and deliver personalized responses.
+* **Flexible Deployment Options:** Deploy your chatbots on various platforms, including Facebook Messenger, web widgets, and custom integrations.
+* **Comprehensive Analytics and Reporting:** Track key metrics, monitor chatbot performance, and gain valuable insights into user interactions.
+* **And More:** Discover a range of additional features, including user segmentation, content management, and third-party integrations.
+
+## Who Should Use This Documentation
+
+This documentation is a valuable resource for:
+
+* **New Users:** Get started with Hexabot, learn the basics of chatbot creation, and build your first conversational chatbot.
+* **Experienced Users**: Explore advanced features, optimize your existing chatbots, and discover best practices for chatbot development.
+* **Developers**: Integrate Hexabot with your applications, leverage our APIs, and extend the platform's functionality by developing add-ons for Hexabot.
+* **Administrators**: Manage users, configure settings, and ensure the smooth operation of Hexabot within your organization.
+
+## How to Use This Documentation
+
+To navigate this documentation effectively:
+
+* **Search**: Use the search bar to quickly find information on specific topics or keywords.
+* **Navigation**: Browse through the table of contents to explore different sections and find the information you need.
+* **Links**: Follow links to related articles and resources for in-depth explanations and examples.
+
+Feedback: We encourage you to provide feedback and suggestions for improvement. Your input helps us make this documentation even better.
+
+## Contacting Support
+
+If you encounter any issues or have questions not addressed in this documentation, our dedicated support team is here to assist you. Please contact us at [hello@hexabot.ai](mailto:hello@hexabot.ai)
+
+### Jump right in
+
+
+
diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md
new file mode 100644
index 000000000..a5cbb134b
--- /dev/null
+++ b/docs/SUMMARY.md
@@ -0,0 +1,78 @@
+# Table of contents
+
+* [Welcome](README.md)
+
+## Introduction
+
+* [Overview](introduction/overview.md)
+* [Features](introduction/features.md)
+
+## Quickstart
+
+* [Installation](quickstart/installation.md)
+* [Create your first flow](quickstart/create-your-first-flow.md)
+
+## USER GUIDE
+
+* [Visual Editor](user-guide/visual-editor/README.md)
+ * [Using the Visual Editor](user-guide/visual-editor/using-the-visual-editor.md)
+ * [Regular Blocks](user-guide/visual-editor/regular-blocks/README.md)
+ * [Using Simple Text Block](user-guide/visual-editor/regular-blocks/using-simple-text-block.md)
+ * [Using Quick Replies Block](user-guide/visual-editor/regular-blocks/using-quick-replies-block.md)
+ * [Using Buttons Block](user-guide/visual-editor/regular-blocks/using-buttons-block.md)
+ * [Using Attachment Block](user-guide/visual-editor/regular-blocks/using-attachment-block.md)
+ * [Using Advanced Blocks](user-guide/visual-editor/using-advanced-blocks.md)
+* [Flows](user-guide/flows.md)
+* [NLU](user-guide/nlu/README.md)
+ * [NLU Engines](user-guide/nlu/nlu-engines/README.md)
+ * [LLM NLU Engine](user-guide/nlu/nlu-engines/llm-nlu-engine.md)
+ * [Ludwig NLU Engine](user-guide/nlu/nlu-engines/ludwig-nlu-engine.md)
+ * [Tensorflow NLU Engine](user-guide/nlu/nlu-engines/tensorflow-nlu-engine.md)
+ * [Manage NLU Entities](user-guide/nlu/manage-nlu-entities.md)
+ * [NLU Match Scoring](user-guide/nlu/nlu-match-scoring.md)
+* [NLU Training](user-guide/nlu-training.md)
+* [Knowledge Base](user-guide/knowledge-base/README.md)
+ * [Content Types](user-guide/knowledge-base/content-types.md)
+ * [Manage Persistent Menu](user-guide/knowledge-base/manage-persistent-menu.md)
+ * [Media Library](user-guide/knowledge-base/media-library.md)
+* [Localization](user-guide/localization/README.md)
+ * [Languages](user-guide/localization/languages.md)
+ * [Translations](user-guide/localization/translations.md)
+* [Users and Roles](user-guide/users-and-roles/README.md)
+ * [Manage users](user-guide/users-and-roles/manage-users.md)
+ * [Manage roles](user-guide/users-and-roles/manage-roles.md)
+* [Manage Settings](user-guide/manage-settings/README.md)
+ * [Email](user-guide/manage-settings/email.md)
+ * [Chatbot Global Fallback](user-guide/manage-settings/chatbot-global-fallback.md)
+ * [NLU Provider](user-guide/manage-settings/nlu-provider.md)
+ * [Web Channel](user-guide/manage-settings/web-channel.md)
+ * [Live chat widget](user-guide/manage-settings/live-chat-widget.md)
+ * [Facebook Messenger](user-guide/manage-settings/facebook-messenger.md)
+* [Context Variables](user-guide/context-variables.md)
+* [Chat Inbox](user-guide/chat-inbox.md)
+* [Subscribers](user-guide/subscribers.md)
+* [Analytics Dashboard](user-guide/analytics-dashboard.md)
+
+## FAQ
+
+* [How can I deploy my Hexabot using NGINX ?](faq/how-can-i-deploy-my-hexabot-using-nginx.md)
+* [How can I add the Chatbot Widget to my Website?](faq/how-can-i-add-the-chatbot-widget-to-my-website.md)
+
+## Developer Guide
+
+* [Contributors Installation Guide](developer-guide/contributors-installation-guide.md)
+* [CLI Command Reference](developer-guide/cli-command-reference.md)
+* [Setup Node.js with NVM](developer-guide/setup-node.js-with-nvm.md)
+* [Setting Up Docker for Development and Production](developer-guide/setting-up-docker-for-development-and-production.md)
+* [SMTP Configuration and Emails](developer-guide/smtp-configuration-and-emails.md)
+* [Extensions](developer-guide/extensions.md)
+* [Plugins](developer-guide/integrations/README.md)
+ * [Hexabot Plugin Development](developer-guide/integrations/hexabot-plugin-development.md)
+ * [Build your First Plugin](developer-guide/integrations/build-your-first-plugin.md)
+* [Hexabot NLU Engine](developer-guide/hexabot-nlu-engine.md)
+* [Training custom NLU Models with Ludwig AI](developer-guide/training-custom-nlu-models-with-ludwig-ai.md)
+
+## Key Concepts
+
+* [NLU](key-concepts/nlu.md)
+* [Intent](key-concepts/intent.md)
diff --git a/docs/developer-guide/cli-command-reference.md b/docs/developer-guide/cli-command-reference.md
new file mode 100644
index 000000000..17efc5076
--- /dev/null
+++ b/docs/developer-guide/cli-command-reference.md
@@ -0,0 +1,163 @@
+---
+icon: rectangle-terminal
+---
+
+# CLI Command Reference
+
+Hexabot CLI is a powerful command-line tool to help manage your Hexabot chatbot instance. With it, you can create new projects, initialize environments, start services in various modes, run database migrations, and more. The CLI aims to make managing your chatbot seamless and intuitive.
+
+Not yet familiar with [Hexabot](https://hexabot.ai/)? It's a open-source chatbot / agent solution that allows users to create and manage AI-powered, multi-channel, and multilingual chatbots with ease. If you would like to learn more, please visit the [official github repo](https://github.com/Hexastack/Hexabot/).
+
+### Getting Started
+
+#### Prerequisites
+
+* Node.js >= 18.17.0
+* npm (Node Package Manager)
+* Docker installed
+
+#### Installation
+
+Install Hexabot CLI globally to have easy access to its commands:
+
+```
+npm install -g hexabot-cli
+```
+
+#### Usage
+
+Once installed, you can use the `hexabot` command in your terminal. Here are some of the available commands:
+
+#### Commands
+
+**`create `**
+
+Create a new Hexabot project.
+
+```
+hexabot create my-chatbot
+```
+
+Options:
+
+* `--template `: Specify a GitHub repository in the format `GITHUB_USERNAME/GITHUB_REPO` to use a custom template.
+
+Example:
+
+```
+hexabot create my-chatbot --template myusername/my-template-repo
+```
+
+**`init`**
+
+Initialize the environment by copying `.env.example` to `.env`.
+
+```
+hexabot init
+```
+
+**`dev`**
+
+Start specified services in development mode with Docker Compose.
+
+```
+hexabot dev --services nlu,ollama
+```
+
+Options:
+
+* `--services `: Comma-separated list of services to enable.
+
+**`start`**
+
+Start specified services with Docker Compose.
+
+```
+hexabot start --services api,nlu
+```
+
+Options:
+
+* `--services `: Comma-separated list of services to enable.
+
+**`migrate [args...]`**
+
+Run database migrations.
+
+```
+hexabot migrate
+```
+
+You can also pass additional arguments to the migration command.
+
+**`start-prod`**
+
+
+
+Start specified services in production mode with Docker Compose.
+
+```
+hexabot start-prod --services api,nlu
+```
+
+Options:
+
+* `--services `: Comma-separated list of services to enable.
+
+**`stop`**
+
+Stop specified Docker Compose services.
+
+```
+hexabot stop --services api,nlu
+```
+
+Options:
+
+* `--services `: Comma-separated list of services to stop.
+
+**`destroy`**
+
+Destroy specified Docker Compose services and remove volumes.
+
+```
+hexabot destroy --services api,nlu
+```
+
+Options:
+
+* `--services `: Comma-separated list of services to destroy.
+
+### Example Workflow
+
+1. **Create a new project**:
+
+ ```
+ hexabot create my-chatbot
+ ```
+
+ This will create a new folder `my-chatbot` with all necessary files to get started.
+2. **Navigate to your project folder**:
+
+ ```
+ cd my-chatbot
+ ```
+3. **Install dependencies**:
+
+ ```
+ npm install
+ ```
+4. **Initialize environment**:
+
+ ```
+ hexabot init
+ ```
+
+ This command copies the `.env.example` file to `.env`, which you can edit to customize your configuration.
+5. **Run in development mode**:
+
+ ```
+ hexabot dev --services nlu,ollama
+ ```
+
+ This starts the required services in development mode.
diff --git a/docs/developer-guide/contributors-installation-guide.md b/docs/developer-guide/contributors-installation-guide.md
new file mode 100644
index 000000000..f03da77c2
--- /dev/null
+++ b/docs/developer-guide/contributors-installation-guide.md
@@ -0,0 +1,60 @@
+---
+icon: handshake-angle
+---
+
+# Contributors Installation Guide
+
+## Prerequisites
+
+To ensure Hexabot runs smoothly, you'll need the following:
+
+* **Docker:** We recommend using Docker to start the app since multiple services are required (MongoDB, Redis, Prometheus, etc.). All the necessary Docker Compose files are located in the docker folder.
+* **Node.js:** For development purposes, ensure you have Node.js >= v18.17.0 installed. We recommend using nvm (Node Version Manager) to easily manage and update your Node.js versions.
+
+### Installation
+
+1. **Clone the Repository:**
+
+```bash
+$ git clone https://github.com/hexastack/hexabot.git
+```
+
+2. **Installation:**
+
+Install Hexabot CLI and node dependencies:
+
+```bash
+$ npm i -g hexabot-cli
+$ cd hexabot/
+$ npm i
+```
+
+3. **Environment Setup:**
+
+To configure the environment variables, use the Makefile at the root folder for initialization:
+
+```bash
+$ hexabot init
+```
+
+This will copy the `.env.example` file to `.env` in the `./docker` directory if the file does not already exist.
+
+4. **Running the Application in development mode:** Once your environment is set up, you can start the app. Use the following command:
+
+```bash
+$ hexabot dev
+```
+
+**Note:**
+
+* The first time you run the app, Docker will take some time to build all the required Docker images and cache the layers.
+* The "**--services**" allows you to add additional services comma separated. For each service, there needs to be a Docker compose file under the "**docker/**" directory. For instance, if you do "**--services nginx**" you will need to have a docker compose file for that service "**docker/docker-compose.nginx.yml**"
+
+### Usage
+
+UI Admin Panel is accessible via [http://localhost:8080](http://localhost:8080), the default credentials are :
+
+* **Username:** [admin@admin.admin](mailto:admin@admin.admin)
+* **Password:** adminadmin
+
+Live Chat Widget is accessible via [http://localhost:5173](http://localhost:5173)
diff --git a/docs/developer-guide/extensions.md b/docs/developer-guide/extensions.md
new file mode 100644
index 000000000..f935af155
--- /dev/null
+++ b/docs/developer-guide/extensions.md
@@ -0,0 +1,104 @@
+---
+icon: box-open-full
+---
+
+# Extensions
+
+Hexabot supports **extensions**, which are modular pieces of code that add new capabilities, features, or integrations to your Hexabot instance. Extensions allow you to customize and enhance your Conversational AI by adding functionality beyond the default setup. They can be categorized into three main types: Channels, Plugins, and Helpers.
+
+### How to Install an Extension in Hexabot
+
+Hexabot makes it easy to extend its capabilities by installing extensions. Follow this guide to browse, select, and install the extensions you need.
+
+#### Steps to Install an Extension
+
+1. **Visit the Extension Catalog**
+
+Start by visiting [hexabot.ai/extensions](https://hexabot.ai/extensions), where you can explore a wide variety of community-published extensions. Browse through the available channels, plugins, and helpers to find the one that fits your needs.
+
+2. **Set Up Your Project**
+
+If you haven’t already created a Hexabot project, you can do so using the Hexabot CLI:
+
+```bash
+hexabot create myproject
+cd myproject/
+```
+
+This will generate the base structure for your chatbot project.
+
+3. **Install the Extension**
+
+Extensions are published as NPM packages. To install an extension, run the following command in your project directory:
+
+```bash
+npm i --save hexabot-[channel|plugin|helper]-NAME
+```
+
+• Replace `[channel|plugin|helper]` with the appropriate type of extension.
+
+• Replace NAME with the specific name of the extension you want to install.
+
+For example, to install a plugin for integrating with an external API, the command might look like this:
+
+```bash
+npm i --save hexabot-plugin-ollama
+```
+
+4. **Read the Extension’s Documentation**
+
+Each extension comes with its own documentation that provides detailed usage instructions. Make sure to carefully read and follow the instructions to configure and use the extension effectively.
+
+Extensions are published as NPM packages. Some extensions may depend on other extensions to function correctly. For example:
+
+• A plugin may require a specific helper to operate.
+
+• A channel might rely on a helper for authentication or data handling.
+
+When installing an extension, review its documentation to identify any dependencies and install them as needed.
+
+Extensions published on [hexabot.ai/extensions](https://hexabot.ai/extensions) are reviewed by the Hexabot team and community members to ensure quality and functionality. While we strive to maintain high standards, always test extensions in your environment to ensure they meet your requirements.
+
+### Types of Extensions
+
+#### .png>)Channels
+
+A **channel** enables your AI bot to be accessible through various mediums, making it available to interact with users via different platforms or devices. Channels extend the reach of your bot to:
+
+* Chat apps (e.g., Slack, WhatsApp, Telegram)
+* Social media platforms (e.g., Facebook Messenger, Twitter)
+* Websites or web apps (via embedded chat widgets)
+* IoT devices (e.g., voice assistants, smart appliances)
+* Etc.
+
+Essentially, channels allow your agent to communicate in diverse environments, ensuring seamless accessibility for end-users.
+
+####  (1).png>)Plugins
+
+**Plugins** add new features and capabilities directly to the conversational AI system. The primary type of plugin currently available is the "**Block Plugin**", which allows you to introduce custom blocks in the visual editor. These blocks:
+
+* Enable new actions and integrations in conversation flows.
+* Are fully visible to end-users building flows in the visual editor.
+* Expand the creative possibilities of what your AI agent can do.
+
+For example, you can create a custom plugin to integrate your chatbot with an external API or trigger specific workflows.
+
+#### .png>)Helpers
+
+**Helpers** are essential services or utilities that operate in the background to support the functionality of plugins. While they are not exposed to end-users building conversation flows, they play a critical role in ensuring plugins work as intended.
+
+For example:
+
+* A plugin for API integration may require a helper to handle communication with a 3rd Party API.
+* A plugin that retrieves data from a database may depend on a helper to manage queries.
+
+Some plugins may require one or more helpers to function. It is crucial to install the necessary helpers for the plugins you plan to use.
+
+### Building Your Own Extensions
+
+Hexabot encourages users to create their own extensions to further customize their chatbot’s functionality. You can share your extensions with the community to help others benefit from your work.
+
+Visit [hexabot.ai/extensions](https://hexabot.ai/extensions) to explore the liibrary of extensions available for installation and reuse.
+
+If you’re a developer, you can contribute to this growing ecosystem by building and publishing your own extensions to the catalog. Extend Hexabot and help shape the future of conversational AI!
+
diff --git a/docs/developer-guide/hexabot-nlu-engine.md b/docs/developer-guide/hexabot-nlu-engine.md
new file mode 100644
index 000000000..ef7dd6d34
--- /dev/null
+++ b/docs/developer-guide/hexabot-nlu-engine.md
@@ -0,0 +1,168 @@
+---
+hidden: true
+icon: brain-circuit
+---
+
+# Hexabot NLU Engine
+
+The [Hexabot](https://hexabot.ai/) NLU (Natural Language Understanding) engine is a Python-based project that provides tools for building, training, and evaluating machine learning models for natural language tasks such as intent detection and language recognition. It also includes a REST API for inference, built using FastAPI.
+
+### Directory Structure
+
+* **/run.py:** The CLI tool that provides commands for training, evaluating, and managing models.
+* **/models:** Contains the different model definitions and logic for training, testing, and evaluation.
+* **/data:** Placeholder for datasets used during training and evaluation.
+* **/experiments:** Placeholder for stored models generated during training.
+* **/data\_loaders:** Classes that define the way to load datasets to be used by the different models.
+* **/main.py:** The FastAPI-based REST API used for inference, exposing endpoints for real-time predictions.
+
+### Setup
+
+**No dependencies needed besides Python 3.11.6, virtualenv, and TensorFlow.** Start developing your new model on top of this workflow by cloning this repository:
+
+```bash
+# Set up a virtualenv
+pip install virtualenv
+
+python3.11 -m venv venv
+
+source env.sh
+
+pip install -r requirements.txt
+```
+
+### Directory structure
+
+* `data`: gitignore'd, place datasets here.
+* `experiments`: gitignore'd, trained models written here.
+* `data_loaders`: write your data loaders here.
+* `models`: write your models here.
+
+### Usage
+
+**Check `models/mlp.py` and `data_loaders/mnist.py` for fully working examples.**
+
+You should run `source env.sh` on each new shell session. This activates the virtualenv and creates a nice alias for `run.py`:
+
+```bash
+$ cat env.sh
+source env/bin/activate
+alias run='python run.py'
+```
+
+Most routines involve running a command like this:
+
+```bash
+# Usage: run [method] [save_dir] [model] [data_loader] [hparams...]
+run fit myexperiment1 mlp mnist --batch_size=32 --learning_rate=0.1
+```
+
+Examples :
+
+```bash
+# Intent classification
+run fit intent-classifier-en-30072024 jisf --intent_num_labels=88 --slot_num_labels=17 --language=en
+run predict intent-classifier-fr-30072024 --intent_num_labels=7 --slot_num_labels=2 --language=fr
+
+# Language classification
+run fit language-classifier-26082023 tflc
+run predict language-classifier-26082023
+run evaluate language-classifier-26082023
+```
+
+where the `model` and `data_loader` args are the module names (i.e., the file names without the `.py`). The command above would run the Keras model's `fit` method, but it could be any custom as long as it accepts a data loader instance as argument.
+
+**If `save_dir` already has a model**:
+
+* Only the first two arguments are required and the data loader may be changed, but respecifying the model is not allowed-- the existing model will always be used.
+* Specified hyperparameter values in the command line WILL override previously used ones (for this run only, not on disk).
+
+#### `tfbp.Model`
+
+Models pretty much follow the same rules as Keras models with very slight differences: the constructor's arguments should not be overriden (since the boilerplate code handles instantiation), and the `save` and `restore` methods don't need any arguments.
+
+```python
+import tensorflow as tf
+import boilerplate as tfbp
+
+@tfbp.default_export
+class MyModel(tfbp.Model):
+ default_hparams = {
+ "batch_size": 32,
+ "hidden_size": 512,
+ "learning_rate": 0.01,
+ }
+
+ # Don't mess with the args and keyword args, `run.py` handles that.
+ def __init__(self, *a, **kw):
+ super().__init__(*a, **kw)
+
+ self.dense1 = tf.keras.layers.Dense(self.hparams.hidden_size)
+ ...
+
+ def call(self, x):
+ z = self.dense1(x)
+ ...
+```
+
+You can also write your own training loops à la pytorch by overriding the `fit` method or writing a custom method that you can invoke via `run.py` simply by adding the `@tfbp.runnable` decorator. Examples of both are available in `models/mlp.py`.
+
+#### `tfbp.DataLoader`
+
+Since model methods invoked by `run.py` receive a data loader instance, you may name your data loader methods whatever you wish and call them in your model code. A good practice is to make the data loader handle anything that is specific to a particular dataset, which allows the model to be as general as possible.
+
+```python
+import tensorflow as tf
+import boilerplate as tfbp
+
+@tfbp.default_export
+class MyDataLoader(tfbp.DataLoader):
+ default_hparams = {
+ "batch_size": 32,
+ }
+
+ def __call__(self):
+ if self.method == "fit":
+ train_data = tf.data.TextLineDataset("data/train.txt").shuffle(10000)
+ valid_data = tf.data.TextLineDataset("data/valid.txt").shuffle(10000)
+ return self.prep_dataset(train_data), self.prep_dataset(valid_data)
+
+ elif self.method == "eval":
+ test_data = tf.data.TextLineDataset("data/test.txt")
+ return self.prep_dataset(test_data)
+
+ def prep_dataset(self, ds):
+ return ds.batch(self.hparams.batch_size).prefetch(1)
+```
+
+#### API
+
+API is built using FastAPI : https://fastapi.tiangolo.com/
+
+Run the dev server in standalone with:
+
+```sh
+ENVIRONMENT=dev uvicorn main:app --host 0.0.0.0 --port 5000 --reload
+```
+
+Run the project with Docker :
+
+```sh
+docker compose -f "docker-compose.yml" up -d --build
+```
+
+### Pushing models to HuggingFace
+
+Please refer to official HF documentation on how to host models : https://huggingface.co/docs/hub/en/repositories-getting-started
+
+What is important to note is that big files should be tracked with git-lfs, which you can initialize with:
+
+```
+git lfs install
+```
+
+and if your files are larger than 5GB you’ll also need to run:
+
+```
+huggingface-cli lfs-enable-largefiles .
+```
diff --git a/docs/developer-guide/integrations/README.md b/docs/developer-guide/integrations/README.md
new file mode 100644
index 000000000..b29ff4a06
--- /dev/null
+++ b/docs/developer-guide/integrations/README.md
@@ -0,0 +1,60 @@
+---
+icon: puzzle-piece
+---
+
+# Plugins
+
+Hexabot's extensions system allows you to add new features and custom integrations. The Hexabot [Extension Library](https://hexabot.ai/extensions) offers a growing collection of plugins, channels and helpers built by the community, ready to be installed and used in your own projects. Plugins allow you to add "**Building Blocks**" that you can use within the [Visual Editor](https://docs.hexabot.ai/user-guide/visual-editor) to build your flows. Each time you install or develop a new custom plugin, a new block will appear in the visual editor's left panel under the "**Custom Blocks**" section. These plugins can range from simple utility enhancements to 3rd party integrations with external apps or systems. This page explains how to install and use existing plugins within your Hexabot project, enabling you to enhance your conversational AI with minimal effort.
+
+## **Install Plugins**
+
+Plugins are packages that are published through NPM (Node Package Manager) and can be installed using the command line. The Hexabot CLI makes the installation of any available plugin very simple and straightforward.
+
+### **Installation Process**
+
+To install a plugin, you'll use the following general command pattern in the root directory of your Hexabot project:
+
+```bash
+npm install hexabot-plugin-[name-of-the-plugin]
+```
+
+**Plugin Naming Convention:**
+
+By convention, all official Hexabot plugins and most plugins published by the community on the NPM registry will have package names that start with the prefix `hexabot-plugin-`. This makes the plugins easier to identify, search for, and install.
+
+### **Example: Install the Google Gemini Plugin for RAG**
+
+As a concrete example, let's consider the [Google Gemini Plugin](https://hexabot.ai/extensions), which enables you generate text responses along with RAG (Retrieval-Augmented Generation) capabilities using [Google’s Gemini API](https://ai.google.dev/). This plugin allows your chatbot / agent to leverage the [Knowledge Base](https://docs.hexabot.ai/user-guide/knowledge-base) when generating responses. To install this plugin:
+
+1. **Open your terminal:** Navigate to the root directory of your Hexabot project using your terminal.
+2. **Run the installation command:**
+
+```bash
+npm install hexabot-plugin-gemini
+```
+
+This command will download and install the Gemini plugin and all related dependencies.
+
+3. **Plugin Activation :** After installing a plugin, you may need to restart Hexabot for the plugin's custom block to be detected and available in the visual editor. Additional activation steps may also be required, depending on the specific plugin. Be sure to check the plugin’s installation instructions in its documentation and repository for any particular instructions.
+
+### **Important Notes:**
+
+* **Dependency Management:** During the installation process, npm will automatically handle any plugin dependencies (other packages that the plugin relies on), making setup seamless.
+* **Plugin Activation**: No additional activation step is needed, once you install the plugin, the related custom block will automatically be added to the Visual Editor. Refer to each plugin’s README for any post-install steps.
+* **Reporting Issues:** If you encounter any problems during installation, please report it to the plugin's repository or the Hexabot community. This is important to improve the plugin's stability and availability for all users.
+
+### **Using the Installed Plugin**
+
+After successful installation, a new custom block will be automatically available within the Hexabot Visual Editor. Follow these steps to start utilizing your newly installed plugin:
+
+1. **Open the Visual Editor:** Access the Hexabot Visual Editor through your web browser.
+2. **Locate the Plugin Block:** Find the plugin's custom block within the Custom blocks section of the visual editor.
+3. **Add the block to your flow:** Drag and drop the block into your conversation flow on the canvas.
+4. **Configure the Block:** Click on the block to configure its settings, such as API keys or other plugin-specific parameters.
+5. **Test your flow:** Save your flow and test it in the **Admin Console Widget** which is the chat window that show in the right bottom of the screen. Finally, send the text that would trigger the added block to experience the capabilities of the plugin you have installed.
+
+### **Additional Information:**
+
+* **Plugin Documentation:** Always consult the README.md file of the plugin (often available on the plugin's public repository or GitHub repo) for more details on how to use it.
+* **Extension Library:** Visit the :point\_right::jigsaw: [Hexabot Extensions Library](https://hexabot.ai/extensions) to discover other plugins that might enhance your flow capabilities.
+
diff --git a/docs/developer-guide/integrations/build-your-first-plugin.md b/docs/developer-guide/integrations/build-your-first-plugin.md
new file mode 100644
index 000000000..2f228c39a
--- /dev/null
+++ b/docs/developer-guide/integrations/build-your-first-plugin.md
@@ -0,0 +1,372 @@
+# Build your First Plugin
+
+Hexabot's features can be extended by developing and installing extensions from the [Extension Library](https://hexabot.ai/extensions). A plugin is an extension that allows to add features like text-to-action and third-party system integrations. Once you add a plugin, a new "**Building Block**" will appear in the [Visual Editor](https://docs.hexabot.ai/user-guide/visual-editor) for you to use when designing your flows.
+
+If you want to add your own building block, this guide will walk you through the process of developing a custom plugin for your Hexabot project.
+
+### Prerequisites
+
+* **TypeScript, Node.js and Nest.js:** Being familiar with [TypeScript](https://www.typescriptlang.org/docs/), [Node.js](https://nodejs.org/en/learn/getting-started/introduction-to-nodejs) and [Nest.js](https://nestjs.com/) makes the process of plugin development smoother. But don't worry if you're just getting started – our detailed guide will walk you through creating your first plugin.
+* **Node.js:** Ensure you have Node.js and a package manager (npm or yarn) installed.
+
+{% include "../../.gitbook/includes/untitled (1).md" %}
+
+* **Docker :** Ensure you have Docker installed.
+
+{% content-ref url="../setting-up-docker-for-development-and-production.md" %}
+[setting-up-docker-for-development-and-production.md](../setting-up-docker-for-development-and-production.md)
+{% endcontent-ref %}
+
+* **Create a new Hexabot project:** Download the Hexabot CLI and run the `hexabot create my-project` command.
+
+{% content-ref url="../../quickstart/installation.md" %}
+[installation.md](../../quickstart/installation.md)
+{% endcontent-ref %}
+
+## Plugin Folder Structure
+
+Hexabot plugins interact with Hexabot's existing boilerplate and can be managed through the Hexabot UI. Each plugin typically includes:
+
+* **A package.json file :** To define the plugin meta-data (name, description, ...) as well as extra dependencies you may need to use.
+* **Integration Code:** Code that defines how the plugin interacts with Hexabot and external APIs (like Google Gemini in this case).
+* **Settings:** Customizable settings to tailor the plugin’s behaviour.
+* **i18n translation files**
+
+A Hexabot plugins resides in the following directory `/extensions/plugins/` within the root folder of the Hexabot project. Here's the recommended project structure:
+
+
+
+## Step-by-Step Guide
+
+Creating a new plugin will help you create a new custom block in the [Visual editor](../../user-guide/visual-editor/). This guide will walk you through creating a custom plugin, using a basic example: "**A block that retrieves and displays the current time**". This approach can be expanded further to create all kinds of custom blocks, allowing you to add new functionality that aligns perfectly with your project needs.
+
+### Create Your Plugin Directory
+
+* Navigate to `extensions/plugins/` folder in your Hexabot project.
+* Create a new folder named `hexabot-plugin-time`
+
+### Create README.md
+
+Inside the `hexabot-plugin-time` folder, create `README.md` file. The file should use the Markdown syntax in order to provide an overview and essential details about the usage of your plugin.
+
+{% code fullWidth="false" %}
+```markdown
+## Plugin Name
+**Plugin Description**:
+ Briefly explains what the plugin is about.
+**Features**:
+ Key functionalities of the plugin.
+**Prerequisites**:
+ Tools, libraries or skills required.
+**Installation Instructions**:
+ Steps to set up the plugin.
+**Configuration**:
+ Details on how to configure or adapt the plugin to specific needs.
+**Usage Guide**:
+ How to use the plugin.
+```
+{% endcode %}
+
+### Create `package.json`
+
+The `package.json` is the manifest file of your plugin. It describes the plugin to Hexabot:
+
+```json
+{
+ "name": "hexabot-plugin-example",
+ "version": "1.0.0",
+ "author": "Your Name",
+ "description": "A brief description of your plugin."
+}
+```
+
+Inside the hexabot-plugin-time folder, create package.json and add the following:
+
+```json
+{
+ "name": "hexabot-plugin-time",
+ "version": "1.0.0",
+ "author": "Your Name",
+ "description": "Hexabot plugin to get the current time."
+}
+```
+
+### Create `settings.ts`
+
+The `settings.ts` file is the place where you'll be able to define the settings of your custom block, whether it's setting up API authentication or any other configurations.
+
+In the same folder, create `settings.ts` file and paste the following::
+
+```typescript
+import { PluginSetting } from '@/plugins/types';
+import { SettingType } from '@/setting/schemas/types';
+
+export default [
+ {
+ label: 'response_message',
+ group: 'default',
+ type: SettingType.multiple_text,
+ value: ['Time now is: ', 'Right now it\'s: '],
+ },
+] as const satisfies PluginSetting[];
+```
+
+Later, the block configuration menu will display these settings, as illustrated below
+
+{% include "../../.gitbook/includes/time-plugin-settings.md" %}
+
+### Create i18n Folder
+
+This folder stores translation filess for your plugin to be multilingual. You can add as many languages as needed by creating a new folder for each language under `i18n` folder. Place under each language file a JSON document that will define your translation for a specific language. For example, the file `title.json` includes the translation of your plugin name.
+
+* Inside the hexabot-plugin-time directory, create a new folder named i18n
+* Inside the i18n folder, create a new folder named en
+
+```json
+{
+ "currenttime_plugin": "Hexabot Plugin Current Time"
+}
+```
+
+Refer to this example of Gemini Plugin to better understand how to define your i18n translation string :
+
+{% embed url="https://github.com/Hexastack/hexabot-plugin-gemini/tree/main/i18n/en" %}
+
+### Building a Custom Block
+
+**Implement Block Logic (index.plugin.ts):**
+
+This plugin example returns the current time when sending 'time' keyword in the chat to trigger the conversation flow. You can learn more about creating your flow and managing blocks [here](../../quickstart/create-your-first-flow.md).
+
+Inside the same directory hexabot-plugin-time create the `index.plugin.ts` with the following code:
+
+**Let's start by importing necessary modules and services:**
+
+Import all the necessary modules, services, and types required for the plugin.
+
+```typescript
+import { Injectable } from '@nestjs/common';
+import { BlockService } from '@/chat/services/block.service';
+import { SettingService } from '@/setting/services/setting.service';
+import { Block } from '@/chat/schemas/block.schema';
+import { Context } from '@/chat/schemas/types/context';
+import {
+ OutgoingMessageFormat,
+ StdOutgoingEnvelope,
+ StdOutgoingTextEnvelope,
+} from '@/chat/schemas/types/message';
+import { BaseBlockPlugin } from '@/plugins/base-block-plugin';
+import { PluginService } from '@/plugins/plugins.service';
+import { PluginBlockTemplate } from '@/plugins/types';
+import SETTINGS from './settings';
+```
+
+**Define the plugin class and specify its template:**
+
+Create a class `CurrentTimePlugin` extending `BaseBlockPlugin` and define the plugin's template with patterns, conversation starter, and a display name.
+
+```typescript
+@Injectable()
+export class CurrentTimePlugin extends BaseBlockPlugin {
+ template: PluginBlockTemplate = {
+ patterns: ['time'],
+ starts_conversation: true,
+ name: 'Current Time Plugin',
+ };
+```
+
+* `@Injectable()`: A decorator that makes the class injectable within the NestJS which is the underlying framework for Hexabot’s API.
+* `CurrentTimePlugin extends BaseBlockPlugin`: Defines our plugin class, inheriting from BaseBlockPlugin and specifying that the settings are defined by our previously created settings.ts file.
+* `template`: A class attribute that defines the default template for the building block:
+ * `patterns`: The list of keywords that will trigger the block.
+ * `starts_conversation`: Whether the block can start a conversation or should it only be triggered by previous messages.
+ * `name`: The name of the block that will appear in the visual editor.
+
+**Constructor to initialize services:**
+
+Initialize the necessary services (`PluginService`, `BlockService`, and `SettingService`) in the constructor.
+
+```typescript
+constructor(
+ pluginService: PluginService,
+ private readonly blockService: BlockService,
+ private readonly settingService: SettingService,
+ ) {
+ super('currenttime-plugin', pluginService);
+ }
+```
+
+**Define the `getPath` method:**
+
+Adding the `getPath()` method is mandatory, which helps Hexabot to identify the directory name of the current module and locating the plugin's files.
+
+```typescript
+getPath(): string {
+ return __dirname;
+}
+```
+
+#### Define the **`process()` method to handle block main logic:**
+
+The `process()` method performs the main logic of the block:
+
+* Fetch settings and arguments.
+* Gets the current time and format it.
+* Generate a random response message by combining the formatted time with a predefined message.
+* Create an outgoing message envelope with the response text.
+* Return the message envelope.
+
+```typescript
+async process(
+ block: Block,
+ context: Context,
+ _convId: string,
+ ): Promise {
+ const settings = await this.settingService.getSettings();
+ const args = this.getArguments(block);
+
+ const now = new Date();
+ const formattedTime = now.toLocaleTimeString('en-US', { hour12: false });
+
+ const response: string =
+ this.blockService.getRandom([...args.response_message]) + formattedTime;
+
+ const msg: StdOutgoingTextEnvelope = {
+ format: OutgoingMessageFormat.text,
+ message: {
+ text: this.blockService.processText(
+ response,
+ context,
+ {},
+ settings,
+ ),
+ },
+ };
+
+ return msg;
+ }
+}
+```
+
+#### Final Code:
+
+:tada: Below is the complete code for the `CurrentTimePlugin`:
+
+```typescript
+import { Injectable } from '@nestjs/common';
+import { BlockService } from '@/chat/services/block.service';
+import { SettingService } from '@/setting/services/setting.service';
+import { Block } from '@/chat/schemas/block.schema';
+import { Context } from '@/chat/schemas/types/context';
+import {
+ OutgoingMessageFormat,
+ StdOutgoingEnvelope,
+ StdOutgoingTextEnvelope,
+} from '@/chat/schemas/types/message';
+import { BaseBlockPlugin } from '@/plugins/base-block-plugin';
+import { PluginService } from '@/plugins/plugins.service';
+import { PluginBlockTemplate } from '@/plugins/types';
+
+import SETTINGS from './settings';
+
+@Injectable()
+export class CurrentTimePlugin extends BaseBlockPlugin {
+ template: PluginBlockTemplate = {
+ // default trigger for you custom block
+ patterns: ['time'],
+ // if set to true then your block comes as entrypoint by default
+ starts_conversation: true,
+ // displayed name for your plugin
+ name: 'Current Time Plugin',
+ };
+
+ constructor(
+ pluginService: PluginService,
+ private readonly blockService: BlockService,
+ private readonly settingService: SettingService,
+ ) {
+ super('currenttime-plugin', pluginService);
+ }
+
+ getPath(): string {
+ return __dirname;
+ }
+
+ async process(
+ block: Block,
+ context: Context,
+ _convId: string,
+ ): Promise {
+ const settings = await this.settingService.getSettings();
+ const args = this.getArguments(block);
+
+ const now = new Date();
+ const formattedTime = now.toLocaleTimeString('en-US', { hour12: false });
+
+ /**
+ * getRandom() function will pick randomly a string from response_message value
+ * array defined in the settings file to build the response.
+ */
+ const response: string =
+ this.blockService.getRandom([...args.response_message]) +
+ ' ⌚ ' +
+ formattedTime;
+
+ /**
+ * returned response from your custom block when triggering it, in this example
+ * it returns a text message displaying time now.
+ */
+ const msg: StdOutgoingTextEnvelope = {
+ format: OutgoingMessageFormat.text,
+ message: {
+ text: this.blockService.processText(
+ response,
+ context,
+ {},
+ settings,
+ ),
+ },
+ };
+
+ return msg;
+ }
+}
+
+```
+
+### Test your plugin
+
+1. **Restart Hexabot API service** so that it recognises the newly added plugin. If you are using the development mode (using the \`_**hexabot dev**_\` CLI command), the API should restart automatically. In case you have installed extra node dependencies, then you may need to stop/start the service.
+2. **Test in Visual Editor:** Open the Visual Editor, your custom block named **Current Time Plugin** should be available within the left panel under the "**Custom Blocks**" section. Add it to your flow and use the "_time"_ keyword in the **Admin Chat Console**, the block should then be triggered and return the formatted time.
+
+\
+The following represents what your custom plugin will look like based on the example above:
+
+
+
+## Publishing your plugin
+
+After completing your plugin, be sure to connect with the Hexabot community on Discord to showcase your plugin and work in the _show-n-tell_ channel.
+
+Consider publishing your plugin to a repository (e.g., NPM, GitHub) for others to use and continue to improve it.
+
+### Hexabot's Extensions Library
+
+The Hexabot [Extension Library](https://hexabot.ai/extensions) is a collection of extensions built by the community, for the community. Contributors can share their extensions, allowing everyone to benefit from a growing collection of plugins, channels, and helpers to enhance their conversational AIs.
+
+## Plugins examples
+
+{% embed url="https://github.com/Hexastack/hexabot-plugin-gemini" %}
+
+{% embed url="https://github.com/Hexastack/hexabot-plugin-chatgpt" %}
+
+Remember that the best way to learn is to dive in, experiment, and build. Don't hesitate to refer back to the core Hexabot documentation and our Discord community as you continue your development journey!
diff --git a/docs/developer-guide/integrations/hexabot-plugin-development.md b/docs/developer-guide/integrations/hexabot-plugin-development.md
new file mode 100644
index 000000000..340ba2c11
--- /dev/null
+++ b/docs/developer-guide/integrations/hexabot-plugin-development.md
@@ -0,0 +1,37 @@
+# Hexabot Plugin Development
+
+Hexabot is designed to be a versatile and extensible chatbot platform. One of its core strengths lies in its plugin system, which allows developers to drastically expand its capabilities beyond the built-in features. Plugins in Hexabot are essentially self-contained modules that integrate seamlessly into the platform, providing a way to introduce custom logic, connect to external services.
+
+At its core, the plugin helps create custom blocks that can be added to the Hexabot’s block library (the blocks library is explained more deeply in the[ Visual Editor](../../user-guide/visual-editor/) section). These new custom blocks allow you to extend the functionality of the conversation flows, meaning your chatbot can handle a wide variety of tasks, like text-to-action response or even complex third-party system integrations.
+
+## Why Develop Hexabot Plugins?
+
+* **Custom Functionality:** Implement specific logic tailored to your unique use case.
+* Third-Party Integrations: Connect Hexabot to external APIs, databases, and other services.
+* **Enhanced Automation:** Create advanced conversational actions, such as data lookups or complex workflows.
+* **Offer a native product experience:** Add native integration with your product by providing a dedicated plugin for Hexabot, developers and startup founders can offer their product and services directly within the Hexabot ecosystem.
+* **Expand Hexabot ecosystem:** Share your plugins with other Hexabot users through the Extension Library. Your plugins can become a valuable tool for other users, empowering Hexabot community to learn, grow, and achieve more, together (You can learn more about the extension library in the[ Hexabot’s Extensions Library](https://hexabot.ai/extensions) section).
+
+### Plugin Structure
+
+A typical Hexabot plugin, residing within the /extensions/plugins/ directory of the Hexabot project, adheres to the following recommended structure:
+
+```
+hexabot-plugin-example/
+│
+├── README.md // Plugin documentation
+├── index.plugin.ts // Main plugin entry point
+├── package.json // Plugin manifest
+├── settings.ts // Plugin settings
+├── i18n/ // Translation directory
+│ └── en/
+│ └── title.json
+```
+
+Let’s break down each component:
+
+1. `README.md`: Provides an overview, instructions, and other relevant information about your plugin. The documentation should clearly explain what the plugin does, its features, any prerequisites, installation instructions, configuration details, and usage examples.
+2. `index.plugin.ts`: The heart of your plugin. This file contains the core logic that will govern the plugin's behaviour. This includes how the plugin interacts with Hexabot and any external services it may utilize.
+3. `package.json`: Acts as the manifest for the plugin. It’s where you define the plugin's name, version, dependencies, and other essential metadata required for Hexabot to properly identify and handle the plugin.
+4. `settings.ts`: Defines the customizable settings for your plugin block. This will allow you to tweak its behaviour in the Visual editor. You'll be able to define UI elements such as Text Inputs, Checkboxes, etc.
+5. `i18n/`: The internationalization folder where you store translations for your plugin, allowing it to be localized for different languages. Each language gets a separate folder (e.g., `en` for English, `fr` for French) containing translation files (e.g., title.json for your plugin’s display name).
diff --git a/docs/developer-guide/setting-up-docker-for-development-and-production.md b/docs/developer-guide/setting-up-docker-for-development-and-production.md
new file mode 100644
index 000000000..6f1459869
--- /dev/null
+++ b/docs/developer-guide/setting-up-docker-for-development-and-production.md
@@ -0,0 +1,53 @@
+---
+icon: docker
+---
+
+# Setting Up Docker for Development and Production
+
+Hexabot uses Docker for development purposes as well as streamline deployment, running essential services like the API, frontend, and MongoDB in containers. The provided Docker Compose setup ensures quick and consistent startup, eliminating manual configuration complexities.
+
+{% hint style="info" %}
+The following is an example on how to install Docker on a Ubuntu machine. If you have a different OS, please check the official guide on how to install Docker on your system [https://docs.docker.com/engine/install/](https://docs.docker.com/engine/install/)
+{% endhint %}
+
+1. Set up Docker's apt repository:
+
+```bash
+ # Add Docker's official GPG key:
+ sudo apt-get update
+ sudo apt-get install ca-certificates curl
+ sudo install -m 0755 -d /etc/apt/keyrings
+ sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
+ sudo chmod a+r /etc/apt/keyrings/docker.asc
+
+ # Add the repository to Apt sources:
+echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
+$(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
+sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
+
+# Update the system:
+sudo apt-get update
+```
+
+2. Install Docker Community Edition:
+
+```bash
+sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
+```
+
+3. Check if Docker is running:
+
+
sudo systemctl status docker
+
+
+4. Add your user to the Docker group:
+
+```bash
+sudo usermod -aG docker $USER
+```
+
+5. To apply the new group membership, log out of the server and back in, or type the following:
+
+```bash
+su - ${USER}
+```
diff --git a/docs/developer-guide/setup-node.js-with-nvm.md b/docs/developer-guide/setup-node.js-with-nvm.md
new file mode 100644
index 000000000..2ae81f981
--- /dev/null
+++ b/docs/developer-guide/setup-node.js-with-nvm.md
@@ -0,0 +1,47 @@
+---
+icon: node
+---
+
+# Setup Node.js with NVM
+
+Node.js is a pre-requisite to run both the Hexabot CLI and a Hexabot project since the API is built on NestJS. Using [NVM](https://github.com/nvm-sh/nvm) (Node Version Manager) simplifies managing the required Node.js version. When creating a new Hexabot project, the structure includes source folders like **extensions** to add custom plugins, helpers and channels, making Node.js essential tool for smooth development and customization.
+
+If you are new to NVM, please follow these steps to install:
+
+1. Update the system:
+
+```bash
+sudo apt update
+```
+
+2. Install NVM:
+
+```bash
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
+```
+
+Close and reopen your terminal to start using nvm or run the following to use it now:
+
+```bash
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
+[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
+```
+
+3. Verify the NVM installation:
+
+```bash
+nvm --version
+```
+
+4. Install Node.js version 18.17.0 or higher :
+
+```bash
+nvm install 18.17.0
+```
+
+5. Check default Node.js version:
+
+```bash
+node --version
+```
diff --git a/docs/developer-guide/smtp-configuration-and-emails.md b/docs/developer-guide/smtp-configuration-and-emails.md
new file mode 100644
index 000000000..c19a0848f
--- /dev/null
+++ b/docs/developer-guide/smtp-configuration-and-emails.md
@@ -0,0 +1,55 @@
+---
+icon: envelope
+---
+
+# SMTP Configuration and Emails
+
+{% hint style="info" %}
+Make sure you have a **.env** file created under the `docker/` folder. You can either copy .env.example or run `hexabot init` to create that file. The **.env** file contains environment variables that we use for configuring the Hexabot instance.
+{% endhint %}
+
+## **Development Environment**
+
+You have two options for handling email functionality during development:
+
+1. **Without SMTP**:\
+ You can run the app without using SMTP by setting the environment variable `EMAIL_SMTP_ENABLED=false`. Simply run `hexabot start` and invite a new user. The app will behave as though it is sending emails, but nothing will happen in the background.
+2. **Using smtp4dev for Testing**:\
+ We use `smtp4dev` for email testing in the development environment. To use this service, set the `EMAIL_SMTP_ENABLED` to `true` in the `.env` file and restart the app using the command `hexabot start --services smtp4dev`. Then, invite a new user or reset a password and check whether emails are received in the smtp4dev UI interface at [http://localhost:9002/](http://localhost:9002/). This also applies to other scenarios like the confirmation email after signup and the password reset email.
+
+**SMTP Config (Local Dev)**
+
+For local development with `smtp4dev`, configure the following environment variables:
+
+```makefile
+APP_SMTP_4_DEV_PORT=9002
+EMAIL_SMTP_ENABLED=true
+EMAIL_SMTP_HOST=smtp4dev
+EMAIL_SMTP_PORT=25
+EMAIL_SMTP_SECURE=false
+EMAIL_SMTP_USER=dev_only
+EMAIL_SMTP_PASS=dev_only
+EMAIL_SMTP_FROM=noreply@example.com
+```
+
+## **Production Environment**
+
+In production, use a third-party SMTP service by configuring the environment variables before running `hexabot start`, here is an example:
+
+```makefile
+EMAIL_SMTP_ENABLED=true
+EMAIL_SMTP_HOST=sandbox.smtp.mailtrap.io
+EMAIL_SMTP_PORT=2525
+EMAIL_SMTP_SECURE=false # Set to true if you are using a secure SMTP server that uses SSL/TLS
+EMAIL_SMTP_USER=***************
+EMAIL_SMTP_PASS=***************
+EMAIL_SMTP_FROM=from@example.com
+```
+
+## **Customizing Email Templates**
+
+Email templates are located in the `api/src/templates` folder. These templates are written in **MJML syntax** (you can read more about [MJML here](https://mjml.io/)).
+
+## **Translations**
+
+Email strings are translated using the i18n system. You can find the translation files in the `api/src/config/i18n` folder.
diff --git a/docs/developer-guide/training-custom-nlu-models-with-ludwig-ai.md b/docs/developer-guide/training-custom-nlu-models-with-ludwig-ai.md
new file mode 100644
index 000000000..cf8637abb
--- /dev/null
+++ b/docs/developer-guide/training-custom-nlu-models-with-ludwig-ai.md
@@ -0,0 +1,172 @@
+---
+icon: head-side-gear
+---
+
+# Training custom NLU Models with Ludwig AI
+
+[Ludwig AI](https://ludwig.ai/) is a powerful, low-code machine learning framework that simplifies the process of building and training AI models. Hexabot leverages Ludwig AI to offer a customizable and robust NLU Engine. This page will guide you through the process of training your own Natural Language Understanding (NLU) models using Ludwig AI, which you can then integrate into your Hexabot chatbot.
+
+### Introduction to Ludwig AI for Hexabot NLU
+
+The Hexabot Ludwig NLU Engine allows you to use custom NLU models for intent detection, entity recognition, and more, without writing extensive code. Ludwig AI's declarative approach uses configuration files (YAML) to define your model architecture and training process. This makes it accessible for users with varying levels of AI expertise to create tailored NLU solutions for their Hexabot projects.
+
+### Training Your NLU Models: Two Approaches
+
+Hexabot offers two primary approaches for training your Ludwig AI NLU models:
+
+1. **Local Setup:** This method involves cloning the [Hexabot Ludwig NLU repository](https://github.com/Hexastack/hexabot-ludwig-nlu) locally, setting up a Python virtual environment, and training the models directly on your machine. This approach is suitable for users who prefer hands-on control and local development.
+2. **Dockerized Environment:** This approach utilizes Docker containers to create an isolated and reproducible training environment. It simplifies dependency management and ensures consistency across different systems. This method is recommended for users who value ease of setup and portability.
+
+Choose the approach that best suits your technical preferences and environment. The following sections will detail the setup and training process for both methods.
+
+### Prerequisites
+
+Before you begin training your Ludwig AI models, ensure you have the following prerequisites installed and set up:
+
+* **Python:** Python 3.8 or higher is required.
+* **Ludwig AI:** Install Ludwig AI following the instructions on the [official Ludwig AI website](https://ludwig.ai/latest/).
+* **GPU (Optional but recommended):** While not mandatory, using a GPU will significantly speed up the training process, especially for complex models and large datasets.
+* **Docker (Optional):** Docker is required if you intend to use the Dockerized training environment.
+
+### Local Setup for Training
+
+To train your Ludwig models locally, follow these steps to set up your environment:
+
+#### 1. Clone the Repository
+
+First, clone the Hexabot Ludwig NLU engine repository from GitHub:
+
+```bash
+git clone https://github.com/Hexastack/hexabot-ludwig-nlu.git
+cd hexabot-ludwig-nlu
+```
+
+#### 2. Create a Virtual Environment
+
+It's recommended to work within a virtual environment to isolate project dependencies. Open your terminal and run the following commands:
+
+```bash
+python3 -m venv venv
+source venv/bin/activate # On Linux/macOS
+# venv\Scripts\activate # On Windows
+```
+
+#### 3. Install Dependencies
+
+Navigate to the root directory of your Ludwig NLU engine project (where the `requirements.txt` file is located) and install the necessary Python packages:
+
+```bash
+pip install -r requirements.txt
+```
+
+### Training Models Locally
+
+Once your environment is set up, you can train your NLU models using the Ludwig CLI.
+
+1. **Prepare your Training Data:** Ludwig AI supports various data formats, including CSV, JSON, Parquet, and more. For this example, we will focus on CSV format. See the [Ludwig documentation on supported dataset formats](https://ludwig.ai/latest/user_guide/datasets/supported_formats/) for a comprehensive list and details.
+
+ \
+ **CSV Training Data Example:**
+
+ Your CSV training data should be structured with columns representing your input features (e.g., utterance for user text) and output features (e.g., intent for the detected intent). Here's an example structure for intent classification:
+
+
+
+ ```csv
+ utterance,intent
+ "What's the weather like today?",weather_inquiry
+ "Book a flight to Paris",book_flight
+ "Set an alarm for 7 AM",set_alarm
+ "Tell me a joke",tell_joke
+ "Order a pizza",order_food
+ ```
+
+ \
+ In this example:
+
+ * The utterance column contains the user input text.
+ * The intent column specifies the corresponding intent label for each utterance.
+
+ You can expand this structure to include columns for entities or other relevant features, depending on your NLU tasks. Ensure your CSV file is saved in the `/data/train.csv` path, or adjust the path in the training command accordingly.
+2. **Configure your Model:** Ludwig models are configured using YAML files. The example configuration file is located at `/src/config.yaml`. You will need to adjust this configuration file to define your model architecture, input features (text data), and output features (intents, entities). Refer to the [Ludwig documentation](https://ludwig.ai/latest/configuration/) for detailed information on configuration options.
+3. **Run the Training Command:** Execute the following command in your terminal to start the training process: \
+ Adjust the paths to `--config`, `--dataset`, and `--output_directory` according to your project structure and data locations.
+
+ ```bash
+ ludwig experiment --config /src/config.yaml \
+ --dataset /data/train.csv \
+ --output_directory /results
+ ```
+
+ * `--config /src/config.yaml`: Specifies the path to your Ludwig configuration file.
+ * `--dataset /data/train.csv`: Specifies the path to your training dataset.
+ * `--output_directory /results`: Defines the directory where Ludwig will save the training results, including the trained model.
+
+### Dockerized Training
+
+For a more isolated and reproducible training environment, you can use Docker.
+
+1. **Build and Run the Docker Container:** Navigate to the root of your Ludwig NLU engine project. Ensure you have Docker installed and running. Use the following command to start the training process within a Docker container:
+
+ ```bash
+ docker compose -f docker-compose.train.yml up
+ ```
+
+ * This command uses the `docker-compose.train.yml` file (provided in the repository) to build and run a Docker container pre-configured for Ludwig training.
+ * **Environment Variables:** The model's name and dataset paths are typically configured via environment variables within the `docker-compose.train.yml` file or a `.env.train` file (example provided as `.env.train.example`). Make sure to adjust these environment variables to match your desired model name and dataset location.
+2. **Monitor Training:** Docker will run the training process in the container. You can monitor the logs using `docker compose logs -f` to track the training progress.
+
+### Using Your Trained Models
+
+Once the training process is complete, Ludwig will save the trained model in the specified output directory (e.g., `/results/experiment_run_0/model`).
+
+You can then use this trained model for:
+
+* **Inference (Prediction):** Test your model with new data using the `ludwig predict` command as shown in the README to evaluate its performance.
+* **Serving (API):** Set up a local or cloud-based API using `ludwig serve` or Dockerized serving options ( `docker-compose.serve-local.yml` or `docker-compose.serve-hf.yml`) to make your NLU model accessible to Hexabot for real-time intent and entity detection.
+
+Detailed instructions on integrating your trained Ludwig model with Hexabot, including configuring the Ludwig NLU Engine settings in the Hexabot UI and using the Ludwig Helper extension, can be found in other sections of the Hexabot documentation.
+
+### Uploading Models to Hugging Face (Optional)
+
+Sharing your trained models on the Hugging Face Hub can be beneficial for collaboration, deployment, and making your models publicly accessible.
+
+1. **Hugging Face Setup:**
+ * **Create a Hugging Face Account:** If you don't have one, sign up for a free account on [Hugging Face](https://huggingface.co/).
+ * **Set up SSH Key:** Configure an SSH key for your Hugging Face account as described in the [Hugging Face documentation](https://huggingface.co/docs/hub/security-git-ssh). This is required for pushing models to the Hub via Git.
+2. **Upload Steps:**
+ * **Create a Repository:** Use the Hugging Face CLI to create a new repository for your model:
+
+ ```bash
+ huggingface-cli repo create
+ ```
+
+ Replace `` with your desired repository name (e.g., `hexabot-intent-model`).
+ * **Clone the Repository:** Clone the newly created repository to your local machine:
+
+ ```bash
+ git clone git@hf.co:/.git
+ cd
+ ```
+
+ Replace `` and `` with your Hugging Face username and repository name.
+ * **Track Large Files (Git LFS):** Initialize Git LFS and track the model weights files (typically located in the `model/model_weights` directory within your Ludwig output):
+
+ ```bash
+ git lfs install
+ git lfs track "model/model_weights"
+ ```
+ * **Copy Model Files:** Copy the contents of your trained model directory (e.g., `/results/experiment_run_0/model`) into the cloned repository directory.
+ * **Commit and Push:** Add the files, commit your changes, and push them to the Hugging Face Hub:
+
+ ```bash
+ git add .
+ git commit -m "Upload trained Ludwig NLU model"
+ git push
+ ```
+
+Your trained Ludwig NLU model is now uploaded to your Hugging Face repository, ready to be used and shared! You can then reference this model in your Hexabot Ludwig NLU Engine configuration (e.g., in the `config.yaml` or via environment variables) to use your custom-trained model for your chatbot.
+
+#### Next Steps: Integrating with Hexabot
+
+Now that you have learned how to train your custom NLU models using Ludwig AI, the next step is to integrate these models into your Hexabot chatbot. To understand how to configure the Ludwig NLU Engine within Hexabot and utilize your trained models for intent and entity recognition in your chatbot flows, please refer to the [Ludwig NLU Engine](../user-guide/nlu/nlu-engines/ludwig-nlu-engine.md) page in the Hexabot User Guide. This page provides detailed instructions on setting up and using the Ludwig NLU Engine within your Hexabot project.
diff --git a/docs/faq/how-can-i-add-the-chatbot-widget-to-my-website.md b/docs/faq/how-can-i-add-the-chatbot-widget-to-my-website.md
new file mode 100644
index 000000000..8b2291327
--- /dev/null
+++ b/docs/faq/how-can-i-add-the-chatbot-widget-to-my-website.md
@@ -0,0 +1,108 @@
+---
+icon: comment-dots
+---
+
+# How can I add the Chatbot Widget to my Website?
+
+The [Hexabot](https://hexabot.ai/) Live Chat Widget is a React-based embeddable widget that allows you to integrate real-time chat functionality into your website. This guide will walk you through how to add the widget to your website, customize it to fit your needs, and manage its settings.
+
+
Embed Chatbot Widget in a Website
+
+### Embedding the Chat Widget
+
+Once you have built the widget, embedding it on any webpage is straightforward. Here's how to add it:
+
+#### Step-by-Step Instructions
+
+1. **Include the Required Scripts**: First, include the React and ReactDOM libraries, as well as the Hexabot widget script.
+
+ ```
+
+
+
+ ```
+2. **Add the Widget Container**: Create a container where the widget will be rendered.
+
+ ```
+
+ ```
+3. **Attach the Shadow DOM**: This prevents the CSS of your website from conflicting with the chat widget's CSS by using the shadow DOM.
+
+ ```
+
+ ```
+
+#### Using the Official Widget CDN
+
+If you want to use the official widget and receive updates automatically, you can use the following CDN URL:
+
+```
+
+```
+
+Or, you can indicate a specific version by replacing the latest tag with the widget version tag:
+
+```
+
+```
+
+These scripts will load the Hexabot widget directly from the JsDelivr CDN, which pulls from the package published on the [NPM registry](https://www.npmjs.com/package/hexabot-chat-widget).
+
+### Widget Settings
+
+
Web Channel Widget Settings
+
+The widget settings can be managed through the Hexabot Admin through the side menu on the left (access "Settings > Web Channel"). Below is a list of customizable settings:
+
+* **Allowed Upload Mime Types**: Define the types of files users can upload (e.g., audio, images, text).
+* **Max Upload Size**: Set the maximum file size for uploads (in bytes).
+* **Enable Features**: Enable or disable features like geolocation sharing, attachment uploader, and emoji picker.
+* **Chatbot Avatar**: Specify the avatar URL for the chatbot (e.g., `https://eu.ui-avatars.com/api/?name=Hexa+Bot&size=64`).
+* **Chat Window and Widget Titles**: Set custom titles for the chat window and widget.
+* **Widget Theme**: Choose a color theme for the widget (e.g., teal).
+* **Greeting Message**: Customize the greeting message (e.g., "Welcome! Ready to start a conversation with our chatbot?").
+* **Persistent Menu and Input Settings**: Display a persistent menu, enable 'Get Started' button, and manage user input.
+* **Allowed Domains**: Define the domains where the widget can be embedded (e.g., `http://localhost:8080`).
+* **Verification Token**: Set a token for verifying widget requests.
+
+### Customizing the Widget
+
+The Hexabot Live Chat Widget allows you to customize its appearance and behavior to match your website. You can:
+
+* **Change Colors and Fonts**: Match the chat widget's design to your website's branding by modifying its SCSS styles.
+* **Configure User Settings**: Customize user settings like the chatbot's language and response preferences.
+
+To build your own widget, you can modify the styles or behavior using the widget’s source code.
+
+### Examples
+
+As a proof of concept, we have developed a [WordPress plugin](https://github.com/hexastack/hexabot-wordpress-live-chat-widget) that makes it easy to embed the chat widget into a WordPress website.
+
+### Summary
+
+Adding the Hexabot Live Chat Widget to your website is straightforward and provides robust customization options for adapting it to your specific needs. By leveraging the widget’s SCSS styles, shadow DOM for isolated styling, and various settings in the Hexabot Admin UI, you can seamlessly integrate real-time chatbot functionality into your website.
+
+If you have any questions or need assistance, feel free to reach out to the Hexabot community or consult the Hexabot documentation.
diff --git a/docs/faq/how-can-i-deploy-my-hexabot-using-nginx.md b/docs/faq/how-can-i-deploy-my-hexabot-using-nginx.md
new file mode 100644
index 000000000..2e5a01814
--- /dev/null
+++ b/docs/faq/how-can-i-deploy-my-hexabot-using-nginx.md
@@ -0,0 +1,296 @@
+---
+icon: arrow-up-from-square
+---
+
+# How can I deploy my Hexabot using NGINX ?
+
+### Introduction
+
+This documentation outlines two methods for deploying your Hexabot project in a production environment using NGINX and Let's Encrypt for SSL certificate :
+
+1. [**Method 1: Using Nginx as a service and Certbot for SSL**](how-can-i-deploy-my-hexabot-using-nginx.md#method-1-using-nginx-as-a-service-and-certbot-for-ssl)
+2. [**Method 2: Using Dockerized Nginx and Certbot services**](how-can-i-deploy-my-hexabot-using-nginx.md#method-2-using-dockerized-nginx-and-certbot-services)
+
+### Prerequisites
+
+Before starting, ensure you have the following:
+
+#### **Step 1: Server Requirements**
+
+* A server running a Linux distribution with SSH enabled.
+* These instructions are based on Ubuntu, so adapt as needed for other distributions.
+
+#### Step 2: Install Required Software
+
+* #### Install Docker
+
+{% content-ref url="../developer-guide/setting-up-docker-for-development-and-production.md" %}
+[setting-up-docker-for-development-and-production.md](../developer-guide/setting-up-docker-for-development-and-production.md)
+{% endcontent-ref %}
+
+* #### Install NPM
+
+{% include "../.gitbook/includes/untitled (1).md" %}
+
+***
+
+#### Step 3: Setup Hexabot project
+
+1. Install the Hexabot CLI:
+
+```bash
+npm install -g hexabot-cli
+```
+
+2. Create new project:
+
+```bash
+ hexabot create my-chatbot
+ cd my-chatbot/
+```
+
+ Or clone an existing project of yours:
+
+```bash
+ git clone git@github.com:YOUR_ORG/my-chatbot.git
+ cd my-chatbot/
+```
+
+3. Environment Setup:
+
+To configure the environment variables, use the following command:
+
+```bash
+hexabot init
+```
+
+This command will copy the `.env.example` file to `.env` in the `./docker` directory if the file does not already exist
+
+4. Update your `.env` file for production, especially the following ones:
+
+
Variable Name
Example Value
Env variable description
NODE_ENV
production
Environment Mode
APP_DOMAIN
mychatbot.ai
Application Domain Name
API_ORIGIN
https://mychatbot.ai/api
The API endpoint will be used to communicate with the backend
FRONTEND_BASE_URL
https://mychatbot.ai
The API endpoint will be used to communicate with the frontend
FRONTEND_ORIGIN
http://mychatbot.ai, https://mychatbot.ai
The origins that will be accepted by the API. A list of permitted origins for cross-origin requests
NEXT_PUBLIC_API_ORIGIN
https://mychatbot.ai/api
Next.js API endpoint
JWT_SECRET
346998ba1f171f107433
Secret to encrypt JWT token
SESSION_SECRET
27feaf70d2c78892bf49
Secret to encrypt session token
HTTPS_ENABLED
true
Https setting
INVITATION_JWT_SECRET
51c8ea00d82eb10ee226
Secret to encrypt invitation token
PASSWORD_RESET_JWT_SECRET
5ee97916017176d1ca6c
Secret to encrypt reset password token
CONFIRM_ACCOUNT_SECRET
80f74dce70e5385bf80b
Secret to encrypt confirm account token
MONGO_USER
my_mongo_username
Mongodb username
MONGO_PASSWORD
my_mongo_password
Mongodb password
AUTH_TOKEN
c97643c1c1e5e9dc5745
Secret to encrypt NLU token
+
+Note that you can also adjust the default token expirations durations as needed.
+
+{% hint style="info" %}
+To be able to send email you will need to configure SMTP. Learn how to configure SMTP environment variables by following our detailed [SMTP setup guide](../developer-guide/smtp-configuration-and-emails.md)[.](../developer-guide/smtp-configuration-and-emails.md)
+{% endhint %}
+
+### **Method 1 : Using Nginx as a service and Certbot for SSL**
+
+#### Step 1: Run your Hexabot project in production mode:
+
+{% hint style="info" %}
+If you're starting with a fresh installation and not using a DB backup, it's recommended to run Hexabot in development mode the first time. This allows for automatic seeding of essential data into the DB.
+{% endhint %}
+
+```bash
+hexabot start
+# Or include additional services you may want to use
+hexabot start --services ollama,influxdb
+```
+
+Note that this command will start all the services (api, frontend, mongodb, ...) as Docker containers and other optional services that may provide.
+
+#### Step 2: Install Nginx
+
+Deploying an Hexabot project on production requires you to setup a HTTP Web Server like Apache2, HAProxy or Nginx to secure communications using SSL, establish access per domain name, and a lot of other capabilities such as rate limiting for example to help protect against abuse and prevent server overload. In this guide, we will walk you through a typical HTTP Web Server setup using Nginx and Certbot for SSL certificate generation.
+
+1. Update the system:
+
+```bash
+sudo apt update
+```
+
+2. Install Nginx:
+
+```bash
+sudo apt install nginx
+```
+
+3. Verify the Nginx installation:
+
+```bash
+nginx -v
+```
+
+4. Start Nginx:
+
+```bash
+sudo systemctl start nginx
+```
+
+5. Check the Nginx status:
+
+```bash
+sudo systemctl status nginx
+```
+
+***
+
+#### Step 3: Configure Nginx
+
+1. Replace Nginx server configuration with the following : **/etc/nginx/sites-available/default**.
+
+```bash
+server {
+ listen 80;
+ server_name mychatbot.ai; # You will need to update this to use your own domain
+ server_tokens off;
+ client_max_body_size 20M;
+
+ location / {
+ proxy_set_header X-Forwarded-Proto https;
+ proxy_set_header X-Url-Scheme $scheme;
+ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+ proxy_set_header Host $http_host;
+ proxy_redirect off;
+ proxy_pass http://localhost:8080; # Make sure to use the port configured in .env file
+ }
+
+ location /api/ {
+ rewrite ^/api/?(.*)$ /$1 break;
+ proxy_pass http://localhost:4000; # Make sure to use the port configured in .env file
+ proxy_http_version 1.1;
+ proxy_set_header X-Forwarded-Host $host;
+ proxy_set_header X-Forwarded-Server $host;
+ proxy_set_header X-Real-IP $remote_addr;
+ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+ proxy_set_header X-Forwarded-Proto $scheme;
+ proxy_set_header Host $http_host;
+ proxy_set_header Upgrade $http_upgrade;
+ proxy_set_header Connection "Upgrade";
+ proxy_set_header X-NginX-Proxy false;
+ proxy_pass_request_headers on;
+ }
+
+ location ~* \.io {
+ rewrite ^/api/?(.*)$ /$1 break;
+ proxy_set_header X-Real-IP $remote_addr;
+ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+ proxy_set_header Host $http_host;
+ proxy_set_header X-NginX-Proxy false;
+
+ proxy_pass http://localhost:4000; # Make sure to use the port configured in .env file
+ proxy_redirect off;
+
+ proxy_http_version 1.1;
+ proxy_set_header Upgrade $http_upgrade;
+ proxy_set_header Connection "upgrade";
+ }
+}
+```
+
+#### Step 4: Generate SSL certificate using Certbot
+
+1. Install Certbot:
+
+```bash
+sudo apt install certbot python3-certbot-nginx
+```
+
+2. Obtain an SSL certificate:
+
+```bash
+sudo certbot --nginx
+```
+
+3. (Optional) Automate SSL renewal:
+
+```bash
+sudo crontab -e
+```
+
+4. Add the following line:
+
+```
+0 12 * * * certbot renew --quiet
+```
+
+**Step 5: Reload Nginx with new configuration**
+
+1. Test configuration syntax:
+
+```bash
+sudo nginx -t
+```
+
+If you get an error please make sure you don't have any syntax error in `/etc/nginx/sites-available/default`
+
+2. Reload Nginx with new configuration:
+
+```bash
+sudo systemctl reload nginx
+```
+
+***
+
+Access your domain using HTTPS (eg. https://mychatbot.ai) to check if you have successfully deployed your Hexabot project using Nginx! 🚀🎉. Feel free to ask for support from the community on our Discord channel.
+
+## **Method 2: Using Dockerized Nginx and Certbot services** :
+
+This guide will help you set up Nginx with SSL using Docker and Certbot for your Hexabot project.
+
+#### Step 1: Copy Required Files for Dockerized Nginx and Certbot
+
+To use the Dockerized version of Nginx and Certbot:
+
+1. Download the following files from the Hexabot GitHub repository:
+ * docker/nginx
+ * docker/docker-compose.nginx.yml
+ * docker/docker-compose.nginx.prod.yml
+ * docker/init-letsencrypt.sh
+2. Copy these files under the `my-chatbot/docker` directory of your project.
+
+#### Step 2: Initialize SSL with Certbot
+
+1. Navigate to the `my-chatbot/docker` directory:
+
+```sh
+cd my-chatbot/docker
+```
+
+2. **Optional**: If you'd like to test your setup without hitting request limits for SSL certificates, set the staging variable to 1 in the `init-letsencrypt.sh` script before running it:
+
+```sh
+staging=1
+```
+
+After confirming the setup, set the `staging` variable back to `0` to request live certificates.
+
+3. Run the `init-letsencrypt.sh` script:
+
+Make sure to set the `APP_DOMAIN` variable to your application domain name in the`.env` file. It's recommended also to use a valid email address so make sure to set the `SSL_EMAIL` variable as well.
+
+```sh
+APP_DOMAIN=mychatbot.ai
+SSL_EMAIL=hello@hexabot.ai
+```
+
+You can test the DNS configuration by running one of these commands:
+
+```sh
+nslookup mychatbot.ai
+```
+
+Or
+
+```sh
+dig mychatbot.ai
+```
+
+Make the `init-letsencrypt.sh` script executable by granting it execute permissions.
+
+```sh
+chmod +x init-letsencrypt.sh
+```
+
+Now you will be able to run the script
+
+```sh
+./init-letsencrypt.sh
+```
+
+#### Step 3: Verify Deployment
+
+Once the script completes, run `docker ps` verify that your Nginx and Certbot docker containers are up and running. Access your Hexabot instance via the domain you specified (e.g., `https://mychatbot.ai`) to check if SSL certificates have been generated and are properly installed.
diff --git a/docs/introduction/features.md b/docs/introduction/features.md
new file mode 100644
index 000000000..47951d2a6
--- /dev/null
+++ b/docs/introduction/features.md
@@ -0,0 +1,116 @@
+---
+icon: list-ul
+---
+
+# Features
+
+Hexabot comes equipped with a comprehensive suite of features to empower your chatbot development:
+
+
+
+## **Visual Editor**
+
+{% include "../.gitbook/includes/visuel-editor-with-simple-text-block.md" %}
+
+Construct complex conversation flows effortlessly with our drag-and-drop interface. Choose from a library of pre-built blocks and customize them to meet your specific needs, all without writing a single line of code.
+
+* **Drag-and-Drop Functionality:** Build conversation flows with ease by dragging and dropping different block types onto the visual canvas.
+* **Block Palette:** Choose from a variety of pre-built blocks representing diverse chatbot actions, such as sending text messages, displaying buttons or quick replies, requesting user input, and more.
+* **Logical Connections:** Connect blocks together to define the sequence and logic of the conversation. Create branching paths, conditional responses, and loops to handle different user interactions.
+* **Block Customization:** Each block offers detailed configuration options to tailor its behavior.
+* **Entrypoint:** Choose which blocks should be the starting point for a subject specific conversation.
+* **Categorization:** You can choose to organize your conversation flows in categories that can be subject or domain specific.
+
+{% hint style="info" %}
+**What is a conversation ?** When the user interacts with the chatbot, he can have one or many conversations. Each conversation is subject specific and is defined by a set of blocks that are linked together.
+{% endhint %}
+
+## **AI-Powered Interactions**
+
+### **Natural Language Understanding Engine**
+
+Hexabot leverages cutting-edge NLU technology, to understand user intent, extract key information from messages, and tailor personalized responses. This allows for more natural and engaging conversations.
+
+{% hint style="info" %}
+**What is NLU ?** In simple terms, NLU enables computers to understand, interpret, and respond to human natural language. You can read more about NLU in the [nlu](../user-guide/nlu/ "mention") section.
+{% endhint %}
+
+* **Intent Recognition:** Hexabot's NLU engine analyzes user messages to identify the underlying intent. This understanding drives the chatbot's ability to provide relevant responses and trigger specific actions.
+* **Entity Extraction:** Identify and extract key information from user input, such as dates, locations, names, or product preferences. This data can be used to personalize the conversation and improve the accuracy of the chatbot's responses.
+* **Language Detection:** Hexabot can be configured to understand and respond in multiple languages, expanding its reach and usability for diverse audiences.
+* **NLU Training and Management:** The platform provides tools to train and refine the NLU model. Users can add training examples, define intents and entities, and improve the chatbot's comprehension over time.
+
+### Generative AI Capabilities
+
+By default, Hexabot comes with a default installed plugin that is called **"LLM RAG"** that integrates with _OpenAI ChatGPT_. You can choose of course to build your own plugin that integrates with a custom fine-tuned LLM or any other LLM. This plugin leverages cutting-edge Large Language Models (LLMs) and Generative AI techniques to enhance your chatbot's contextual understanding and responsiveness. Provide your chatbot with relevant context, and the **"LLM RAG"** plugin will generate more informative, and human-like responses, resulting in more engaging and satisfying conversations for your audience.
+
+## **Knowledge Base**
+
+Hexabot features a built-in Knowledge Base that serves as a centralized hub for your chatbot. This empowers you to easily update and expand your chatbot's knowledge without requiring changes to the conversation flow itself.
+
+**Centralized Content Hub:**\
+The Hexabot Knowledge Base provides a central location within the admin panel to manage all the content that your chatbot uses to interact with users. Organize content by type, define custom fields to structure information, and easily edit or update content as needed.
+
+**Multilingual Support and Translation Management:**\
+Create and manage translations for all of your chatbot's content directly within the Knowledge Base. This enables you to build chatbots that cater to a diverse, multilingual audience, delivering a more personalized and engaging experience for users around the globe.
+
+## Multilingual **Support and Translation Management**
+
+
+
+Hexabot provides comprehensive tools for managing multilingual chatbots. Our translation management system allows you to easily translate your chatbot's messages, prompts, and responses. Combined with advanced NLU capabilities for language detection and intent understanding, Hexabot empowers to build chatbots that seamlessly communicate with users in their preferred language.
+
+## Multi-channel Communication
+
+Deploy your Hexabot chatbot across multiple platforms, including on your website, Facebook Messenger, and other external services with ease. We're also working on adding even more direct integrations in the near future, to ensure you can reach even more users.
+
+* **Facebook Messenger:** Connect your chatbot to Facebook Messenger to engage with users on one of the most popular messaging platforms.
+* **Website Integration:** Embed a chatbot widget on your website to provide instant support and guidance to visitors.
+* **Extensible Architecture:** Hexabot's open-source nature and well-defined API allow for integration with other communication channels and third-party services.
+
+## **User Segmentation & Targeting**
+
+Categorize your audience with labels and tailor conversation paths based on user attributes or behavior. Deliver personalized experiences to different user segments for increased engagement.
+
+* **Subscriber Profiles:** Access detailed information about your chatbot subscribers, including their conversation history, labels, and other relevant data.
+* **Labels and Segmentation:** Organize subscribers into groups using labels. This allows for personalized conversation paths, targeted messaging, and tailored user experiences.
+
+## **Live Chat & Agent Takeover**
+
+
+
+When your chatbot encounters a complex or sensitive issue, Hexabot's Agent Takeover feature allows for a smooth handoff to a human support agent. You can monitor ongoing conversations in the inbox and step in directly when needed, ensuring a seamless and personalized experience for your users.
+
+* **Unified Inbox:** Monitor all ongoing and past conversations in a centralized location. Filter and search through conversations to quickly find specific interactions.
+* **Agent Takeover:** Enable human agents to seamlessly take over a chatbot conversation when needed. This feature ensures a smooth transition to human support for complex or sensitive queries.
+* **Live Chat Widget:** Integrate a live chat widget on your website to allow users to interact with human agents directly, providing an alternative channel for support.
+
+## User and Role Management
+
+
Manage Users
+
+Hexabot offers robust user management features that streamline collaboration and enhance security within your chatbot projects. You can effortlessly invite new users to join your workspace, making it easy to bring team members, stakeholders, or clients on board. Invitations are sent directly through the platform, allowing for a smooth onboarding process and immediate engagement with your project.
+
+In addition to inviting users, Hexabot enables you to create custom roles with specific permissions. This flexibility allows you to define who has access to particular features and data within your chatbot environment. By assigning roles tailored to each team member's responsibilities, you maintain precise control over your project's access levels. This ensures that sensitive information is protected and that users interact only with the components relevant to their roles, enhancing both security and efficiency.
+
+## **Extensive Customization using Plugins**
+
+
Use Custom Blocks
+
+Hexabot extends beyond its core features. Developers can leverage our open plugin system to create custom integrations and add new custom blocks to the visual editor's palette. Whether you need to connect with a third-party service, access external data sources, or build entirely unique features, Hexabot's plugin system provides the flexibility to tailor the platform to your specific needs.
+
+Join a growing community of developers and contribute to the Hexabot ecosystem by building and sharing your plugins. We encourage collaboration and innovation, enabling developers to enhance the platform's capabilities and create a rich library of integrations for all Hexabot users to benefit from.
+
+{% hint style="info" %}
+Check the [extensions.md](../developer-guide/extensions.md "mention") page and [hexabot-plugin-development.md](../developer-guide/integrations/hexabot-plugin-development.md "mention") guide to learn more about how to develop Hexabot plugins.
+{% endhint %}
+
+## **Analytics and Reporting Dashboard**
+
+
+
+Gain valuable insights into user interactions and chatbot performance through a detailed dashboard. Track key metrics, monitor conversation flows, and identify areas for improvement to optimize your chatbot strategy.
+
+* **Key Performance Indicators (KPIs):** Track important metrics like the number of conversations, messages sent and received, and more.
+* **Conversation Flow Analysis:** Visualize and analyze the effectiveness of your chatbot's conversation flows. Identify bottlenecks, drop-off points, and areas for improvement.
+* **User Behavior Insights:** Gain a deeper understanding of how users interact with your chatbot. Analyze common queries, identify user preferences, and inform chatbot optimization strategies
diff --git a/docs/introduction/overview.md b/docs/introduction/overview.md
new file mode 100644
index 000000000..d220512c6
--- /dev/null
+++ b/docs/introduction/overview.md
@@ -0,0 +1,44 @@
+---
+icon: globe
+---
+
+# Overview
+
+Hexabot aims to simplify the complexities of chatbot creation while offering a robust set of features to create powerful conversational agents. It achieves this through a combination of intuitive design, intelligent interactions, and customization options :
+
+## **Intuitive Design and Visual Workflow**
+
+The platform is built on the principle of user-friendliness, recognizing that not all chatbot creators are programmers. Hexabot's visual editor empowers users to construct conversation flows using a drag-and-drop interface and pre-built blocks representing different chatbot actions. This no-code approach eliminates the need for complex coding, allowing users to focus on the logic and design of their chatbot interactions.
+
+## **AI-Powered Interactions: NLU, LLM and RAG**
+
+Hexabot integrates advanced artificial intelligence (AI) capabilities to elevate chatbot interactions beyond simple rule-based responses.
+
+* **Natural Language Understanding (NLU):** NLU takes the chatbot a step further by focusing on the comprehension of user intent. It allows the chatbot to decipher the user's underlying goal, even if expressed in different ways, and trigger the appropriate response or action.
+* **Retrieval Augmented Generation (RAG):** Hexabot leverages RAG to access and utilize external knowledge sources, expanding the chatbot's ability to provide relevant and informative responses. RAG allows the chatbot to dynamically retrieve information from documents, databases, or APIs, augmenting its knowledge base and improving its ability to handle complex or open-ended questions.
+
+These AI capabilities work together to create chatbots that can engage in more natural, context-aware, and dynamic conversations, leading to improved user experiences and increased efficiency.
+
+## **Customization and Flexibility**
+
+Recognizing the unique requirements of different businesses and use cases, Hexabot offers extensive customization options. Users can tailor the appearance of their chatbot widget, including colors, and branding elements, to ensure a seamless integration with their existing websites or applications. Moreover, Hexabot's open-source nature and modular design make it highly extensible, allowing developers to customize its functionality further and integrate it with third-party services or APIs as needed.
+
+## **Analytics Dashboard**
+
+Hexabot provides valuable insights into chatbot performance through its analytics dashboard. Users can track key metrics, such as conversation volume, and user engagement, to measure the effectiveness of their chatbots. These data-driven insights inform iterative improvements to conversation flows, NLU models, and overall chatbot strategies, enabling users to continuously optimize their chatbot's performance and achieve their desired objectives.
+
+## Key Features
+
+* **Visual Editor (No-Code Interface)**
+* **Built-in Natural Language Understanding (NLU) Engine**
+* **Supports Integration with Large Language Models (LLMs)**
+* **Integrated Retrieval Augmented Generation (RAG)**
+* **Knowledge Base**
+* **Multi-Language Support**
+* **Subscriber Management**
+* **Inbox and Live Chat**
+* **Analytics Dashboard**
+* **Multi-Channel Integration**
+* **Customizable Appearance & Branding**
+* **Fallback Mechanisms**
+* **User & Role Management**
diff --git a/docs/key-concepts/intent.md b/docs/key-concepts/intent.md
new file mode 100644
index 000000000..c354b61a4
--- /dev/null
+++ b/docs/key-concepts/intent.md
@@ -0,0 +1,9 @@
+---
+noIndex: true
+---
+
+# Intent
+
+{% hint style="info" %}
+This section is currently under development (WIP)
+{% endhint %}
diff --git a/docs/key-concepts/nlu.md b/docs/key-concepts/nlu.md
new file mode 100644
index 000000000..1a1c59aa0
--- /dev/null
+++ b/docs/key-concepts/nlu.md
@@ -0,0 +1,10 @@
+---
+noIndex: true
+---
+
+# NLU
+
+{% hint style="info" %}
+This section is currently under development (WIP)
+{% endhint %}
+
diff --git a/docs/quickstart/create-your-first-flow.md b/docs/quickstart/create-your-first-flow.md
new file mode 100644
index 000000000..ff016ab63
--- /dev/null
+++ b/docs/quickstart/create-your-first-flow.md
@@ -0,0 +1,209 @@
+---
+icon: arrow-progress
+---
+
+# Create your first flow
+
+This interactive tutorial will guide you through the process of building your first chatbot flow using our intuitive visual editor. No coding experience is required – just follow the steps below, and you'll have your chatbot first flow up and running in no time.
+
+{% @supademo/embed demoId="cm1tjkxgn01jcjca2ufvh7l62" url="https://app.supademo.com/demo/cm1tjkxgn01jcjca2ufvh7l62" %}
+
+This is just a basic example to get you started. Hexabot offers a wide range of features and blocks to create more complex and engaging chatbot flows. Explore the different block types, experiment with NLU features, and integrate with your content sources to build a chatbot that truly meets your needs.
+
+{% hint style="warning" %}
+## **Prerequisites**
+
+Before you begin creating conversation flows with NLU triggers, ensure you have the following prerequisites in place:
+
+#### 1. Configured NLU Engine
+
+You need a fully configured and running NLU (Natural Language Understanding) engine to use intent-based triggers in your conversation flows. The NLU engine is responsible for understanding user intents from natural language input. For detailed instructions on configuring your NLU engine refer to our [NLU Engines](../user-guide/nlu/nlu-engines/) documentation page.
+
+#### 2. Populated NLU Entities Database
+
+Your NLU entities database should be populated with the necessary entities and values that your chatbot will use to extract information from user messages. This includes defining entity types (Trait, Keyword, or Pattern entities) and their associated values.
+
+For detailed instructions managing NLU entities, refer to our [Manage NLU Entities](../user-guide/nlu/manage-nlu-entities.md) documentation page.
+
+
+
+**Without a properly configured NLU engine and populated entities database, NLU-based triggers (like "Intent Match") will not function correctly in your conversation flows.**
+{% endhint %}
+
+#### **0. Ent**er your login credentials.
+
+{% hint style="info" %}
+Default admin account credentials are
+
+**Login :** admin@admin.admin
+
+Pa**ssword :** adminadmin
+{% endhint %}
+
+
+
+#### 1. Go to Hexabot visual editor page. This is your main workspace where you can build your chatbot conversation flow. In this tutorial, we will design a chatbot that can answer question about a company return policy.
+
+
+
+#### 2. Click 'Simple Text' to insert a new block in your workspace.
+
+
+
+#### 3. Double-click on a block to begin making changes
+
+
+
+#### 4. Add a descriptive block title relevant to this step in the flow.
+
+
+
+#### 5. Toggle the switch to set this block as a starting step in the conversation.
+
+
+
+#### 6. You can trigger blocks based on custom conditions. Click 'NEW TRIGGER' to create a new one.
+
+
+
+#### 7. Select 'Intent Match' from the dropdown to create a condition based on natural language understanding.
+
+
+
+#### 8. Intent Match triggers can detect the user's intent, even if the message is in different words or forms.
+
+
+
+#### 9. Let's start by adding a greeting intent as a trigger, since this is the beginning of our conversation. You can also combine multiple triggers for more complex scenarios.
+
+
+
+#### 10. Click to select the intent 'greetings\_hello' from the list.
+
+
+
+#### 11. Go to the 'Message' tab to configure responses.
+
+
+
+#### 12. Expand this section to view the replacement tokens.
+
+
+
+#### 13. Select the first name replacement token
+
+
+
+#### 14. Copy the token
+
+
+
+#### 15. To customize the reply message, edit the response to 'Hi {context.user.first\_name} !'
+
+
+
+#### 16. Hit the submit button to save the block setup
+
+
+
+#### 17. To test your conversation flow, open the chat widget launcher.
+
+
+
+#### 18. Type any form of greeting to trigger a reply from the chatbot.
+
+
+
+#### 19. Return to the blocks library and add a Quick Reply block to your flow.
+
+
+
+#### 20. Double-click on the block to customize it.
+
+
+
+#### 21. Let's modify the trigger to use natural language understanding (NLU) instead of basic keyword matching.
+
+
+
+
+
+#### 23. We've previously created a new intent in our NLU provider, specifically designed to identify when a user inquires about our return policy. If you want to use this intent or define a new one in your own chatbot, you'll need to configure Hexabot's NLU engine first. Learn more about this feature in the [nlu](../user-guide/nlu/ "mention") user guide:
+
+
+
+#### 24. Set this block as the starting point. Multiple blocks can serve as entry points in your flow.
+
+
+
+#### 25. Go to the 'Message' tab to configure responses for this block.
+
+.png>)
+
+#### 26. Customize the response message by replacing the default content.
+
+
+
+#### 27. Add quick replies. Each reply will be an option the user can click instead of typing.
+
+
+
+
+
+
+
+#### 30. Save your changes, then link the blocks together
+
+
+
+#### 31. Try out the new block by asking a question about the return policy in the chat widget.
+
+
+
+
+
+#### 33. Depending on the user's response, we'll provide different answers. Let's add a new block to continue building our flow
+
+
+
+
+
+#### 35. Let's name this block Return Eligibility
+
+
+
+#### 36. Go to triggers tab
+
+
+
+#### 37. Our keyword trigger should match the option we added in the quick replies block
+
+
+
+#### 38. Click on "Message".
+
+
+
+#### 39. And provide the appropriate message or messages
+
+
+
+#### 40. Save and connect the block to the Quick Replies block to continue the conversation flow.
+
+
+
+#### 41. Go back to the chat widget
+
+
+
+#### 42. Click on "Return Eligibility".
+
+
+
+#### 43. 🎉 By following this flow, the user was able to receive accurate information about return eligibility from the chatbot.
+
+
+
+#### 44. You can add more blocks to cover the other options like "Refund Timeframe" and "Other" by creating connecting a new block and repeating the same steps
+
+
diff --git a/docs/quickstart/installation.md b/docs/quickstart/installation.md
new file mode 100644
index 000000000..af4276168
--- /dev/null
+++ b/docs/quickstart/installation.md
@@ -0,0 +1,114 @@
+---
+icon: laptop-arrow-down
+---
+
+# Installation
+
+## Prerequisites
+
+To ensure Hexabot runs smoothly, you'll need the following:
+
+* **Docker:** We recommend using Docker to start the app since multiple services are required (MongoDB, Nginx, etc.). All the necessary Docker Compose files are located in the **docker** folder.
+
+{% content-ref url="../developer-guide/setting-up-docker-for-development-and-production.md" %}
+[setting-up-docker-for-development-and-production.md](../developer-guide/setting-up-docker-for-development-and-production.md)
+{% endcontent-ref %}
+
+* **Node.js:** For development purposes, ensure you have Node.js >= v18.17.0 installed. We recommend using nvm (Node Version Manager) to easily manage and update your Node.js versions.
+
+{% content-ref url="../developer-guide/setup-node.js-with-nvm.md" %}
+[setup-node.js-with-nvm.md](../developer-guide/setup-node.js-with-nvm.md)
+{% endcontent-ref %}
+
+
+
+Do you want to install Hexabot on a Windows machine?
+
+1. Download and install Docker Desktop for Windows.
+2. During installation, ensure that you select the option to use WSL 2 as the default backend for Docker.
+3. After installation, start Docker Desktop and verify that WSL integration is enabled:
+4. Open Docker Desktop and go to Settings. Under the General tab, ensure that "Use the WSL 2 based engine" is selected. Under Resources > WSL Integration, enable integration with your installed Linux distribution (e.g., Ubuntu). Restart your machine to finalize the Docker installation.
+5. Open your WSL terminal (e.g., Ubuntu).
+6. Follow Hexabot [installation ](installation.md#installation)steps below
+
+Learn more : [https://learn.microsoft.com/en-us/windows/wsl/tutorials/wsl-containers](https://learn.microsoft.com/en-us/windows/wsl/tutorials/wsl-containers)
+
+
+
+### Installation
+
+1. **Install Hexabot CLI globally to have easy access to its commands:**
+
+```
+npm install -g hexabot-cli
+```
+
+2. **Create a new project**:
+
+```
+hexabot create my-chatbot
+```
+
+3. **Navigate to your project folder**
+
+```
+cd my-chatbot/
+```
+
+4. **Install dependencies**:
+
+```
+npm i
+```
+
+5. **Environment Setup:**
+
+To configure the environment variables, use the following command:
+
+```
+hexabot init
+```
+
+This will copy the `.env.example` file to `.env` in the `./docker` directory if the file does not already exist.
+
+{% hint style="info" %}
+You can find more about the Hexabot CLI command [here](../developer-guide/cli-command-reference.md).
+{% endhint %}
+
+6. **Run in development mode:** Once your environment is set up, you can start the app. Use the following command:
+
+```
+hexabot dev --services ollama
+```
+
+Notice that we added an extra service called [Ollama](https://ollama.com/). Ollama makes it easy to get up and running with large language models locally. Make sure to SSH into the container and pull the model(s) you would like to use:
+
+```
+docker exec -it ollama ollama pull tinyllama
+```
+
+You can pull different models, a complete reference of all the Ollama models can be found here: [https://ollama.com/library](https://ollama.com/library).
+
+{% hint style="info" %}
+**Note:** The first time you run the app, Docker will take some time to download all the required images
+{% endhint %}
+
+### Usage
+
+UI Admin Panel is accessible via [http://localhost:8080](http://localhost:8080), the default credentials are
+
+{% code title="Username" %}
+```
+admin@admin.admin
+```
+{% endcode %}
+
+{% code title="Password" %}
+```
+adminadmin
+```
+{% endcode %}
+
+{% hint style="danger" %}
+ **Security**: The default credentials are for local development only. If you expose the app outside localhost or run in production, create an admin user and change the password immediately. Do not keep default credentials enabled.
+{% endhint %}
diff --git a/docs/user-guide/analytics-dashboard.md b/docs/user-guide/analytics-dashboard.md
new file mode 100644
index 000000000..eb80ddaea
--- /dev/null
+++ b/docs/user-guide/analytics-dashboard.md
@@ -0,0 +1,12 @@
+---
+hidden: true
+noIndex: true
+icon: chart-line
+---
+
+# Analytics Dashboard
+
+{% hint style="info" %}
+This section is currently under development (WIP)
+{% endhint %}
+
diff --git a/docs/user-guide/chat-inbox.md b/docs/user-guide/chat-inbox.md
new file mode 100644
index 000000000..7d12d1419
--- /dev/null
+++ b/docs/user-guide/chat-inbox.md
@@ -0,0 +1,41 @@
+---
+icon: inbox-full
+---
+
+# Chat Inbox
+
+The Chat Inbox in Hexabot is your central hub for monitoring all conversations between your chatbot and users. This comprehensive view allows you to track interactions, review past conversations, and intervene in real-time when necessary.
+
+
+
+**1. Accessing the Chat Inbox:**
+
+* Find the "Inbox" section in the main menu .
+
+**2. Understanding the Inbox View:**
+
+* **Conversation List:** The inbox displays a list of all recent and past conversations. Each conversation is typically listed with:
+ * **User Name/ID:** The name or identifier of the user who is interacting with the chatbot.
+ * **Channel:** The platform where the conversation is happening (e.g., "live-chat-tester," "Facebook Messenger," or your website chat widget).
+ * **Last Message Timestamp:** The date and time of the last message in the conversation.
+* **Search Bar:** Use the search bar at the top to quickly find a specific conversation by typing a keyword or phrase from the user's message.
+* **Filter Options (Optional):** Hexabot might offer additional filter options, such as:
+ * **Channel:** Filter conversations by specific communication channels.
+ * **Assigned To:** Filter conversations based on the user who is currently handling them.
+
+**3. Reviewing Conversations:**
+
+* **Open a Conversation:** Click on a conversation in the list to view the complete exchange of messages between the chatbot and the user.
+* **Conversation History:** The conversation will be displayed in a chronological order, showing all messages sent and received.
+* **User and Chatbot Messages:** You can easily distinguish between user messages (typically displayed in a different color or style) and chatbot responses.
+
+**4. Intervening in Conversations:**
+
+* **Take Over:** If you need to manually intervene in a conversation, Hexabot might offer a "Take Over" or "Live Chat" option. This allows you to:
+ * **Take Control:** Take over the chatbot's conversation and respond directly to the user.
+ * **Human Agent Response:** When a chatbot encounters an issue, is unable to understand a user's query, or needs to handle a complex situation, a human agent can take over to provide assistance.
+ * **Switching Back to Automatic Mode:** You may also be able to switch back to the automatic chatbot mode after handling a user's request by clicking on "HAND BACK" button.
+
+**5. Assign conversation to a specific agent:**
+
+The inbox interface allows you also to assign a conversation to a specific user, for instance, if you have a team handling different aspects of customer support.
diff --git a/docs/user-guide/context-variables.md b/docs/user-guide/context-variables.md
new file mode 100644
index 000000000..8dabe50a6
--- /dev/null
+++ b/docs/user-guide/context-variables.md
@@ -0,0 +1,66 @@
+---
+icon: brackets-curly
+---
+
+# Context Variables
+
+
Manage Context Variables
+
+Context variables are powerful tools in Hexabot that allow you to store and manage information gathered during a conversation with a user. This information can then be used to personalize the chatbot's responses, make decisions within the conversation flow, or trigger specific actions.
+
+Think of context variables as storage containers that hold data specific to a particular conversation. For example, you could store the user's name, their preferred language, or their order details.
+
+### 1. Types of Context Variables
+
+In Hexabot, context variables can be either **Permanent** or **Non-Permanent**, depending on whether you want the data to persist beyond the current conversation.
+
+#### 1. Non-Permanent Context Variables
+
+* **Temporary Storage**: Non-permanent context variables are stored in the conversation context.
+* **Scope**: They are specific to the ongoing conversation and are lost once the conversation ends.
+* **Use Case**: Ideal for storing temporary data that is relevant only during the current interaction.
+* **Example**: If a bot asks a user for their current location during a session, the bot may store the response as a non-permanent context variable to use in the rest of the conversation.
+
+#### 2. Permanent Context Variables
+
+* **Persistent Storage**: Permanent context variables are stored in the subscriber context, which means they persist across multiple conversations.
+* **Scope**: These variables retain their values even after a conversation has ended, allowing the bot to remember information about a user across different interactions.
+* **Use Case**: Ideal for storing user preferences or information that should be remembered for future interactions.
+* **Example**: If a user provides their preferred language or opts into notifications, the bot can store this preference permanently. The bot will retain this information for future use, without needing to ask the user again in subsequent conversations.
+
+### **2. Access Context Variables page**
+
+Navigate to the "Context Vars" or "Context Variables" section. This is typically found in the main menu.
+
+### **3. Creating a New Context Variable**
+
+* **Click "Add Context Variable" or a similar button:** This will open a form where you can define a new context variable.
+* **Provide Variable label:** Choose a descriptive label for your variable, reflecting the type of information you would like to collect. For example:
+ * Phone Number
+ * Email
+* **Set the "Permanent" Option**:
+ * **Permanent**: Check this option if you want the variable to be stored permanently and persist across conversations.
+ * **Non-Permanent**: Leave this option unchecked if you want the variable to be temporary and only last for the duration of the current conversation.
+* **Save Changes:** Click the "Submit" button to create your new context variable.
+
+### **4. Managing Existing Context Variables**
+
+* **View Existing Variables:** In the "Context Vars" section, you can view a list of the context variables you've created.
+* **Edit Variable label:** You can edit a variable's label. However, you cannot change it name once it's created.
+* **Delete a Variable:** If a context variable is no longer needed, you can delete it from the list. Be careful because deleting a variable will remove all data stored within it.
+
+### **5. Using Context Variables**
+
+Once a context variable is defined, you can edit a given block's options and add that context variable to capture the user input message. In the following example, we will collect the phone number entered by the user.
+
+
Capture Context Variables
+
+Once the block gets triggered, the value will be stored within the context variable and you would be able to access it through the context. For example, you can use it in a text message by injecting `{phone_number}` and it will be replace automatically by the value that has been captured:
+
+
Using Context Variables
+
+{% hint style="info" %}
+**Additional Notes**
+
+**Non‑permanent** context variables are specific to a single conversation. **Permanent context** variables persist across conversations for the same subscriber.
+{% endhint %}
diff --git a/docs/user-guide/flows.md b/docs/user-guide/flows.md
new file mode 100644
index 000000000..f736f07f9
--- /dev/null
+++ b/docs/user-guide/flows.md
@@ -0,0 +1,38 @@
+---
+icon: diagram-project
+---
+
+# Flows
+
+Hexabot's Flows feature allows you to organize your chatbot's conversation flows into different sections, creating dedicated tabs within the Visual Editor. This makes it easier to manage complex chatbots with multiple topics or functionalities.
+
+
Manage Flows
+
+**1. Access Flow Management:**
+
+* Find the "Flows" section within dashboard.
+
+**2. Viewing Your Flows:**
+
+The Flow List displays a table of the flows you have created. Each flow is identified by its label. The table also shows information about when each flow was created and last updated.
+
+**3. Creating a New Flow:**
+
+* **Add a Flow:** Click on the "Add" button to create a new flow. This will open a dialog where you can:
+ * **Enter a Label:** Type in a unique and descriptive label for the flow (e.g., "Product Support," "Order Processing," "Customer Onboarding").
+ * **Submit:** Click "SUBMIT" to save the new flow.
+
+**4. Managing Existing Flows:**
+
+* **Edit a Flow:** Click on the edit icon (pencil) next to a flow to modify its label.
+* **Delete a Flow:** Click on the delete icon (trash can) next to a flow to delete it.
+
+{% hint style="warning" %}
+Hexabot will prevent you from deleting a flow if there are still blocks associated with it within the Visual Editor. You will need to either move those blocks to a different flow or delete them before you can delete the flow itself.
+{% endhint %}
+
+**Using Flows in the Visual Editor:**
+
+When you open the Visual Editor, you'll see a tab for each flow you've created. Select the flow tab where you want to design your conversation flow. You can easily switch between the flow tabs to organize your conversation flows.
+
+{% include "../.gitbook/includes/visual-editor-screenshot.md" %}
diff --git a/docs/user-guide/knowledge-base/README.md b/docs/user-guide/knowledge-base/README.md
new file mode 100644
index 000000000..5705d26d0
--- /dev/null
+++ b/docs/user-guide/knowledge-base/README.md
@@ -0,0 +1,15 @@
+---
+icon: books
+---
+
+# Knowledge Base
+
+Hexabot's built-in Knowledge Base is where you store and manage all the information your chatbot uses to interact with users. Think of it as a centralized knowledge base that keeps all your chatbot's responses accurate, consistent, and up-to-date.
+
+**Managing Content in the Knowledge Base:**
+
+1. **Create Content Types:** Organize your information by creating content types relevant to your chatbot (e.g., "Products," "Services," "FAQs").
+2. **Define Fields (Metadata):** For each content type, define the data fields you need. For a "Product" type, you might have "Name," "Description," "Price," "Image URL," etc.
+3. **Populate Content Entries:** Create individual entries within each content type, filling in the data fields. You might have a separate entry for each product in your catalog, each service you offer, or each question in your FAQ section.
+
+
Define Content Types in the Knowledge Base
diff --git a/docs/user-guide/knowledge-base/content-types.md b/docs/user-guide/knowledge-base/content-types.md
new file mode 100644
index 000000000..5fe323c42
--- /dev/null
+++ b/docs/user-guide/knowledge-base/content-types.md
@@ -0,0 +1,51 @@
+---
+icon: folder-grid
+---
+
+# Content Types
+
+The Knowledge Base allows you to organize your chatbot's content into different types, making it easy to structure and manage the information your chatbot uses to interact with users. This guide walks you through creating, customizing, and managing your content types effectively:
+
+**1. Access the Knowledge Base:** Go to the "Knowledge Base" section, usually found in the main menu or chatbot settings.
+
+**2. Create a New Content Type:**
+
+* **Click "Add Content Type" (or a similar button/option).** This will typically open a form or dialog box where you can define the details of your new content type.
+* **Enter a Name:** Provide a descriptive name for your content type that accurately represents the kind of information it will hold. For example, "Products," "Services," "Blog Posts," "FAQs," etc.
+* **Save the Content Type:** Click the "Submit" button to save the new content type.
+
+{% hint style="info" %}
+**Important** Each new content type you create in the Knowledge Base comes with two default fields: "Title" and "Status." These fields provide basic information for your content entries.
+{% endhint %}
+
+**3. Add Fields to a Content Type:**
+
+* **Locate the Content Type:** Find the content type you just created in the list of available content types within the Knowledge Base.
+* **Access Field Management:** Look for the "Manage Content" option
+* **Add New Field:** In addition to the default "Title" and "Status" fields, click +ADD button to create a new field and configure the following:
+ * **Field Label:** This is the display name for the field, the name that will be visible to users. Choose a clear and descriptive label, e.g., "Product Name," "Description," "Price."
+ * **Field Name:** This is a unique identifier for the field. It is **auto-generated** from the Field Label and does not need to be manually entered.
+ * **Field Type:** Select the appropriate data type for the field from the following options:
+ * **Text :** For short text.
+ * **Text Input:** For short single-line text input.
+ * **URL:** For website address inputs.
+ * **Text Area:** For longer, multi-line text input.
+ * **Checkbox:** For true/false or yes/no selections.
+ * **File:** For uploading files (documents, images, etc.).
+ * **HTML:** For adding content with HTML formatting.
+ * **Save Field Changes:** After configuring the field, click the "Submit" button to confirm your changes.
+
+{% include "../../.gitbook/includes/add-new-content-type-form.md" %}
+
+**4. Manage Existing Fields:**
+
+* **Edit a Field:** Locate the field within the content type and look for options to "Edit," "Modify," or "Rename" the field.
+* **Delete a Field:** If a field is no longer needed, you can usually find an option to "Delete" or "Remove" it. Be careful, as deleting a field will also remove all data associated with that field in your content entries.
+
+{% hint style="info" %}
+**Tips**
+
+* **Plan Your Content Structure:** Think carefully about the types of information your chatbot needs and design your content types accordingly.
+* **Keep it Simple:** Start with the essential fields and add more as needed. It's easier to add fields later than to remove them if they prove to be unnecessary.
+* **Use Descriptive Names:** Make field names easy to understand for you and anyone else who might be working with your chatbot's content.
+{% endhint %}
diff --git a/docs/user-guide/knowledge-base/manage-persistent-menu.md b/docs/user-guide/knowledge-base/manage-persistent-menu.md
new file mode 100644
index 000000000..6e326db2a
--- /dev/null
+++ b/docs/user-guide/knowledge-base/manage-persistent-menu.md
@@ -0,0 +1,37 @@
+---
+icon: bars-sort
+---
+
+# Manage Persistent Menu
+
+The Persistent Menu allows you to provide users with a consistent and accessible menu of options directly within their chat interface. It's like a built-in navigation system for your chatbot, ensuring that users always have quick access to key features and information, regardless of where they are in the conversation flow.
+
+## **Step-by-Step Guide to Creating and Managing Persistent Menus:**
+
+1. **Access the Persistent Menu Settings:**
+ * Log in to your Hexabot account.
+ * Find the "Persistent Menu" section. This is located in under the Manage Content Menu.
+2. **Design Your Menu Structure:**
+ * **Main Menu Items:** Decide on the key options you want to present to users (e.g., "Get Started," "Products," "Support," "About Us").
+ * **Submenus (Optional):** Consider adding submenus under your main menu items for a more hierarchical navigation.
+3. **Add Menu Items:**
+ * Use the Hexabot interface to add each menu item. You'll typically be able to:
+ * **Enter the Title:** The text displayed for the menu item (e.g., "View Products").
+ * **Choose the Action Type:**
+ * **Postback:** Sends a payload back to the chatbot, allowing you to trigger a specific conversation flow or action.
+ * **Web URL:** Opens an external website in a new browser tab.
+ * **Nested**
+ * **Set the Payload or URL (Based on Action Type):**
+ * **For Postbacks:** Enter a unique payload for each menu item, which you can use to trigger specific responses or actions in your chatbot's conversation flows.
+ * **For Web URLs:** Enter the complete web address.
+4. **Save and Publish Your Menu:**
+ * Click the "Submit" button to make your Persistent Menu active for users interacting with your chatbot.
+
+{% hint style="info" %}
+**Additional Tips:**
+
+* **Keep it Concise:** Limit your menu to the most important options to avoid overwhelming users.
+* **Use Clear Labels:** Menu item labels should be descriptive and easy to understand.
+* **Test Thoroughly:** Test your Persistent Menu on different devices and screen sizes to ensure it's working as expected and displays correctly.
+{% endhint %}
+
diff --git a/docs/user-guide/knowledge-base/media-library.md b/docs/user-guide/knowledge-base/media-library.md
new file mode 100644
index 000000000..24c3576f6
--- /dev/null
+++ b/docs/user-guide/knowledge-base/media-library.md
@@ -0,0 +1,27 @@
+---
+icon: photo-film-music
+---
+
+# Media Library
+
+Hexabot's Media Library serves as a centralized repository for all the media files (images, documents, audio, video, etc.) that you use within your chatbot. It helps you organize, store, and easily access these files when building your chatbot's conversation flows and content.
+
+**1. Accessing the Media Library:**
+
+* Log in to your Hexabot account.
+* Find the "Media Library" within the Knowledge Base section.
+
+**2. Managing Existing Files:**
+
+* **Previewing Files:** You can preview images and some other file types directly within the Media Library.
+
+**3. Using Media in Chatbot Content:**
+
+* **Referencing Files:** Once a file is uploaded to the Media Library, you'll get an identifier that you can use to reference the file in your chatbot flow. The [Attachment block](../visual-editor/regular-blocks/using-attachment-block.md), allow you to select files directly from your Media Library.
+
+{% hint style="info" %}
+**Tips for Media Management:**
+
+* **Optimize File Sizes:** Compress your images and other media files before uploading them to reduce load times and improve chatbot performance.
+* **Regular Cleanup:** Periodically review your Media Library and delete any unused or outdated files to keep it organized.
+{% endhint %}
diff --git a/docs/user-guide/localization/README.md b/docs/user-guide/localization/README.md
new file mode 100644
index 000000000..93635c204
--- /dev/null
+++ b/docs/user-guide/localization/README.md
@@ -0,0 +1,15 @@
+---
+icon: language
+---
+
+# Localization
+
+Hexabot's chatbot builder allows you to create multilingual chatbots by managing languages within the platform. This feature enables you to define the languages your chatbot will support and handle translations for blocks, messages, quick replies, buttons, and more.
+
+### Key Features
+
+* **Add, update, and delete languages**: You can easily manage the languages your chatbot supports.
+* **Multilingual conversations**: The chatbot will automatically use the language of the end-user (subscriber).
+* **Translation capabilities**: Each language defined in the system allows you to translate blocks, messages, quick replies, buttons, etc.
+* **Default language**: You can set a default language for your chatbot. This will be the fallback language if no specific language is detected or set for the end-user.
+* **RTL support**: For languages that are written from right to left (RTL), such as Arabic or Hebrew, you can specify whether a language is RTL or not.
diff --git a/docs/user-guide/localization/languages.md b/docs/user-guide/localization/languages.md
new file mode 100644
index 000000000..ac68b84b4
--- /dev/null
+++ b/docs/user-guide/localization/languages.md
@@ -0,0 +1,51 @@
+---
+icon: globe
+---
+
+# Languages
+
+Once you have added multiple languages, your chatbot will dynamically respond to users based on their language preference. If the end-user’s language is detected, the chatbot will automatically switch to that language. Otherwise, the default language will be used.
+
+
Manage Languages
+
+### Adding a Language
+
+To add a language to your chatbot, follow these steps:
+
+1. Navigate to the **Languages** section of the chatbot builder.
+2. Click on the **Add Language** button.
+3. In the dialog, enter the following information:
+ * **Title**: The name of the language (e.g., English, French, Arabic).
+ * **Code**: The language code (e.g., `en` for English, `fr` for French, `ar` for Arabic). It is recommended to use the ISO 639-1 code for each language.
+ * **RTL**: Toggle whether the language is a right-to-left language.
+4. Click **Save** to add the language.
+
+### Updating a Language
+
+To update a language:
+
+1. Navigate to the **Languages** section.
+2. Select the language you want to update.
+3. Modify the **Title**, **Code**, or **RTL** setting as needed.
+4. Click **Save** to apply your changes.
+
+### Deleting a Language
+
+To delete a language:
+
+1. Navigate to the **Languages** section.
+2. Click on the delete icon next to the language you wish to remove.
+3. Confirm the deletion.
+
+> **Note**: Deleting a language will remove its translations from the chatbot. All NLU samples will be set to the default language which cannot be deleted. You need always to have at least one language.
+
+### Default Language
+
+The default language serves as the primary language for your chatbot. To set a default language:
+
+1. Navigate to the **Languages** section.
+2. Click the checkbox next to the language you want to set as default.
+3. Click **Save**.
+
+The default language will be used when the chatbot cannot detect the language of the end-user.
+
diff --git a/docs/user-guide/localization/translations.md b/docs/user-guide/localization/translations.md
new file mode 100644
index 000000000..33ee9015b
--- /dev/null
+++ b/docs/user-guide/localization/translations.md
@@ -0,0 +1,35 @@
+---
+icon: language
+---
+
+# Translations
+
+Expanding your audience and reaching global users is essential for chatbot success. Hexabot's built-in translation feature simplifies the process of creating multilingual chatbots, allowing you to offer personalized experiences in multiple languages.
+
+
Manage Translations
+
+**Step-by-Step Guide to Translating Content:**
+
+1. **Access the Translations Section:**
+ * Log in to your Hexabot account.
+ * Click on the "Localization" section in the sidebar and navigate to "Translations" page.
+2. **Hit the "Refresh" button :** This will scan the database for all the strings that are being used in blocks (text messages, buttons, quick replies, ...). This action will also remove strings that are not present anymore.
+3. **Choose the Content to Translate:** Click on the "Edit" button of a specific content entry you want to translate.\
+
+
+
+
+
+4. **Translate:**
+ * You'll see the original text in the source language, alongside fields for entering the translated text for each target language.
+ * Enter the accurate translations for each field in your chosen languages.
+5. **Save Your Translations:**
+ * Click "Submit" to save your translations.
+ * Your translated content will now be used when a user interacts with your chatbot in their selected language.
+
+{% hint style="info" %}
+**Tips**
+
+* **Review and Test:** Carefully review your translations and test your chatbot in each target language to ensure the language switching works as expected and that the translations flow naturally within the conversation.
+* **Regular Updates:** If your chatbot's content changes frequently, keep your translations updated as well to provide a consistent experience for your multilingual users.
+{% endhint %}
diff --git a/docs/user-guide/manage-settings/README.md b/docs/user-guide/manage-settings/README.md
new file mode 100644
index 000000000..b46cac86c
--- /dev/null
+++ b/docs/user-guide/manage-settings/README.md
@@ -0,0 +1,18 @@
+---
+icon: gear
+---
+
+# Manage Settings
+
+This guide will walk you through the various settings available within the Hexabot platform, empowering you to tailor your chatbot's behavior, appearance, and integrations to suit your specific needs and goals.
+
+**Platform Settings:**
+
+This guide covers the primary settings areas that are essential for managing your chatbot. These areas typically include:
+
+* **Email:** Configure your chatbot's email settings for sending notifications or automated responses.
+* **Chatbot Global Fallback:** Define a default response for situations where the chatbot cannot understand or respond to a user's query.
+* **NLU Provider:** Choose the natural language understanding engine that your chatbot will use to understand user input.
+* **Web Channel:** Manage settings for integrating your chatbot into your website.
+* **Live Chat Widget:** Configure the appearance and functionality of the live chat widget.
+* **Facebook Messenger:** Configure settings for integrating your chatbot with Facebook Messenger.
diff --git a/docs/user-guide/manage-settings/chatbot-global-fallback.md b/docs/user-guide/manage-settings/chatbot-global-fallback.md
new file mode 100644
index 000000000..8dce1de13
--- /dev/null
+++ b/docs/user-guide/manage-settings/chatbot-global-fallback.md
@@ -0,0 +1,39 @@
+# Chatbot Global Fallback
+
+Hexabot's Global Fallback settings allow you to define a default response that your chatbot will use when it cannot understand or respond to a user's query. This ensures a more consistent and user-friendly experience, even in situations where the chatbot might struggle to interpret the user's input.
+
+**1. Access Global Fallback Settings:**
+
+* Navigate to the "Settings" section.
+* Select the "Chatbot" view.\
+ \
+
+
+
+
+**2. Configure the Global Fallback Message:**
+
+* **Enter Fallback Message:** Type the message you want your chatbot to send when it encounters a fallback situation. This message should be polite, informative, and helpful.
+* **Example:**
+ * "I'm not sure if I understand your request. Could you please rephrase it?"
+ * "Sorry, but I didn't understand your request. Maybe you can check the menu"
+
+**3. (Optional) Configure Fallback Triggers:**
+
+* Some Hexabot blocks configurations might allow you to define specific conditions that trigger the global fallback message.
+* This could include:
+ * **Number of Consecutive Fallbacks:** Only trigger the fallback after a certain number of failed attempts to understand the user's query.
+ * **Specific Keywords:** Trigger the fallback if the user's message contains certain keywords that indicate a misunderstanding.
+
+**4. Enable Global Fallback**
+
+* Click on the switch button to enable/disable your global fallback settings.
+
+{% hint style="info" %}
+**Tips:**
+
+* Always aim for a positive tone in your fallback message.
+* Let the user know why the chatbot is unable to understand their query (e.g., "I'm still learning" or "I need more information").
+* Offer users alternative ways to get help, such as contacting a human agent or searching for information on a website.
+* Limit the number of times the global fallback message is triggered to prevent a frustrating user experience. If a user repeatedly sends confusing input, you might consider automatically redirecting them to a human agent.
+{% endhint %}
diff --git a/docs/user-guide/manage-settings/email.md b/docs/user-guide/manage-settings/email.md
new file mode 100644
index 000000000..73bda0b0a
--- /dev/null
+++ b/docs/user-guide/manage-settings/email.md
@@ -0,0 +1,26 @@
+---
+hidden: true
+---
+
+# Email
+
+Hexabot uses email for various functions, including sending user invitations, confirmations, and automated responses in certain situations, such as consecutive fallbacks. This guide explains how to manage your email settings to enable these functionalities.
+
+
+
+**1. Access Email Settings:**
+
+* Go to Hexabot settings or the "Settings" section.
+* Click on the "Email" view.
+
+**2. Configure Email Sending:**
+
+* **Enter Sender Email Address:** Provide the email address from which Hexabot should send messages (e.g., support@yourcompany.com or no-reply@domain.com). This email address will be used for sending user invitations, confirmations, and automated responses.
+* **Mailer:** Choose the email sending method you want to use:
+ * **SMTP:** Use Simple Mail Transfer Protocol (SMTP), which is a more common and flexible protocol for sending email. If you choose SMTP, you will need to provide the additional settings below.
+ * **Sendmail:** Use the[ sendmail](https://en.wikipedia.org/wiki/Sendmail) utility, which is typically configured on Linux and Unix systems.
+* **SMTP Host:** Enter the SMTP server address provided by your email provider.
+* **Port:** Enter the SMTP port number. Common port numbers include 25, 465, and 587. Consult your email provider's documentation to determine the correct port for your account.
+* **Enable SSL:** Activate Secure Sockets Layer (SSL) to protect the confidentiality and integrity of email data transmission. Check with your email provider to see if SSL is supported and required.
+* **User:** If your SMTP server requires authentication, enter the username for your email account.
+* **Password:** Enter the password for your email account.
diff --git a/docs/user-guide/manage-settings/facebook-messenger.md b/docs/user-guide/manage-settings/facebook-messenger.md
new file mode 100644
index 000000000..475604dde
--- /dev/null
+++ b/docs/user-guide/manage-settings/facebook-messenger.md
@@ -0,0 +1,10 @@
+---
+hidden: true
+---
+
+# Facebook Messenger
+
+{% hint style="info" %}
+This section is currently under development (WIP)
+{% endhint %}
+
diff --git a/docs/user-guide/manage-settings/live-chat-widget.md b/docs/user-guide/manage-settings/live-chat-widget.md
new file mode 100644
index 000000000..a79364585
--- /dev/null
+++ b/docs/user-guide/manage-settings/live-chat-widget.md
@@ -0,0 +1,53 @@
+# Live chat widget
+
+The Live Chat Widget settings in Hexabot allow you to configure the appearance and functionality of the live chat widget that is used within the Visual Editor for testing purposes.
+
+{% hint style="warning" %}
+**Important Note:** These settings only apply to the Live Chat Widget, which is used for testing purposes within the Visual Editor. The settings do not affect the appearance or behavior of your chatbot when integrated into your website, Facebook Messenger, or other communication channels.
+{% endhint %}
+
+**1. Access Live Chat Widget Settings:**
+
+* Navigate to the "Settings" page.
+* Select the "Live Chat Widget" section.
+
+**2. Configure Allowed Media Types:**
+
+* **Allowed Upload Mime Types:** This setting controls the types of files that users can upload through your chatbot on your website.
+ * **Enter Mime Types:** You can enter a comma-separated list of MIME types that are allowed. For example, to allow image uploads, you would include image/jpeg, image/png, image/gif, etc. Refer to your web server configuration or other documentation for specific MIME types.
+* **Maximum Upload Size:** Set the maximum allowed file size in bytes (e.g., 2500000 for 2.5 MB).
+
+**3. Manage User Interaction Features:**
+
+* **Enable Geolocation Share:** Toggle this setting to allow users to share their location information with your chatbot on your website.
+* **Enable Attachment Uploader:** Allow users to upload files (images, documents, etc.) through your chatbot.
+* **Enable Emoji Picker:** Allow users to use emoji in their messages through your chatbot.
+
+**4. Customize Chatbot Appearance:**
+
+* **Chatbot Avatar URL:** Enter a URL to an image that will represent your chatbot's avatar in the chat widget. This should be a 64x64 px square image that displays next to the chatbot's messages.
+* **Chat Window Title:** This text will appear as the title of the chat window when the user launches the chatbot on your website.
+* **Widget Theme:** Choose a color theme for the appearance of your chatbot widget, often offered as a dropdown selection. You can choose one of the following colors :
+ * Teal
+ * Orange
+ * Red
+ * Green
+ * Blue
+ * Dark
+
+**5. Set Initial Greeting Message:**
+
+* **Greeting Message:** Enter the message that your chatbot will display when a user first launches the chatbot on your website. This could be a simple welcome message, a prompt for action, or an explanation of how the chatbot works.
+
+**6. Manage Persistent Menu and Input:**
+
+* **Display Persistent Menu:** Enable or disable the display of the chatbot's persistent menu on your website. The persistent menu is a set of buttons that are always visible to the user for quick navigation within the chatbot.
+* **Disable Input:** Enable this option if you want to prevent users from typing into the chat input area and encourage the user to use the persistent menu or the predefined replies.
+
+**7. Configure Allowed Domains:**
+
+* **Allowed Domains:** Enter a list of domains (URLs) that are allowed to load your chatbot widget on your website. This is a security measure to prevent malicious scripts or unauthorized access.
+
+**8. Verification Token:**
+
+* **Verification Token:** Enter a unique token that verifies your domain's ownership when setting up integrations with third-party services, such as Facebook Messenger.
diff --git a/docs/user-guide/manage-settings/nlu-provider.md b/docs/user-guide/manage-settings/nlu-provider.md
new file mode 100644
index 000000000..19b463e06
--- /dev/null
+++ b/docs/user-guide/manage-settings/nlu-provider.md
@@ -0,0 +1,19 @@
+# NLU Provider
+
+Hexabot comes equipped with a built-in NLU (Natural Language Understanding) engine, which helps your chatbot understand the intent behind user messages. You can configure the NLU settings to tailor its behavior. This guide walks you through managing the NLU Provider settings in Hexabot.
+
+**1. Access NLU Provider Settings:**
+
+* Log in to your Hexabot account.
+* Go to the "Settings" page.
+* Select the "NLU Provider" section.
+
+**2. Configure Default Language:**
+
+* **Choose Default Language:** Select the primary language that your chatbot should use for understanding user input. This setting defines the default language that the NLU engine will use for interpretation.
+
+**3. Adjust the Fallback Threshold:**
+
+* **Fallback Confidence Threshold:** This setting controls how confident the NLU engine needs to be about its predictions before taking action.
+ * **Threshold Value:** The threshold is a value between 0 and 1 (inclusive).
+ * **Interpretation:** A higher threshold requires a greater degree of certainty from the NLU engine, potentially leading to more accurate but more conservative responses. A lower threshold allows for more flexibility, but may increase the likelihood of errors or inaccurate interpretations.
diff --git a/docs/user-guide/manage-settings/web-channel.md b/docs/user-guide/manage-settings/web-channel.md
new file mode 100644
index 000000000..70bda33bd
--- /dev/null
+++ b/docs/user-guide/manage-settings/web-channel.md
@@ -0,0 +1,51 @@
+# Web Channel
+
+
+
+The Web Channel settings in Hexabot allow you to configure how your chatbot integrates into your website. You can control the appearance of the chatbot widget, manage the chatbot's initial greeting message, and more.
+
+**1. Access Web Channel Settings:**
+
+* Navigate to the "Settings" page.
+* Select the "Web Channel" section.
+
+**2. Configure Allowed Media Types:**
+
+* **Allowed Upload Mime Types:** This setting controls the types of files that users can upload through your chatbot on your website.
+ * **Enter Mime Types:** You can enter a comma-separated list of MIME types that are allowed. For example, to allow image uploads, you would include image/jpeg, image/png, image/gif, etc. Refer to your web server configuration or other documentation for specific MIME types.
+* **Maximum Upload Size:** Set the maximum allowed file size in bytes (e.g., 2500000 for 2.5 MB).
+
+**3. Manage User Interaction Features:**
+
+* **Enable Geolocation Share:** Toggle this setting to allow users to share their location information with your chatbot on your website.
+* **Enable Attachment Uploader:** Allow users to upload files (images, documents, etc.) through your chatbot.
+* **Enable Emoji Picker:** Allow users to use emoji in their messages through your chatbot.
+
+**4. Customize Chatbot Appearance:**
+
+* **Chatbot Avatar URL:** Enter a URL to an image that will represent your chatbot's avatar in the chat widget. This should be a 64x64 px square image that displays next to the chatbot's messages.
+* **Chat Window Title:** This text will appear as the title of the chat window when the user launches the chatbot on your website.
+* **Widget Theme:** Choose a color theme for the appearance of your chatbot widget, often offered as a dropdown selection. You can choose one of the following colors :
+ * Teal
+ * Orange
+ * Red
+ * Green
+ * Blue
+ * Dark
+
+**5. Set Initial Greeting Message:**
+
+* **Greeting Message:** Enter the message that your chatbot will display when a user first launches the chatbot on your website. This could be a simple welcome message, a prompt for action, or an explanation of how the chatbot works.
+
+**6. Manage Persistent Menu and Input:**
+
+* **Display Persistent Menu:** Enable or disable the display of the chatbot's persistent menu on your website. The persistent menu is a set of buttons that are always visible to the user for quick navigation within the chatbot.
+* **Disable Input:** Enable this option if you want to prevent users from typing into the chat input area and encourage the user to use the persistent menu or the predefined replies.
+
+**7. Configure Allowed Domains:**
+
+* **Allowed Domains:** Enter a list of domains (URLs) that are allowed to load your chatbot widget on your website. This is a security measure to prevent malicious scripts or unauthorized access.
+
+**8. Verification Token:**
+
+* **Verification Token:** Enter a unique token that verifies your domain's ownership when setting up integrations with third-party services, such as Facebook Messenger.
diff --git a/docs/user-guide/nlu-training.md b/docs/user-guide/nlu-training.md
new file mode 100644
index 000000000..f34414b6d
--- /dev/null
+++ b/docs/user-guide/nlu-training.md
@@ -0,0 +1,65 @@
+---
+hidden: true
+noIndex: true
+---
+
+# NLU Training
+
+
NLU Training
+
+Hexabot leverages Natural Language Understanding (NLU) to understand what your users are saying and respond appropriately. To make sure Hexabot accurately interprets user intent, you need to train its NLU engine to learn from your user's interactions.
+
+{% hint style="info" %}
+**Note:** If you are new to Natural Language Understanding (NLU), it's highly recommended that you read the [Broken link](broken-reference "mention") section of the documentation first. This will provide you with a foundational understanding of these important concepts before you begin training your chatbot.
+{% endhint %}
+
+This guide provides a step-by-step approach to NLU training:
+
+**1. Access NLU Training:**
+
+* Navigate to the "NLU Training" or "NLU" section in the main menu or dashboard. This section is typically dedicated to managing and improving your chatbot's language understanding capabilities.
+
+**2. Define Intents:**
+
+* **Understanding Intents:** Intents represent the goals or actions that a user wants to achieve through their interaction with the chatbot (e.g., "book\_appointment," "get\_product\_information," "report\_issue").
+* **Create Intents:** Add new intents by giving them descriptive names and click on "Add Intent" button.
+
+**3. Add Training Phrases :**
+
+* **Examples of User Input:** For each intent, you need to provide multiple examples of how a user might express that intent. These examples are called "training phrases" or "utterances."
+* **Diversity is Key:** Aim for a variety of training phrases to cover different ways of expressing the same intent. Include variations in phrasing, wording, slang, and common misspellings.
+* **Example:**
+ * **Intent:** "get\_weather\_forecast"
+ * **Training Phrases:**
+ * "What's the weather like today?"
+ * "Can you tell me the forecast for tomorrow?"
+ * "Is it going to rain this week?"
+ * "What's the temp in London?"
+
+**4. Define Entities (Optional):**
+
+* **Key Information:** Entities represent specific pieces of information that are relevant to fulfilling a user's intent. These could include locations, dates, times, product names, or any other custom data types.
+* **Creating Entities:** Define new entities in the NLU training section. Give each entity a descriptive name and specify its data type (e.g., location, date, text).
+* **Annotate Training Phrases:** In your training phrases, highlight the words or phrases that correspond to entities. This process is called "annotation" and it helps the NLU model learn to extract entities from user input.
+* **Example:**
+ * **Training Phrase:** "Book a flight to London for tomorrow."
+ * **Intent:** "book\_flight"
+ * **Entities:**
+ * "destination": "London" (location)
+ * "departure\_date": "tomorrow" (date)
+
+**5. Test and Improve:**
+
+* **Testing the NLU Model:** Most chatbot platforms offer a built-in testing console to test how well the NLU model is understanding intents and extracting entities. Input various test phrases and see how the model performs.
+* **Analyze and Refine:** Review the testing results to identify areas for improvement.
+ * **Add More Training Phrases:** If the model is misinterpreting certain intents, add more training phrases to clarify those intents.
+ * **Adjust Entity Definitions:** If entities are not being extracted correctly, review and adjust your entity definitions and annotations.
+
+{% hint style="info" %}
+**Tips**
+
+* **Real-User Data:** Once your chatbot is live, continue to monitor and analyze how users are interacting with it.
+* **Identify Common Misunderstandings:** Look for patterns in how users express their intents, especially where the chatbot might be failing to understand.
+* **Regularly Update Training:** Add new training phrases and entities based on real user data to keep improving your chatbot's accuracy and performance.
+{% endhint %}
+
diff --git a/docs/user-guide/nlu/README.md b/docs/user-guide/nlu/README.md
new file mode 100644
index 000000000..850df4a7a
--- /dev/null
+++ b/docs/user-guide/nlu/README.md
@@ -0,0 +1,34 @@
+---
+icon: brain-circuit
+---
+
+# NLU
+
+## What is NLU?
+
+Natural Language Understanding (NLU) is a subfield of Artificial Intelligence (AI) focused on enabling machines to comprehend and interpret human language in a meaningful way. In Hexabot, the NLU engine can be used for example to:
+
+* **Detect Intents:** Understand the purpose or goal behind a user’s input, such as asking for information, making a request, or providing feedback.
+* **Slot Filling:** Extract specific pieces of information (e.g., dates, locations, or quantities) from user inputs to complete structured tasks or queries.
+* **Enhance Context Awareness:** Maintain a coherent understanding of user interactions to enable multi-turn conversations.
+* **Sentiment Analysis:** Assess the emotional tone behind user inputs, which can guide responses or trigger appropriate actions.
+* **Entity Recognition:** Identify named entities such as dates, numbers, and other contextual markers using libraries like Duckling.
+
+## The Role of NLU in AI Safety
+
+Hexabot embraces a safety-first approach to AI, advocating for responsible AI usage that prioritizes user protection over convenience. By leveraging NLU as the first step in the conversational pipeline, Hexabot ensures:
+
+* **Controlled Output:** The bot detects intents and entities before deciding whether generative AI is needed, reducing the likelihood of misinterpretation or unsafe responses.
+* **Context Awareness:** The bot maintains contextual understanding through structured NLU processing, enhancing conversational accuracy.
+* **Accountability:** NLU provides a traceable layer of logic that helps audit decisions, making Hexabot’s operation transparent and trustworthy.
+
+## Why is NLU is Important?
+
+Hexabot prioritizes AI safety and precision in understanding user interactions. The role of the NLU engine is critical for several reasons:
+
+1. **Intent-Driven Conversations:** By accurately detecting user intent, Hexabot ensures that each interaction aligns with the user’s needs. This leads to a more structured and predictable conversation flow.
+2. **Control Over Generative AI:** While generative AI models powered by Large Language Models (LLMs) are powerful, they also present risks such as hallucinations, jailbreaking, and unintended responses. By detecting intent first, Hexabot determines when and where generative AI should be used, ensuring that responses are safe, relevant, and aligned with ethical guidelines.
+3. **Improved AI Governance:** NLU acts as a safeguard layer, offering a controlled environment where generative AI operates only under predefined circumstances. This helps mitigate risks associated with over-reliance on LLMs.
+4. **Customizability and Extendibility:** The modular nature of Hexabot’s NLU engine allows developers to define custom intents, integrate domain-specific entities, and expand the engine’s functionality (e.g., adding sentiment analysis).
+5. **User Trust and Safety:** A well-implemented NLU ensures that users feel understood and that the bot operates within defined ethical and operational parameters. This fosters trust and minimizes the risk of generating harmful or irrelevant outputs.
+
diff --git a/docs/user-guide/nlu/manage-nlu-entities.md b/docs/user-guide/nlu/manage-nlu-entities.md
new file mode 100644
index 000000000..cef5ef1d8
--- /dev/null
+++ b/docs/user-guide/nlu/manage-nlu-entities.md
@@ -0,0 +1,138 @@
+# Manage NLU Entities
+
+In Hexabot’s NLU engine, entities play a crucial role in extracting meaningful information from user inputs. Entities can be categorized into three types: [**Trait Entities**](manage-nlu-entities.md#trait-entities)**,** [**Keyword Entities**](manage-nlu-entities.md#keyword-entities) and [**Pattern Entities**](manage-nlu-entities.md#pattern-entities). These entity types provide flexibility and depth in understanding user inputs, enabling Hexabot to process both high-level intentions and granular details.
+
+### Trait Entities
+
+{% include "../../.gitbook/includes/add-edit-nlu-trait-value-form.md" %}
+
+Trait entities are inferred by analyzing the entire sentence or the overall context of the input. These entities represent high-level attributes or characteristics of the input and are not tied to specific words or phrases. Below some examples:
+
+
Entity
Description
Text
Value
Intent
The purpose of the user’s input.
"Hello"
greeting
Intent
The purpose of the user’s input.
"I want to book a flight"
book_flight
Sentiment
The emotional tone behind the input.
"I’m really frustrated with my current plan."
negative
Urgency
An attribute that determines the priority of the input.
"I need help right away!"
high
+
+Trait entities allow Hexabot to grasp the overarching context of the input, providing a deeper understanding that informs appropriate responses and actions.
+
+### Keyword Entities
+
+{% include "../../.gitbook/includes/add-edit-keyword-entity-form.md" %}
+
+Keyword entities are specific words or phrases extracted from the input to identify important attributes and convert unstructured data into structured information. These entities are tied to identifiable patterns or specific terms within the user input. Below some examples:
+
+| Entity | Description | Text | Value |
+| -------- | ------------------------------------------------------------------------- | ----------------------------------------------- | --------- |
+| Location | Identifying places from the input. | "_I want to book a flight to **Paris**."_ | Paris |
+| Product | Recognizing product names or types. | "_I’m interested in buying the **iPhone 15**."_ | iPhone 15 |
+| Topic | Detecting specific keywords that activate certain workflows or responses. | "_Show me the latest **offers**."_ | offers |
+
+### Pattern Entities
+
+{% include "../../.gitbook/includes/add-edit-pattern-entity-form.md" %}
+
+Pattern entities use regular expressions (regex) to extract structured information from user inputs through flexible pattern matching. Unlike keyword entities that require exact matches, pattern entities can capture variations in format and structure, making them ideal for extracting things like phone numbers, email addresses, dates, or any text that follows a predictable pattern.
+
+Pattern entities support several preprocessing options to handle common text variations:
+
+* **Word Boundary Matching**: Ensures patterns match complete words rather than partial substrings
+* **Space Removal**: Strips whitespace from matched text for cleaner extraction
+* **Case Normalization**: Converts matched text to lowercase for consistent processing
+* **Diacritic Stripping**: Removes accent marks and special characters for language-agnostic matching
+
+#### Examples of Pattern Entities:
+
+* **Phone Numbers**: `(\+?\d{1,3}[-.\s]?)?\(?(\d{3})\)?[-.\s]?(\d{3})[-.\s]?(\d{4})` - Captures various phone number formats like +1-555-123-4567, (555) 123-4567, or 555.123.4567
+* **Email Addresses**: `[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}` - Matches standard email formats
+* **Dates**: `\b\d{1,2}[/-]\d{1,2}[/-]\d{2,4}\b` - Captures dates in MM/DD/YYYY or DD-MM-YYYY format
+
+### Manage NLU Entities
+
+Hexabot provides an intuitive interface to manage NLU entities efficiently, allowing you to create, update, and administer both Trait and Keyword entities. Follow these steps to manage NLU entities:
+
+
+
+1. **Navigate to the NLU Section**
+
+* Open the main menu and select the “NLU” option.
+* Click on the “NLU Entities” tab.
+
+2. **View the Entities List**
+
+* A data grid will display all the existing entities, including both Trait and Keyword entities.
+* Use the search bar to find specific entities, or navigate through the list using pagination.
+
+3. **Add New Entities**
+
+* Click on the "**+ Add**" button to create a new entity.
+* Choose the type of entity by selecting the **Lookup Strategy**: **Trait** or **Keyword**.
+* Fill in the required fields:
+ * **Name**: The unique identifier for the entity.
+ * **Description**: A brief explanation of the entity’s purpose.
+ * Click **Save** to add the entity to the list.
+
+4. **Update or Delete Entities**
+
+* Locate the entity you want to modify.
+* Click on the Edit icon to update its details, or the Delete icon to remove the entity permanently.
+
+5. **Administer Entity Values**
+
+* For each entity, you can manage its possible values by clicking on the “**Values**” icon.
+
+### Managing Entity Values
+
+Once you click the “**Values**” icon, a new data grid will display the possible values associated with the selected entity.
+
+1. **Guidelines for Values:**
+
+* Use lowercase text and separate words with underscores (e.g., high\_priority, low\_stock).
+* Ensure that values are descriptive and concise.
+
+2. **Update or Remove Values:**
+
+* Click the Edit icon to update an existing value or its synonyms.
+* Use the Delete icon to remove a value permanently.
+
+This flexible management system ensures Hexabot’s NLU remains robust, adaptable, and capable of handling a wide range of conversational scenarios.
+
+### Bulk Import of NLU Entities and Values
+
+Hexabot provides a bulk import feature that allows you to import NLU training data from CSV files, automatically creating entities and values as needed. This feature streamlines the process of populating your NLU system with large datasets.
+
+#### To access the bulk Import feature navigate to the NLU management view:
+
+1. Open the main side menu and select the "NLU" Page.
+2. Go to the "NLP Samples" tab.
+3. Look for the "Import" button in the action buttons area.
+
+{% include "../../.gitbook/includes/nlu-samples-tab.md" %}
+
+#### CSV File Format
+
+The CSV file must follow a specific format with the following columns:
+
+* **text** (required): The training text or user input sample
+* **intent** (required): The primary intent or entity name
+* **language** (required): The language code (e.g., "en", "fr", "es")
+
+Additional columns can be added for other entities, where the column header becomes the entity name and the cell values become the entity values.
+
+#### Example CSV Format
+
+```csv
+text,intent,language,destination,time
+"Hello, I want to book a flight tomorrow to Paris.",book_flight,en,Paris,tomorrow
+"I need a taxi to downtown now",book_taxi,en,downtown,now,
+```
+
+#### How the Import Process Works
+
+1. **NLU Entity Creation**: If an entity mentioned in the CSV doesn't exist, Hexabot automatically creates it with the "trait" lookup strategy.
+2. **NLU Value Creation**: For each unique value in an entity column, Hexabot creates the corresponding entity value if it doesn't already exist.
+3. **NLU Sample Creation**: Each row becomes a new NLU sample. If a NLU sample with identical text already exists, it will be skipped to avoid duplicates.
+
+#### Sample Dataset
+
+For quick setup and testing, you can use our published small talk dataset available on HuggingFace. This dataset contains basic small talk intents in both French and English languages, providing a ready-to-use starting point for your chatbot's conversational capabilities.
+
+**Dataset:** [Hexastack/hexabot-smalltalk](https://huggingface.co/datasets/Hexastack/hexabot-smalltalk)
+
+The dataset includes common conversational intents such as greetings, farewells, expressions of gratitude, and general inquiries. You can download the CSV files directly from HuggingFace and import them using the bulk import feature described above.\
diff --git a/docs/user-guide/nlu/nlu-engines/README.md b/docs/user-guide/nlu/nlu-engines/README.md
new file mode 100644
index 000000000..ff6cdde4b
--- /dev/null
+++ b/docs/user-guide/nlu/nlu-engines/README.md
@@ -0,0 +1,68 @@
+# NLU Engines
+
+The NLU Engine is the core component of Hexabot’s natural language understanding pipeline, responsible for detecting intents, entities, and other attributes from user inputs. Hexabot supports multiple NLU Engines to cater to different levels of expertise and use cases.
+
+### LLM NLU Engine
+
+Leverages Large Language Models (LLMs) such as Ollama, Gemini, or ChatGPT to detect intents and language without requiring custom training. This is the default NLU engine which is ideal for those looking for a ready-to-use NLU solution without requiring prior AI expertise.
+
+**Benefits:**
+
+* No need to train your own models.
+* Quick setup and instant results for supported intents
+
+**Limitations:**
+
+* Does not provide a confidence score (e.g., probability of accuracy).
+* Performance may vary for lesser-known languages and dialects.
+* Primarily effective for widely spoken languages like English, French, etc.
+
+### Ludwig NLU Engine
+
+Uses [Ludwig](https://ludwig.ai/latest/), a low-code AI framework, to help you build custom AI models with minimal coding. It supports modern architectures like BERT, LSTM, and RNN. This is a good option for developers or teams looking to create customizable models quickly without diving deep into coding.
+
+**Benefits:**
+
+* Requires little to no coding; you configure models via YAML or JSON files.
+* Accessible for junior to intermediate AI practitioners.
+
+**Limitations:**
+
+* Requires some understanding of AI concepts to configure effectively.
+
+### TensorFlow NLU Engine
+
+A Python boilerplate that we built ourselves is provided to facilitate the development of TensorFlow-based models. This could be suitable for experienced data scientists who want full control over their AI pipeline.
+
+**Benefits:**
+
+* Gives complete control over the model design and training process.
+* Supports advanced customization for experienced data scientists.
+
+**Limitations:**
+
+* Requires strong expertise in machine learning and TensorFlow.
+* More time-intensive to develop and maintain.
+
+### Building Your Own NLU Engine
+
+Hexabot’s architecture allows you to integrate custom NLU engines by following these steps:
+
+**1. Build a Service (API):**
+
+* Develop an inference service that performs intent detection, entity recognition, or other NLU tasks.
+* The service should expose an API endpoint that accepts input text and returns predictions.
+
+**2. Create a Helper Extension:**
+
+* Implement a helper extension in Hexabot to call the custom NLU service.
+* The extension should handle the integration, sending input to the API and processing predictions.
+
+**3. Use Existing Examples:**
+
+* Refer to the source code of existing NLU engines (LLM, Ludwig, TensorFlow) for guidance.
+* Source code is available on Hexabot’s GitHub repository.
+
+### Summary
+
+Hexabot’s NLU Engine supports a range of solutions, from plug-and-play LLM-based inference to fully customizable TensorFlow models. Whether you are a novice or an expert, there’s an option tailored to your needs. Additionally, Hexabot’s open design empowers developers to build and integrate custom engines, expanding the possibilities of natural language understanding in your conversational AI projects.
diff --git a/docs/user-guide/nlu/nlu-engines/llm-nlu-engine.md b/docs/user-guide/nlu/nlu-engines/llm-nlu-engine.md
new file mode 100644
index 000000000..a793df79f
--- /dev/null
+++ b/docs/user-guide/nlu/nlu-engines/llm-nlu-engine.md
@@ -0,0 +1,79 @@
+# LLM NLU Engine
+
+The LLM NLU Engine in Hexabot leverages the power of Large Language Models (LLMs) to detect intents and determine language efficiently. This engine is ideal for users who want a quick, pre-trained solution without the need to develop and train custom AI models. Below is the detailed guide on configuring and using the LLM NLU Engine in Hexabot.
+
+### Configuring the LLM NLU Engine
+
+
+
+#### **Step 1: Set the Default NLU Helper**
+
+* Navigate to “**Settings**” from the main menu.
+* Select the “**Chatbot**” tab.
+* Ensure that the “**Default NLU Helper**” is set to "**llm-nlu-helper**".
+
+This ensures that Hexabot uses the LLM-powered NLU engine for processing intents and language detection.
+
+#### **Step 2: Select the Default LLM Helper**
+
+{% hint style="info" %}
+**Helper Installation:** Ensure the desired LLM helper is installed before selecting it in the settings. Installation instructions for each helper are provided in their respective documentation.
+{% endhint %}
+
+1. In the same “Chatbot” tab, locate the “Default LLM Helper” setting.
+2. Choose your preferred LLM helper from the installed options. Below some LLM helpers as an example:
+ 1. **Ollama Helper (**[**hexabot-helper-ollama**](https://hexabot.ai/extensions/672731347ddd71f5fb2f0d7a)**) :** A helper for integrating with [Ollama](https://ollama.ai/), an LLM platform designed for localized or containerized usage. Install Ollama either locally on your machine or as a Docker container.
+ 2. **Google Gemini Helper (**[**hexabot-helper-gemini**](https://hexabot.ai/extensions/67272e927ddd71f5fb2f0c5c)**):** A helper for integrating with Google Gemini, Google’s advanced LLM for high-performance AI applications. Generate an API key from Google Cloud Console. Configure the helper with the API key in Hexabot’s settings.
+ 3. **OpenAI ChatGPT Helper (**[**hexabot-helper-chatgpt**](https://hexabot.ai/extensions/67272fef7ddd71f5fb2f0d02)**):** A helper for integrating with OpenAI’s ChatGPT, a widely used and versatile LLM. Generate an API key from the OpenAI dashboard. Configure the helper with the API key in Hexabot’s settings.
+
+3\. Before moving to the next steps, ensure the necessary helper is installed and fully configured.
+
+#### **Step 3: Configure the prompts of the LLM NLU Engine**
+
+The LLM NLU Helper Settings allow you to configure and fine-tune the behaviour of the LLM-powered NLU engine in Hexabot. These settings include options for selecting the model, defining language detection prompts, and customizing trait classification prompts. Below are the details and guidelines for configuring these settings.
+
+
+
+1. Navigate to “**Settings**” from the main menu.
+2. Select the “**LLM NLU Engine**” tab.
+3. Specify the name of the LLM (Large Language Model) you want to use. Leave this field empty to use the default model specified in the LLM helper’s settings. Examples:
+ 1. **Ollama Models:** [https://ollama.com/library](https://ollama.com/library) (Note that you will need to download each model you would like to in Ollama)
+ 2. **Google Gemini Models:** [**https://ai.google.dev/gemini-api/docs/models/gemini#model-variations**](https://ai.google.dev/gemini-api/docs/models/gemini#model-variations)
+ 3. **OpenAI ChatGPT Models:** [**https://platform.openai.com/docs/models/gp**](https://platform.openai.com/docs/models/gp)
+4. The **language detection prompt** is used to identify the language of a given input text. The LLM helper uses this template to dynamically generate prompts.
+5. The **trait classifier prompt** is designed for tasks like detecting intent, sentiment, or other high-level attributes from input text.
+
+{% hint style="info" %}
+Prompts use [Handlebars](https://handlebarsjs.com/guide/) for dynamic templates:
+
+* Enclose variables in `{{` and `}}`. For example: `{{variableName}}`.
+* Use `{{#if}}` for conditional statements.
+* Loop through arrays with `{{#each arrayName}}`.
+{% endhint %}
+
+**Step 4: Test the LLM NLU Engine**
+
+1. Navigate to the "**NLU**" from the main menu and then select the "**NLU Entities**" tab to add some entities and/or intent values.
+
+{% content-ref url="../manage-nlu-entities.md" %}
+[manage-nlu-entities.md](../manage-nlu-entities.md)
+{% endcontent-ref %}
+
+2. Use the **NLU training form** to test out some text and see if predictions are good.
+
+
+
+3. Finally, you can use NLU Entities when configuring triggers in the blocks within the [Visual Editor](../../visual-editor/)
+
+{% content-ref url="../../visual-editor/regular-blocks/" %}
+[regular-blocks](../../visual-editor/regular-blocks/)
+{% endcontent-ref %}
+
+### Key Considerations
+
+**1. Performance and Limitations:** LLMs excel at detecting intents and languages without custom training, but they lack confidence scores and may perform poorly with less-common languages or dialects.
+
+**2. Security and Privacy:**
+
+* Use local deployment options like **Ollama** if privacy is a concern.
+* For cloud-based APIs (Google Gemini and OpenAI ChatGPT), ensure API keys are securely managed and adhere to organizational security policies.
diff --git a/docs/user-guide/nlu/nlu-engines/ludwig-nlu-engine.md b/docs/user-guide/nlu/nlu-engines/ludwig-nlu-engine.md
new file mode 100644
index 000000000..d62d17921
--- /dev/null
+++ b/docs/user-guide/nlu/nlu-engines/ludwig-nlu-engine.md
@@ -0,0 +1,97 @@
+# Ludwig NLU Engine
+
+The Ludwig NLU Engine is a robust Natural Language Understanding (NLU) solution built using [Ludwig AI](https://ludwig.ai/), a high-level, declarative machine learning framework. This engine simplifies the process of extracting intents, entities, and other language features by leveraging Ludwig’s intuitive design and powerful machine learning capabilities. It also enables you to use models deployed on [HuggingFace](https://huggingface.co) or your own locally trained models for inference.
+
+## Setting up the Ludwig NLU Engine
+
+* Install the Hexabot CLI running this command
+
+```bash
+npm install -g hexabot-cli
+```
+
+* Create your Hexabot project using this Ludwig custom template:
+
+{% code overflow="wrap" %}
+```bash
+hexabot create my-chatbot --template Hexastack/hexabot-template-ludwig
+```
+{% endcode %}
+
+
+
+* Navigate to your project directory and initialize it using the following commands. You can customize your project configuration in `my-chatbot/docker/.env` file:
+
+```bash
+hexabot init
+```
+
+```bash
+npm i
+```
+
+{% hint style="info" %}
+Update the `HF_AUTH_TOKEN` in the `.env` file within the `docker` folder to use models from Hugging Face. For guidance on generating a personal token, refer to the [Hugging Face documentation](https://huggingface.co/docs/hub/security)
+{% endhint %}
+
+* Kickstart your newly created chatbot by running:
+
+```bash
+hexabot dev --services ludwig-nlu
+```
+
+## Configuring the Ludwig NLU Engine
+
+
+
+### **Step 1: Set the Default NLU Helper**
+
+This ensures that Hexabot uses the Ludwig based NLU engine for processing intents and language detection.
+
+* Navigate to “**Settings**” from the main menu.
+* Select the “**Chatbot**” tab.
+* Ensure that the “**Default NLU Helper**” is set to "**ludwig-nlu-helper**".
+
+### **Step 2: Configure Ludwig NLU Engine Settings**
+
+1. Navigate to “**Settings**” from the main menu.
+2. Select the “**Ludwig NLU Engine**” tab.
+3. Update NLU Engine Settings :
+ 1. The Ludwig NLU engine is already pre-configured to connect with the Ludwig NLU API provided in the template. You only need to update the **Ludwig NLU engine's endpoint** and **API token** if you are not using the default setup.
+ 2. A Probability Threshold is also available, it’s set by default to 0.1, this value is the minimum probability required for a prediction to be accepted. Be sure to adjust this threshold based on the specific model you are using and your desired balance of precision and recall.
+
+
+
+### **Understanding Ludwig for Hexabot**
+
+While Hexabot simplifies the integration, understanding Ludwig's core concepts is beneficial if you want to build custom models. Ludwig is a declarative machine learning framework where you define your models and training through a configuration file using YAML or JSON. Ludwig handles the complexity and coding details of your configuration.
+
+Here’s a brief overview of how you might use Ludwig in conjunction with Hexabot:
+
+* **Defining a Model Architecture:** Instead of coding a model from scratch, you define a model architecture using a high-level configuration. You might define different layers of a neural network, define a text encoder and other model specifications.
+* **Training Models:** Ludwig uses your training data and the configuration you provide to train the model, generating a model that you can then host and use for inference in Hexabot, locally or using a cloud based model.
+* **HuggingFace Integration:** You can also directly utilize models from HuggingFace by referencing their names in the Ludwig configuration. This makes using the state-of-the-art models very simple for experimentation.
+
+For in-depth understanding on how to use Ludwig, please refer to its official documentation: [https://ludwig.ai](https://ludwig.ai/).
+
+{% hint style="info" %}
+The Ludwig NLU Engine supports inference using both Hugging Face models and locally trained models. Each prediction logs a confidence score to provide insight into its reliability. **The Ludwig NLU engine in the Hexabot starter template is pre-configured to use two Hugging Face models developed by the Hexabot team that demonstrates** [intent detection](https://huggingface.co/Hexastack/intent-classifier-lstm) and [language classification](https://huggingface.co/Hexastack/language-classifier-cnn)**. These models serve as an example to help you get started. Keep in mind that for real use cases, you may need to define and train your own models based on your dataset to better suit your needs**.\
+\
+For detailed instructions on training your own models and integrating them with the engine, refer to the README file in the [original repository](https://github.com/Hexastack/hexabot-ludwig-nlu/). You may also wish to try this [dataset](https://huggingface.co/datasets/Hexastack/hexabot-smalltalk-trilingual) as a starting point for training your custom models.
+{% endhint %}
+
+### **Step 3: Test the Ludwig NLU Engine**
+
+Navigate to the "**NLU**" from the main menu and then select the "**NLU Entities**" tab to add some entities and/or intent values. Check the [manage-nlu-entities.md](../manage-nlu-entities.md "mention") section in the docs for more information on how to add and manage your NLU entities :
+
+{% content-ref url="../manage-nlu-entities.md" %}
+[manage-nlu-entities.md](../manage-nlu-entities.md)
+{% endcontent-ref %}
+
+Use the **NLU training tool** to test out some text against the NLU intent you just added and see if predictions are good.
+
+
+
+Finally, you can use NLU Entities when configuring triggers in the blocks within the [Visual Editor](../../visual-editor/). You can check the [regular-blocks](../../visual-editor/regular-blocks/ "mention") section in the documentation to help understand how to trigger blocks using NLU intents.
+
+The Ludwig NLU Engine offers a balance between easy configuration and powerful customization. By using pre-trained models from the default setup or training custom models, you have all the tools to build the required NLU logic for your use case. Remember to test and adjust your settings to leverage its capabilities to the fullest.
diff --git a/docs/user-guide/nlu/nlu-engines/tensorflow-nlu-engine.md b/docs/user-guide/nlu/nlu-engines/tensorflow-nlu-engine.md
new file mode 100644
index 000000000..c827e8011
--- /dev/null
+++ b/docs/user-guide/nlu/nlu-engines/tensorflow-nlu-engine.md
@@ -0,0 +1,75 @@
+# Tensorflow NLU Engine
+
+The TensorFlow NLU Engine is a Natural Language Understanding (NLU) solution built using [TensorFlow](https://www.tensorflow.org/api_docs), an end-to-end platform for machine learning. This engine seamlessly integrates with models hosted on [HuggingFace](https://huggingface.co), enabling robust and scalable NLU capabilities.
+
+## Setting up the Tensorflow NLU Engine
+
+* Install the Hexabot CLI running this command
+
+```bash
+npm install -g hexabot-cli
+```
+
+* Create your Hexabot project using this Ludwig custom template:
+
+```bash
+hexabot create my-chatbot --template Hexastack/hexabot-template-tensorflow
+```
+
+
+
+* Navigate to your project directory and initialize it using the following commands. You can customize your project configuration in `my-chatbot/docker/.env` file:
+
+```bash
+hexabot init
+```
+
+```bash
+npm i
+```
+
+* Kickstart your newly created chatbot by running:
+
+```bash
+hexabot dev --services nlu,ollama
+```
+
+## Configuring the TensorFlow NLU Engine
+
+
+
+### **Step 1: Set the Default NLU Helper**
+
+This ensures that Hexabot uses the TensorFlow based NLU engine for processing intents and language detection.
+
+* Navigate to “**Settings**” from the main menu.
+* Select the “**Chatbot**” tab.
+* Ensure that the “**Default NLU Helper**” is set to "**tensorflow-nlu-helper**".
+
+### **Step 2: Configure Ludwig NLU Engine Settings**
+
+1. Navigate to “**Settings**” from the main menu
+2. Select the “**TensorFlow NLU Engine**” tab.
+3. Update NLU Engine Settings:
+ 1. The TensorFlow NLU engine is already pre-configured to connect with the TensorFlow based NLU API provided in the template. You only need to update the **TensorFlow NLU engine's endpoint** and **API token** if you are not using the default setup.
+ 2. A Confidence Threshold is also available, it’s set by default to 0.1, this value is the minimum probability required for a prediction to be accepted. Be sure to adjust this threshold based on the specific model you are using and your desired balance of precision and recall.
+
+
+
+### **Step 3: Test the TensorFlow NLU Engine**
+
+Navigate to the "**NLU**" from the main menu and then select the "**NLU Entities**" tab to add some entities and/or intent values. Check the [manage-nlu-entities.md](../manage-nlu-entities.md "mention") section in the docs for more information on how to add and manage your NLU entities :
+
+{% content-ref url="../manage-nlu-entities.md" %}
+[manage-nlu-entities.md](../manage-nlu-entities.md)
+{% endcontent-ref %}
+
+Use the **NLU training tool** to test out some text against the NLU intent you just added and see if predictions are good.
+
+
+
+Finally, you can use NLU Entities when configuring triggers in the blocks within the [Visual Editor](../../visual-editor/). You can check the [regular-blocks](../../visual-editor/regular-blocks/ "mention") section in the documentation to help understand how to trigger blocks using NLU intents.
+
+### Key Considerations
+
+While the TensorFlow NLU Engine provides robust capabilities for running inference on TensorFlow-based models deployed on Hugging Face, it comes with certain limitations. The engine is not designed to be extensible, meaning users cannot modify the pre-existing models or customize their internal logic. This lack of flexibility may require careful selection of models to ensure they meet the specific requirements of your application. It is ideal for scenarios where the focus is on leveraging pre-trained models without the need for further adaptation.
diff --git a/docs/user-guide/nlu/nlu-match-scoring.md b/docs/user-guide/nlu/nlu-match-scoring.md
new file mode 100644
index 000000000..1886ce078
--- /dev/null
+++ b/docs/user-guide/nlu/nlu-match-scoring.md
@@ -0,0 +1,104 @@
+# NLU Match Scoring
+
+**NLU Block Scoring** is a mechanism used to select the most relevant response block based on:
+
+* Matching patterns between user input and block definitions
+* Configurable weights assigned to each entity type
+* Confidence values provided by the NLU engine for detected entities
+
+It enables more intelligent and context-aware block selection in conversational flows.
+
+### Core Use Cases
+
+#### Standard Matching
+
+A user input contains entities that directly match a block’s patterns.
+
+```
+Example: Input: intent = enquiry & subject = claim
+Block A: Patterns: intent: enquiry & subject: claim
+Block A will be selected.
+```
+
+#### High Confidence, Partial Match
+
+A block may match only some patterns but have high-confidence input on those matched ones, making it a better candidate than others with full matches but low-confidence entities. **Note: Confidence is multiplied by a pre-defined weight for each entity type.**
+
+```
+Example:
+Input: intent = issue (confidence: 0.92) & subject = claim (confidence: 0.65)
+Block A: Pattern: intent: issue
+Block B: Pattern: subject: claim
+➤ Block A gets a high score based on confidence × weight (assuming both weights are equal to 1).
+```
+
+#### Multiple Blocks with Similar Patterns
+
+```
+Input: intent = issue & subject = insurance
+Block A: intent = enquiry & subject = insurance
+Block B: subject = insurance
+➤ Block B is selected — Block A mismatches on intent.
+```
+
+#### Exclusion Due to Extra Patterns
+
+If a block contains patterns that require entities not present in the user input, the block is excluded from scoring altogether. No penalties are applied — the block simply isn't considered a valid candidate.
+
+```
+Input: intent = issue & subject = insurance
+Block A: intent = enquiry & subject = insurance & location = office
+Block B: subject = insurance & time = morning
+➤ Neither block is selected due to unmatched required patterns (`location`, `time`)
+```
+
+#### Tie-Breaking with Penalty Factors
+
+When multiple blocks receive similar scores, penalty factors can help break the tie — especially in cases where patterns are less specific (e.g., using `Any` as a value).
+
+```
+Input: intent = enquiry & subject = insurance
+
+Block A: intent = enquiry & subject = Any
+Block B: intent = enquiry & subject = insurance
+Block C: subject = insurance
+
+Scoring Summary:
+- Block A matches both patterns, but subject = Any is considered less specific.
+- Block B has a redundant but fully specific match.
+- Block C matches only one pattern.
+
+➤ Block A and Block B have similar raw scores.
+➤ A penalty factor is applied to Block A due to its use of Any, reducing its final score.
+➤ Block B is selected.
+```
+
+### How Scoring Works
+
+#### Matching and Confidence
+
+For each entity in the block's pattern:
+
+* If the entity `matches` an entity in the user input:
+ * the score is increased by: `confidence × weight`
+ * `Confidence` is a value between 0 and 1, returned by the NLU engine.
+ * `Weight` (default value is `1`) is a configured importance factor for that specific entity type.
+* If the match is a wildcard (i.e., the block accepts any value):
+ * A **penalty factor** is applied to slightly reduce its contribution: `confidence × weight × penaltyFactor`. This encourages more specific matches when available.
+
+#### Scoring Formula Summary
+
+For each matched entity:
+
+```
+score += confidence × weight × [optional penalty factor if wildcard]
+```
+
+The total block score is the sum of all matched patterns in that block.
+
+#### Penalty Factor
+
+The **penalty factor** is a global multiplier (typically less than `1`, e.g., `0.8`) applied when the match type is less specific — such as wildcard or loose entity type matches. It allows the system to:
+
+* Break ties in favor of more precise blocks
+* Discourage overly generic blocks from being selected when better matches are available
diff --git a/docs/user-guide/subscribers.md b/docs/user-guide/subscribers.md
new file mode 100644
index 000000000..0543b3c66
--- /dev/null
+++ b/docs/user-guide/subscribers.md
@@ -0,0 +1,52 @@
+---
+icon: users-between-lines
+---
+
+# Subscribers
+
+In Hexabot, we define a subscriber as then end-user who will ultimately interact with the chatbot. The Subscriber Management features allow you to effectively track, organize, and interact with the users who engage with your chatbot. This guide will walk you through the process of managing your subscriber base, segmenting them using labels, and leveraging subscriber data for improved communication and targeted interactions.
+
+**1. Access Subscriber Management:**
+
+* Open the "Manage Subscribers" page from sidebar menu.
+
+**2. Viewing Your Subscriber List:**
+
+* **Subscriber List:** The subscriber list displays information about each user who has interacted with your chatbot. This includes:
+ * **First Name and Last Name:** The name assigned to each user.
+ * **Channel:** The platform where the user interacted with your chatbot (e.g., "Facebook Messenger," "Website," "Live Chat Tester", ...).
+ * **Gender:** The user's gender, if provided.
+ * **Locale:** The user's language preference or location (e.g., "en-US" for English, United States).
+ * **Labels:** Any labels that have been assigned to the subscriber.
+ * **Created Date:** The date when the user first interacted with your chatbot.
+ * **Updated At:** The date when the user's profile was last updated.
+
+**3. Managing Individual Subscribers:**
+
+Click on the "MANAGE LABELS" button next to the subscriber to manage their labels. You'll be presented with a dialog where you can:
+
+* **Select a Label:** Choose the label(s) you want to assign to the subscriber.
+* **Submit:** Click on the "SUBMIT" button to confirm the label assignment.
+
+**4. Using Subscriber Labels:**
+
+* **Label Management:** Hexabot's label management system allows you to categorize and segment your subscribers based on their interests, behaviors, or other characteristics.
+* **Create Labels:**
+ * Click on the "Add" button in the "Labels" section to create a new label. You'll be presented with a dialog where you can:
+ * **Title (Required):** Enter a descriptive title for the label (e.g., "Interested in Products," "Needs Customer Support," "Active Users").
+ * **Name:** a unique name for the label generated based on the provided title (e.g., "product\_interest", "need\_support", "active\_users").
+ * **Description (Optional):** Provide a more detailed description of the label (e.g., "Users who have expressed interest in specific products," "Users who have requested customer support," "Users who have interacted with the chatbot in the last 30 days").
+ * **Submit:** Click on the "SUBMIT" button to save the new label.
+
+**Using Labels for Targeted Communication:**
+
+* **Conversation Flows:** Create different conversation flows for subscribers who belong to specific labels.
+* **Promotional Messages:** Send targeted promotional messages based on subscriber labels.
+* **Personalized Responses:** Use labels to provide more personalized responses to users based on their interests or behaviors.
+
+
Target subscribers with a given label
+
+**Best Practices for Subscriber Management:**
+
+* **Clear Label Strategy:** Develop a well-defined strategy for using labels to ensure that your segmentation is meaningful and effective.
+* **Regular Updates:** Keep your subscriber data up to date, and regularly review your label assignments to ensure they remain accurate.
diff --git a/docs/user-guide/users-and-roles/README.md b/docs/user-guide/users-and-roles/README.md
new file mode 100644
index 000000000..6d536aa71
--- /dev/null
+++ b/docs/user-guide/users-and-roles/README.md
@@ -0,0 +1,25 @@
+---
+icon: users-gear
+---
+
+# Users and Roles
+
+Hexabot offers robust user and role management features to streamline collaboration and ensure security within your chatbot projects. Whether you're working with a team of developers, content creators, or marketing professionals, Hexabot makes it easy to grant the right access levels to the right people.
+
+**Why Manage Users and Roles?**
+
+* **Security:** Control who has access to your chatbot project and which parts of the platform they can access.
+* **Collaboration:** Enable multiple individuals to work together on your chatbot project efficiently without disrupting each other's work.
+* **Clear Responsibilities:** Assign specific roles to team members based on their expertise and responsibilities, ensuring that everyone is focused on the right tasks.
+
+**Key Concepts:**
+
+* **Users:** Individuals with accounts in Hexabot. Each user has a unique profile and set of permissions.
+* **Roles:** Predefined sets of permissions that determine what actions a user can take within the platform.
+
+**Example Scenarios:**
+
+* **Developer:** A developer might have full access to all areas of the platform, including the Visual Editor, NLP training, and the CMS.
+* **Content Creator:** A content creator may have access to the CMS to update chatbot responses and manage knowledge base entries, but might not have access to code or NLP training settings.
+
+
diff --git a/docs/user-guide/users-and-roles/manage-roles.md b/docs/user-guide/users-and-roles/manage-roles.md
new file mode 100644
index 000000000..b9b586a98
--- /dev/null
+++ b/docs/user-guide/users-and-roles/manage-roles.md
@@ -0,0 +1,35 @@
+# Manage roles
+
+Roles in Hexabot define specific sets of permissions that determine what actions users can perform. By creating and assigning roles, you can control who has access to different parts of the system and what they are able to perform.
+
+**1. Access Role Management:**
+
+* Log in to your Hexabot account.
+* Go to "Users" or "User Management" section.
+* Look for "Roles" or "Role Management" within the user management settings.
+
+**2. Creating New Role:**
+
+* **Click "+ Add "** This will open a form where you can define the new role.
+* **Enter Role Name:** Provide a clear and descriptive name for the role, like "Developer," "Content Manager," "Project Manager," etc.
+
+**3. Grant Permissions**
+
+Newly created roles will initially have no granted permissions. Click the "Permissions" button to grant access to your new role or update the permissions for an existing role.
+
+* **Grant Permissions:** The role management interface will typically provide a list of available permissions. Select the specific permissions you want to grant to users with this role (e.g., read, create, update, delete):
+
+ * **Message:** Access to build and edit conversation flows.
+ * **NlpSample, NlpSampleEntity, NlpEntity, NlpValue:** Access to train and manage the chatbot's language understanding.
+ * **Content:** Access to manage chatbot content.
+ * **BotStats:** Access to view and analyze chatbot performance metrics.
+ * **User :** Access to manage users
+ * **Role :** Access to manage roles
+ * ...
+
+ **And other Permissions:** The specific permissions available may vary depending on the version of Hexabot.
+
+**4. Deleting Roles:**
+
+* **Locate the Role:** Find the role you want to delete.
+* **Click "Delete":** Be careful when deleting roles, as this will remove all permissions associated with the role. Users assigned to that role will lose their access to the specified features.
diff --git a/docs/user-guide/users-and-roles/manage-users.md b/docs/user-guide/users-and-roles/manage-users.md
new file mode 100644
index 000000000..097739175
--- /dev/null
+++ b/docs/user-guide/users-and-roles/manage-users.md
@@ -0,0 +1,39 @@
+# Manage users
+
+Hexabot's user management system allows you to control access to your chatbot project, ensuring that the right people have the right permissions. This guide walks you through the steps of adding, editing, and managing users in your Hexabot workspace.
+
+### **1. Access User Management:**
+
+* Log in to your Hexabot account.
+* Locate the "Users" or "User Management" section. This is typically found in the main menu under Admin section.
+
+### **2. Adding New Users:**
+
+* **Click the "+ INVITE"** button**.** This opens a form where you can create a new user account.
+* **Provide User Details:** Fill in the required fields, which typically include:
+ * **Email Address:** The user's primary email address.
+ * **Role :** Assign a role during user creation, choose the most appropriate role based on the user's responsibilities. By default, Hexabot present you with 3 key roles that you can choose from : manager, public and admin.
+* **Send Invitation :** Click on "SEND" button to invite the new user to join. If your Hexabot is configured properly to send emails, he will receive an email with a link to register and activate their account. If you're unable to send the invitation, please contact your system administrator to verify the email settings.
+
+### **3. Editing Role:**
+
+* **View User List:** Find the user you want to edit in the list of users within the User Management section.
+* **Click on "Manage Roles" :** This will open a dialog window, where you can make adjustments to the user roles. Change the user's role to grant them different permissions.
+
+### 4. Managing User Account Status
+
+In Hexabot's User Management section, you can control the status of each user account. This allows you to activate or deactivate a given user's access to the platform. While you cannot permanently delete user accounts, you can effectively disable them to prevent them from accessing the system.
+
+* **Enabled:** A user with an "**Enabled**" status has full access to Hexabot, based on their assigned role and permissions.
+* **Disabled:** A user with a "**Disabled**" status cannot access Hexabot. They will not be able to log in or perform any actions.
+
+**Managing Account Status:**
+
+* **Locate the User:** Find the user whose account status you want to modify in the list of users within the User Management section.
+* **Change Status:** Look for an option to "**Enable**" or "**Disable**" the user's account.
+ * **Disabling an Account:** To prevent a user from accessing Hexabot, set their account status to "**Disabled**."
+ * **Reactivating an Account:** To restore access to a user, set their account status to "**Enabled**."
+
+{% hint style="warning" %}
+**Important Note:** Disabling an account does not permanently delete the account data. The user profile and all associated information are still stored in the Hexabot system. If you need to remove a user's data completely, you'll need to contact your Hexabot administrator or our support team for assistance.
+{% endhint %}
diff --git a/docs/user-guide/visual-editor/README.md b/docs/user-guide/visual-editor/README.md
new file mode 100644
index 000000000..e89c6d060
--- /dev/null
+++ b/docs/user-guide/visual-editor/README.md
@@ -0,0 +1,17 @@
+---
+icon: table-columns
+---
+
+# Visual Editor
+
+{% include "../../.gitbook/includes/visual-editor-ui.md" %}
+
+The visual editor in Hexabot simplifies chatbot creation and optimization through its core feature: the **block palette**. This palette acts as an essential menu, granting control over and configuration of the chatbot's conversational flow. In essence, it provides users with a set of tools in the form of blocks, each designed to perform specific tasks in building the dialogue between the chatbot and its users.
+
+**Blocks are the fundamental building blocks of any chatbot** and play a central role in creating the conversation flow. They define how the chatbot interacts with users and responds to their various requests. Using blocks, you can design the conversational path intuitively, **without requiring any programming skills**. Each block is designed to fulfill a particular function and can be easily integrated into the overall dialogue flow.
+
+In practice, blocks enable you to create a structured chain of responses and interactions between the chatbot and the user. For example, some blocks can be configured to send text messages, while others can be used to capture user responses, such as choices or specific data. Other blocks can be configured to integrate external services or APIs, allowing the chatbot to connect to third-party systems and enrich interactions with additional data.
+
+To build the conversational path, you can add blocks to the design canvas and connect them. This connectivity is crucial as it determines the sequence in which interactions occur. It allows you to create complex conversation scenarios by defining precise rules for each block and linking them logically. For example, a message block could be followed by a user input block, then a decision block that steers the conversation based on the user's responses.
+
+Each block has a specific type that determines its role and capabilities in the conversational flow. For instance, a message block will send a predefined text, while an input capture block will allow the chatbot to gather information from the user, such as answers to questions or choices from multiple options. Additionally, integration blocks can be used to interact with external services, such as a 3rd party API, an e-commerce website or a billing system, enabling the chatbot to provide more personalized and relevant responses.
diff --git a/docs/user-guide/visual-editor/regular-blocks/README.md b/docs/user-guide/visual-editor/regular-blocks/README.md
new file mode 100644
index 000000000..d80bf2e01
--- /dev/null
+++ b/docs/user-guide/visual-editor/regular-blocks/README.md
@@ -0,0 +1,69 @@
+# Regular Blocks
+
+Regular blocks are the most common building blocks that a user might need when creating a chatbot. On their own, they provide comprehensive control over the chatbot's responses, assuming that the conversational flow and message samples are well-defined and accurately reflect the users' queries and interactions.
+
+{% tabs %}
+{% tab title="Simple Text" %}
+{% include "../../../.gitbook/includes/simle-text-block.md" %}
+
+Chatbots receive and react to a significant volume of textual data. Text messages are the primary form of communication between a chatbot and its users. For this purpose, Hexabot provides the **Simple Text block**, prominently featured in the block palette, to facilitate the addition and configuration of straightforward textual conversational paths.
+
+To configure what response the chatbot should deliver upon receiving a predefined message, simply select the block and click on the "**Edit**" button.
+
+{% hint style="warning" %}
+ **Caution:** If there are multiple text blocks on the visual editor interface, make sure to select the specific text block you want to edit to avoid disrupting the conversational flows.
+{% endhint %}
+
+Blocks can be moved around in the canvas; simply click on the block and hold the click to drag and drop them, ensuring better visibility of the conversational tree structure.
+
+To define how the chatbot should react to user messages, select the block you want to configure, access the edit form using the "**Edit**" button, switch to the "**Triggers**" tab and enter a typical message that a user might send to the chatbot. Then, switch to the "**Message**" tab, specify the standard response that the chatbot should provide each time it receives a similar request, and click "**Submit**".
+
+Text messages provide response clarity, allow for chatbot control, and maintain a fluid and active communication with users. However, relying solely on textual conversational paths is insufficient for transmitting non-textual data and can sometimes lead to rigid and less than optimal pathways for effectively guiding users.
+
+For this reason, Hexabot offers a variety of interaction possibilities and provides several other blocks to diversify conversational paths.
+{% endtab %}
+
+{% tab title="Quick Replies" %}
+{% include "../../../.gitbook/includes/quick-replies-block.md" %}
+
+The Quick Replies block in Hexabot allows you to present users with a predefined set of responses in the form of clickable buttons, eliminating the need for them to manually type their answers. Quick Reply blocks can be configured with conditional triggers, ensuring they are displayed only when certain conditions within the conversation are met. This adds more dynamic control over how Quick Replies are used in your chatbot.
+
+
+
+**Use Cases for Quick Replies:**
+
+* **Asking Yes/No Questions:** Quick Replies simplify binary decisions by offering clear "Yes" and "No" options.
+* **Gathering Basic Information:** Use Quick Replies to collect simple user information like language preferences, contact methods, or preferences.
+* **Guiding the Conversation:** Subtly steer the direction of the dialog by suggesting actions or providing prompts as Quick Reply options.
+
+
+{% endtab %}
+
+{% tab title="Buttons" %}
+{% include "../../../.gitbook/includes/buttons-block.md" %}
+
+The **Buttons block** in Hexabot provides a structured and versatile way to present users with interactive choices within your chatbot conversations. It allows you to display a set of clickable buttons, each representing a distinct action or navigation path. Buttons differ from Quick Replies in their visual layout; while Quick Replies typically appear horizontally, Buttons are usually arranged vertically, making them suitable for presenting a more defined list of options.
+
+Buttons blocks, like Quick Replies, can be configured with conditional triggers, ensuring they are displayed only when specific conditions within the conversation are met. This allows for greater flexibility and dynamic control over your chatbot's flow.
+
+**Use Cases for Buttons:**
+
+* **Presenting a Menu of Options:** Offer users a clear and organized selection of choices, such as product categories, account settings, or support topics.
+* **Initiating Actions:** Trigger specific actions within the chatbot, like "Place Order," "Schedule Appointment," or "Contact Support."
+* **Navigating to External Resources:** Direct users to external web pages or applications using URL buttons, providing additional information or linking to related services.
+{% endtab %}
+
+{% tab title="Attachment" %}
+{% include "../../../.gitbook/includes/attachement-block.md" %}
+
+The **Attachment block** in Hexabot enables you to share files directly within your chatbot conversations, enhancing the user experience with rich media content. Go beyond text-only interactions by sending documents, images, videos, or other relevant files to provide more comprehensive information or a more engaging chatbot experience.
+
+**Use Cases for Attachments:**
+
+* **Sharing Documents:** Provide users with helpful resources such as product brochures, instruction manuals, invoice, or reports in PDF format.
+* **Displaying Images:** Enhance your chatbot's responses with visual elements like product images, infographics, or diagrams.
+* **Delivering Audio or Video Content:** Share audio instructions, product demonstrations, or company announcements directly through the chatbot.
+* **Sending Personalized Files:** Based on user interactions or collected data, you can send customized documents or images tailored to the user's specific needs or requests.
+{% endtab %}
+{% endtabs %}
+
diff --git a/docs/user-guide/visual-editor/regular-blocks/using-attachment-block.md b/docs/user-guide/visual-editor/regular-blocks/using-attachment-block.md
new file mode 100644
index 000000000..29f0b58e7
--- /dev/null
+++ b/docs/user-guide/visual-editor/regular-blocks/using-attachment-block.md
@@ -0,0 +1,48 @@
+# Using Attachment Block
+
+{% include "../../../.gitbook/includes/attachement-block.md" %}
+
+The Attachment block in Hexabot allows you to share files with your chatbot users, making your conversations more engaging and informative. You can send PDF documents and image, enhancing the chatbot's ability to provide richer and more comprehensive responses.
+
+This guide will walk you through the steps of using the Attachment block:
+
+**1. Add the Attachment Block:**
+
+* In the Visual Editor, locate the "Attachment" block within the block palette.
+* Drag and drop the Attachment block onto the canvas, positioning it where you want the attachment to be sent in the conversation flow.
+
+**2. Connect the Block:**
+
+* **Preceding Connection:** Connect the Attachment block to the previous block in the conversation flow. This connection determines when the attachment will be sent to the user. You can connect the Attachment block to any type of block that prompts a user action or response, such as a Simple Text block, a Quick Replies block, or a Buttons block.
+
+**3. Configure the Attachment:**
+
+* **Select the Block:** Click on the Attachment block you added to the canvas.
+* **Click "Edit":** The configuration panel for the Attachment block will open.
+* **Triggers Tab (Optional):**
+ * If you want the attachment to be sent only under certain conditions, use the "Triggers" tab to define those conditions.
+ * This could involve triggers based on user input, specific data, or other conversational context.
+* **Message Tab:** This tab allows you to select and configure the attachment file:
+ * **Attachment Type:** Choose the type of file you want to attach (e.g., image, document, audio, video).
+ * **File Selection:** Upload the file from your computer or provide a URL to the file if it is hosted online.
+ * **Title (Optional):** Enter a title or descriptive text for the attachment that will be displayed to the user (e.g., "Product Brochure," "Audio Instructions").
+* **Options Tab (Optional):** Configure any additional options for the Attachment block, such as the typing indicator or label assignment.
+
+**4. Save and Test:**
+
+* Click the "Save" button in the configuration panel to save the changes.
+* Use the "Live Chat Tester" or interact with the chatbot through your chosen channel to verify that the attachment is being sent correctly and that the user is able to view or download the file.
+
+**Example:**
+
+Suppose you have a chatbot that helps users troubleshoot technical issues. You might use the Attachment block to send a PDF document containing a troubleshooting guide:
+
+* **Attachment Type:** Document
+* **File Selection:** Upload a PDF file named "TroubleshootingGuide.pdf."
+* **Title:** "Here's a helpful troubleshooting guide."
+
+**Tips and Best Practices:**
+
+* **File Size:** Be mindful of file sizes, especially when sending videos or large documents. Consider compressing files or hosting them online for optimal delivery.
+* **File Formats:** Choose file formats that are compatible with the messaging platform where your chatbot is deployed.
+* **Contextual Relevance:** Ensure that attachments are relevant to the conversation and provide value to the user.
diff --git a/docs/user-guide/visual-editor/regular-blocks/using-buttons-block.md b/docs/user-guide/visual-editor/regular-blocks/using-buttons-block.md
new file mode 100644
index 000000000..c93ed0c93
--- /dev/null
+++ b/docs/user-guide/visual-editor/regular-blocks/using-buttons-block.md
@@ -0,0 +1,52 @@
+# Using Buttons Block
+
+{% include "../../../.gitbook/includes/buttons-block.md" %}
+
+The Buttons block enables you to display a set of clickable buttons to users, allowing them to easily make choices and guide the flow of the conversation. Unlike Quick Replies, which are typically displayed horizontally, Buttons can be arranged in a vertical layout, providing a more structured and visually appealing way to present options.
+
+This guide will walk you through the steps of using the Buttons block:
+
+**1. Add the Buttons Block:**
+
+* Locate the "Buttons" block in the block palette within the Visual Editor.
+* Drag and drop the Buttons block onto the canvas, placing it at the point in the conversation flow where you want the buttons to appear.
+
+**2. Connect the Block:**
+
+* **Preceding Connection:** Connect the Buttons block to the previous block in the conversation flow to determine when the buttons should be displayed to the user.
+* You can connect the Buttons block to any block that sends a message or prompts a user action, such as a Simple Text block or a User Input block.
+
+**3. Configure the Buttons:**
+
+* **Select the Block:** Click on the Buttons block you added to the canvas to select it.
+* **Click "Edit":** The configuration panel for the Buttons block will open.
+* **Triggers Tab (Optional):**
+ * If you want the buttons to be displayed only under specific conditions, define those conditions in the "Triggers" tab.
+ * This could include triggers based on the user's previous message, specific data values, or other factors relevant to the conversation.
+* **Message Tab:** This tab allows you to set up the content and appearance of the buttons:
+ * **Title (Optional):** Add a title or brief instruction above the buttons to provide context or guide the user.
+ * **Buttons:** Click the "Add Button" button to create your button options. For each button:
+ * **Title:** Enter the text that will be displayed on the button (e.g., "Learn More," "Contact Us").
+ * **Payload:** Define a unique payload for each button. This payload is a value that's sent back to the chatbot when a user clicks that specific button.
+ * **Type:** Choose the type of action you want the button to trigger:
+ * **Postback:** Sends the payload to the chatbot, allowing you to branch the conversation or trigger specific actions. (This is the most common type for navigation and actions within the chatbot.)
+ * **Web URL:** Opens a web page in a new browser window. Enter the complete URL you want to open (e.g., "[https://www.example.com](https://www.google.com/url?sa=E\&q=https%3A%2F%2Fwww.example.com)").
+* **Options Tab (Optional):** Configure additional settings like the typing indicator delay or assign labels to target specific users with the button options.
+
+**4. Save and Test:**
+
+* Click the "Save" button in the configuration panel.
+* Use the "Live Chat Tester" or interact with your chatbot on your chosen channel to verify that the buttons are displayed correctly and that clicking them triggers the intended actions based on their defined payloads.
+
+**Example:**
+
+Let's say you have a chatbot for a restaurant. You could use the Buttons block to present a menu:
+
+* **Title:** "What would you like to order?"
+* **Buttons:**
+
+ * **Title:** "Appetizers" **Payload:** "show\_appetizers" **Type:** Postback
+ * **Title:** "Main Courses" **Payload:** "show\_main\_courses" **Type:** Postback
+ * **Title:** "Desserts" **Payload:** "show\_desserts" **Type:** Postback
+ * **Title:** "Visit Our Website" **Payload:** (Leave blank) **Type:** Web URL (Link to the restaurant's website)
+
diff --git a/docs/user-guide/visual-editor/regular-blocks/using-quick-replies-block.md b/docs/user-guide/visual-editor/regular-blocks/using-quick-replies-block.md
new file mode 100644
index 000000000..69df2d575
--- /dev/null
+++ b/docs/user-guide/visual-editor/regular-blocks/using-quick-replies-block.md
@@ -0,0 +1,44 @@
+# Using Quick Replies Block
+
+{% include "../../../.gitbook/includes/quick-replies-block.md" %}
+
+The Quick Replies block enhances chatbot interactions by offering users a quick and pratical way to the user to provide a standard input. Instead of typing a response, users can select from a predefined set of buttons, each representing a specific option or action.
+
+**1. Add the Quick Replies Block:**
+
+* In the Visual Editor, locate the "Quick Replies" block in the block palette (usually on the left or right side of the editor).
+* Drag and drop the Quick Replies block onto the canvas where you want it to appear in the conversation flow.
+
+**2. Connect the Block:**
+
+* Connect the Quick Replies block to the preceding block in your conversation flow. This connection determines when the quick replies will be displayed to the user.
+* You can connect the Quick Replies block to any block that sends a message to the user (e.g., a Simple Text block, an Attachment block).
+
+**3. Configure the Quick Replies:**
+
+* **Select the Block:** Click on the Quick Replies block on the canvas to select it.
+* **Click "Edit":** A configuration panel for the Quick Replies block will open.
+* **Triggers Tab (Optional):** If you want the Quick Replies to be displayed only under certain conditions, you can use the Triggers tab to define these conditions. For example, you might trigger the Quick Replies only if the user's previous message contained specific keywords.
+* **Message Tab:** This is where you define the content of the quick replies.
+ * **Title (Optional):** Enter a title for the quick replies. This title will be displayed above the buttons.
+ * **Buttons:** Add the quick reply buttons that you want to provide to the user. Each button has two fields:
+ * **Title:** The text that will be displayed on the button.
+ * **Payload:** A value that will be sent back to your chatbot when the user clicks the button. You can use this payload to trigger different actions or branches in your conversation flow based on the user's choice.
+* **Options Tab (Optional):** This tab allows you to configure advanced options for the Quick Replies block, such as adding a typing indicator, assigning the block to specific user labels, or defining fallback responses if the user enters something unexpected.
+
+**4. Save and Test:**
+
+* **Save Changes:** Click the "Save" button in the configuration panel to save your changes to the Quick Replies block.
+* **Test the Conversation:** Use the "Live Chat Tester" or connect to your chatbot through your chosen channel (e.g., Facebook Messenger) to test the conversation flow and ensure that the Quick Replies are displayed and function as expected.
+
+**Example:**
+
+Let's say you want to create a chatbot that asks users about their preferred mode of contact. You could use the Quick Replies block to offer the following options:
+
+* **Title:** "How would you prefer to be contacted?"
+* **Buttons:**
+ * **Title:** "Email" **Payload:** "contact\_email"
+ * **Title:** "Phone" **Payload:** "contact\_phone"
+ * **Title:** "Chat" **Payload:** "contact\_chat"
+
+Based on the payload returned when the user clicks a button, you can then direct the chatbot to ask for their email address, phone number, or continue the conversation within the chat interface.
diff --git a/docs/user-guide/visual-editor/regular-blocks/using-simple-text-block.md b/docs/user-guide/visual-editor/regular-blocks/using-simple-text-block.md
new file mode 100644
index 000000000..60a511626
--- /dev/null
+++ b/docs/user-guide/visual-editor/regular-blocks/using-simple-text-block.md
@@ -0,0 +1,51 @@
+# Using Simple Text Block
+
+{% include "../../../.gitbook/includes/simle-text-block.md" %}
+
+**1. Add the Simple Text Block:**
+
+* Locate the "Simple Text" block in the block palette. It's often the first or most prominent block in the list.
+* Drag and drop the "Simple Text" block onto the canvas, placing it where you want the text message to appear in the conversation flow.
+
+**2. Connect the Block:**
+
+* **Start of a Flow:** If a "Simple Text" block is the first step in your flow, enable the .png>) "**Entrypoint**" option to mark it as the starting point in your conversation flow. You just need to toggle on the "**Entrypoint**" option in the block edit form to designate it as the starting point in your conversation flow.
+* **Continuing a Flow:** If the block is part of a longer conversation, connect it to the preceding block to define when the text message should be sent. This connection could be from any type of block, like a Quick Replies block, a User Input block, or another Simple Text block. Each block has a single input port and two types of output ports :
+ * .png>) **Next/Previous Block(s) Port:** Defines which block(s) should be triggered next, depending on the user input/reply.
+ * .png>) **Attached Block Port:** This should be used if you would like to send subsequent messages.
+
+**3. Configure the Text Message:**
+
+* **Select the Block:** Click on the Simple Text block you added to the canvas.
+* **Click "Edit":** This opens the configuration panel for the Simple Text block.
+* **Triggers Tab (Optional):**
+ * If you only want the text message to be sent under certain conditions, define those conditions in the "Triggers" tab.
+ * You can use triggers based on the user's previous message, the presence of specific data, or other contextual factors.
+ * You can also choose to target users by a specific label or limit the block scope to a given channel.
+* **Message Tab:**
+ * Enter the text you want to send to the user in the "Message" field.
+ * You can define one or multiple text message, the chatbot will randomly send one of them.
+* **Options Tab (Optional):**
+ * **Typing Indicator:** Show a typing indicator before sending the message.
+ * **Assign Labels:** Associate the block with specific user labels. This enables you to send different messages to users based on their categories or characteristics.
+ * **Fallback Responses:** Define messages to send if the user's input doesn't meet any defined triggers, preventing dead ends in the conversation.
+
+**4. Save and Test:**
+
+* Click the "Save" button to save the changes you made to the Simple Text block.
+* Use the "Live Chat Tester" or interact with the chatbot through your chosen channel to test how the Simple Text block works in the actual conversation flow.
+
+**Example:**
+
+You might use a Simple Text block at the beginning of a conversation to greet the user:
+
+* **Message Tab:** "Hi there! 👋 Welcome to our customer support chatbot. How can I help you today?"
+
+{% hint style="info" %}
+**Tips:**
+
+* **Be Clear and Concise:** Keep messages short, focused, and easy to understand.
+* **Use a Natural Tone:** Write in a friendly and conversational style.
+* **Personalize When Possible:** Use information you know about the user (e.g., name) to tailor messages.
+* **Provide Context:** Make sure the user knows why they are receiving a message and what they should do next.
+{% endhint %}
diff --git a/docs/user-guide/visual-editor/using-advanced-blocks.md b/docs/user-guide/visual-editor/using-advanced-blocks.md
new file mode 100644
index 000000000..2ba66dcf6
--- /dev/null
+++ b/docs/user-guide/visual-editor/using-advanced-blocks.md
@@ -0,0 +1,58 @@
+# Using Advanced Blocks
+
+{% include "../../.gitbook/includes/list-block.md" %}
+
+The List block in Hexabot provides a dynamic way to showcase a collection of items, options, or information to your users in an organized and engaging manner. You have the flexibility to display your content in either a traditional list format or as a visually appealing carousel.
+
+The List block is ideal when you need to:
+
+* Present a menu of options to the user.
+* Showcase a collection of products or services.
+* Display a series of steps or instructions in a clear format.
+* Provide users with multiple choices that they can easily browse.
+
+
+
+**1. Add the List Block:**
+
+* Find the "List" block in the block palette within the Visual Editor.
+* Drag and drop the List block onto the canvas, placing it at the desired point in the conversation flow where you want the list to be displayed.
+
+**2. Connect the Block:**
+
+* **Preceding Connection:** Connect the List block to the block that precedes it in the conversation flow. This connection determines when the list will be shown to the user. It can be linked to any block that prompts user interaction or provides information, such as a Simple Text block or a Quick Replies block.
+
+**3. Configure the List:**
+
+* **Select the Block:** Click on the List block on the canvas.
+* **Click "Edit":** The configuration panel for the List block will open, allowing you to customize the list's appearance and content.
+* **Triggers Tab (Optional):**
+ * If you want the List block to be triggered only under specific conditions, define those conditions in the "Triggers" tab.
+ * These could be based on user responses, data values, or other relevant conversation elements.
+* **Message Tab:** This tab is where you define the items in your list and how they should be presented:
+ * **Title (Optional):** Provide a title for the list, giving users context about the information being displayed.
+ * **Items:** Add individual list items using the "Add Item" button. For each item:
+ * **Title:** Enter the title or main text for the list item (e.g., "Product Name," "Service Description").
+ * **Subtitle (Optional):** Add a brief subtitle to provide more details about the list item.
+ * **Image (Optional):** Upload an image to be displayed next to the list item, making it visually engaging.
+ * **Button (Optional):** Include a button to allow users to interact with the list item directly. You can set the button type (Postback or Web URL) and define a payload to trigger actions or open external links.
+* **Options Tab (Optional):**
+ * **Display Mode:** Select whether the list should be displayed as a regular vertical list or a horizontally scrolling carousel. The carousel mode is particularly useful for presenting image-heavy lists.
+ * **Pagination:** If you have a large number of items, enable pagination to break the list into manageable chunks.
+ * **Other Options:** Configure typing indicator delay, label targeting, and fallback responses as needed.
+
+**4. Save and Test:**
+
+* Click "Save" to store your changes to the List block.
+* Test the conversation flow in the "Live Chat Tester" or through your connected messaging channels to ensure the List block is working correctly.
+
+**Example:**
+
+Imagine you have a real estate chatbot showcasing property listings. A List block would be ideal to present a selection of properties to the user:
+
+* **Title:** "Here are some properties that match your criteria:"
+* **Items:**
+ * **Title:** "Modern 3-Bedroom House"
+ * **Subtitle:** "Spacious garden, prime location"
+ * **Image:** Upload an image of the house.
+ * **Button:** Title: "View Details" Payload: "property\_details\_123" Type: Postback
diff --git a/docs/user-guide/visual-editor/using-the-visual-editor.md b/docs/user-guide/visual-editor/using-the-visual-editor.md
new file mode 100644
index 000000000..47b162a20
--- /dev/null
+++ b/docs/user-guide/visual-editor/using-the-visual-editor.md
@@ -0,0 +1,38 @@
+# Using the Visual Editor
+
+Hexabot's Visual Editor provides an intuitive drag-and-drop interface to design your chatbot's conversation flows without writing any code. This guide walks you through the key elements and functionalities of the Visual Editor, making it easy to build engaging chatbot experiences.
+
+**1. Accessing the Visual Editor:**
+
+* Log in to your Hexabot account.
+* In the main menu, click on "Visual Editor."
+
+**2. Understanding the Interface:**
+
+The Visual Editor typically consists of the following main areas:
+
+* **Canvas:** The central workspace where you build your conversation flow.
+* **Block Palette:** A menu or sidebar listing the various blocks you can use to design your chatbot's interactions (e.g., Simple Text, Quick Replies, Buttons, User Input, etc.).
+* **Configuration Panel:** A panel that appears when you select a block on the canvas, allowing you to customize the block's properties, triggers, and responses.
+* Toolbar: A toolbar located at the bottom right of the editor, primarily used for managing the canvas view with options to zoom in, zoom out, and reset the view to its default size.
+
+**3. Building a Conversation Flow:**
+
+* **Drag and Drop Blocks:** Drag blocks from the block palette onto the canvas to add them to your conversation flow.
+* **Connect Blocks:** Click and drag from the connection points of one block to another to define the sequence of interactions. The connections determine the flow of the conversation.
+* **Customize Blocks:** Click on any block on the canvas to select it. The configuration panel will open, allowing you to edit the block's properties:
+ * **Triggers Tab (Optional):** Define the conditions that determine when the block should be activated. This could include specific keywords in the user's message, previously collected data, or other events.
+ * **Message Tab:** Enter the text message the chatbot will send, configure buttons or quick reply options, or specify other chatbot actions (like displaying an image or collecting user input).
+ * **Options Tab (Optional):** Set additional settings like the typing indicator delay, label targeting, or define fallback responses for unexpected user input.
+
+**4. Organizing Your Conversation Flow:**
+
+* **Layout:** Arrange blocks on the canvas to create a visually clear and logical flow.
+* **Branching:** Use conditional logic (typically in the "Triggers" tab) to create branches in your conversation flow. This lets you handle different user responses and guide them down different paths based on their choices.
+* **Grouping (Optional):** Hexabot allow you to group blocks into categories to keep related parts of your conversation flow organized in different tabs.
+
+**5. Testing and Iteration:**
+
+* **Live Chat Tester:** Most chatbot platforms offer a "Live Chat Tester" feature within the Visual Editor. This lets you test your conversation flow and see how your chatbot interacts in a simulated environment.
+* **Channel Testing:** Once you're satisfied with the basic flow, test your chatbot on the actual messaging channels (e.g., website, Facebook Messenger) where it will be deployed to get a more realistic user experience.
+* **Iterate Based on Feedback:** Gather feedback from testing and real user interactions. Use this feedback to continuously improve your conversation flow, making it more engaging, effective, and user-friendly.