> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-013b37f0.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Build (Legacy)

Deploy a custom build of the chat widget on your deployment server.

## Installation Steps

1. Clone this repository

```bash theme={null}
git clone https://github.com/cometchat-pro/web-chat-widget-custom
```

2. Navigate to the *CometChatWorkspace* directory and replace the URL with your website URL in the CONSTS.js file

```bash theme={null}
cd CometChatWorkspace
```

```javascript theme={null}
// EG: If URL is set as https://your_domain.com/widget
// cometchatwidget.js will be available at https://your_domain.com/widget/cometchatwidget.js
module.exports = {
  URL: "https://your_domain.com/widget",
}
```

3. Install the dependencies

```bash theme={null}
npm install
```

4. Build the project using the below command

```bash theme={null}
npm run build:custom
```

5. Copy all the files from the build directory to your website source code

## Usage

Update the widget's CDN link in the installation code.It will be based on the URL mentioned in the CONSTS.js file.

<Tabs>
  <Tab title="Embedded Layout">
    ```html theme={null}
    <html>

    <head>
      <script defer src="https://your_domain.com/widget/cometchatwidget.js"></script>
    </head>

    <body>
      <div id="cometchat"></div>
      <script>
      window.addEventListener('DOMContentLoaded', (event) => {
          CometChatWidget.init({
              "appID": "APP_ID",
              "appRegion": "APP_REGION",
              "authKey": "AUTH_KEY"
          }).then(response => {
              console.log("Initialization completed successfully");
              //You can now call login function.
              CometChatWidget.login({
                  "uid": "UID"
              }).then(response => {
                  CometChatWidget.launch({
                      "widgetID": "WIDGET_ID",
                      "target": "#cometchat",
                      "roundedCorners": "true",
                      "height": "600px",
                      "width": "800px",
                      "defaultID": 'cometchat-uid-1', //default UID (user) or GUID (group) to show,
                      "defaultType": 'user' //user or group
                  });
              }, error => {
                  console.log("User login failed with error:", error);
                  //Check the reason for error and take appropriate action.
              });
          }, error => {
              console.log("Initialization failed with error:", error);
              //Check the reason for error and take appropriate action.
          });
      });
      </script>
    </body>

    </html>  
    ```
  </Tab>

  <Tab title="Docked Layout">
    ```html theme={null}
    <html>

    <head>
      <script defer src="https://your_domain.com/widget/cometchatwidget.js"></script>
    </head>

    <body>
      <script>
      window.addEventListener('DOMContentLoaded', (event) => {
          CometChatWidget.init({
              "appID": "APP_ID",
              "appRegion": "APP_REGION",
              "authKey": "AUTH_KEY"
          }).then(response => {
              console.log("Initialization completed successfully");
              //You can now call login function.
              CometChatWidget.login({
                  "uid": "UID"
              }).then(response => {
                  CometChatWidget.launch({
                      "widgetID": "WIDGET_ID",
                      "docked": "true",
                      "alignment": "left", //left or right
                      "roundedCorners": "true",
                      "height": "450px",
                      "width": "400px",
                      "defaultID": 'cometchat-uid-1', //default UID (user) or GUID (group) to show,
                      "defaultType": 'user' //user or group
                  });
              }, error => {
                  console.log("User login failed with error:", error);
                  //Check the reason for error and take appropriate action.
              });
          }, error => {
              console.log("Initialization failed with error:", error);
              //Check the reason for error and take appropriate action.
          });
      });
      </script>
    </body>

    </html>
    ```
  </Tab>
</Tabs>
