# Chat Add-on

#### About Add-on

The **SpurtCommerce Chat Plugin** facilitates real-time communication between customers and store administrators or support teams. This plugin enhances customer engagement by providing instant assistance, answering queries, and resolving issues, leading to improved customer satisfaction and increased sales.

**Features:**

* **Real-Time Chat Support**: Enable live chat functionality on your store, allowing customers to connect instantly with support staff for immediate assistance.
* **Customizable Chat Widget**: Personalize the chat interface to match your store's branding, ensuring a seamless customer experience.
* **Chat History Management**: Access and manage past chat interactions to provide context in ongoing conversations and improve customer service.
* **Offline Messaging**: Allow customers to leave messages when support is unavailable, ensuring they receive assistance when the team is back online.
* **Integration with CRM Tools**: Seamlessly integrate with existing customer relationship management systems for enhanced tracking and management of customer interactions.

### <mark style="color:blue;">Frontend Setup - Seller Panel:</mark>

Follow these steps to set up the front end for the Chat addon in Spurtcommerce Seller Panel.

#### Step 1: Install the Addon:

Locate the Spurtcommerce addon package, typically named seller.addOns.zip.

Extract the zip file and copy the chat folder into the addOns folder in your project.

projectFolder -> addOns

After this step, the structure should look like:

projectFolder -> addOns -> chat

Once completed, proceed to update the configuration.

&#x20;

#### Step 2: Update the Configuration

After installing the addon, update the add-ons.constant.ts file to include the necessary plugins:

```
// ----------------------Chat--------------------------
import * as chat from './chat/chat-constant'
// components paths
export const chatConversationComponents = chat.componentLists;
// route paths
export const chatConversationComponentRoutes = chat.routePath;

export const chatAction = chat.addonAction;


```

If you wish to uninstall or remove the Chat addon, replace the component paths and route paths with an empty array.

```
// ----------------------Chat--------------------------
import * as chat from './chat/chat-constant'
// components paths
export const chatConversationComponents = [];
// route paths
export const chatConversationComponentRoutes = [];

export const chatAction = [];


```

#### Step 3: Run the Application:

To run the application with the integrated Chat addon, use the following command:

```
$ npm run large-serve
```

After executing this command, the addon will be available on Spurtcommerce on the designated page.

#### Step 4: Build the Application

Finally, to prepare the application for deployment, run the build command:

```
$ npm run large-build
```

The latest build files will then be ready to deploy to the server.

### <mark style="color:blue;">Frontend Setup – Admin Panel:</mark>

Follow these steps to set up the front end for the Chat addon in Spurtcommerce Admin Panel.

#### Step 1: Install the Addon:

Locate the Spurtcommerce addon package, typically named admin.addOns.zip.

Extract the zip file and copy the Chat folder into the addOns folder in your project.

projectFolder -> addOns

After this step, the structure should look like:

projectFolder -> addOns ->Settings-> Chat

Once completed, proceed to update the configuration.

#### Step 2: Update the Configuration

After installing the addon, update the add-ons.constant.ts file to include the necessary plugins:

```
// ----------------------Chat--------------------------
import * as chat from './chat/chatconversation/chat-constant'
// components paths
export const chatConversationComponents = chat.componentLists;
// route paths
export const chatConversationComponentRoutes = chat.routePath;

```

If you wish to uninstall or remove the Chat addon, replace the component paths and route paths with an empty array.

```
// ----------------------Chat--------------------------
import * as chat from './chat/chatconversation/chat-constant'
// components paths
export const chatConversationComponents = [];
// route paths
export const chatConversationComponentRoutes = [];


```

#### Step 3: Run the Application:

To run the application with the integrated Chat addon, use the following command:

```
$ npm run large-serve
```

After executing this command, the addon will be available on Spurtcommerce on the designated page.

#### Step 4: Build the Application

Finally, to prepare the application for deployment, run the build command:

```
$ npm run large-build
```

The latest build files will then be ready to deploy to the server.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.spurtcommerce.com/addons/b2b-related-addons/chat-add-on.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.