> ## Documentation Index
> Fetch the complete documentation index at: https://docs2.travtus.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Chat Widget Deployment

<center>
  <img src="https://mintcdn.com/travtus-33/BbquytAFybLqihed/images/widget/widget-desktop.png?fit=max&auto=format&n=BbquytAFybLqihed&q=85&s=1f70e7fbbe28f935dc09b711bbe0aa7f" width="476" height="662" data-path="images/widget/widget-desktop.png" />
</center>

## Widget Installation

<Warning>The chat widget must be embedded in an environment accessible through the public Internet.</Warning>

Include the installation script before the `</body>` tag on every page you want Adam to show, replacing `CLIENT_ID` with the relevant community ID:

```
<script src="https://adam-widget.travtus.com/main.js"></script>
<script>
  (function () {
    window.onload = function () {
      AdamChat.init('adam-bot', {
        clientId: "CLIENT_ID",
        source: "website"
      });                
    }
  })()
</script>
```

## Widget API

The below describe the options and methods that can be called in the Widget API to customize behaviour of the chat widget.

### Methods

The below methods can be called:

<AccordionGroup>
  <Accordion title="init(reference, options)">
    Initializes Adam, and returns the instance.

    It takes two arguments:

    `reference`: A unique reference for the instance (use `adam` if unsure):

    ```
    AdamChat.init("adam", options);
    ```

    `options`: An options object to configure the widget (`clientId` and `source` are mandatory):

    ```
    AdamChat.init("adam", {
      clientId: "CLIENT_ID",
      source: "website"
    });
    ```

    You can find more options to customize the widget below.
  </Accordion>

  <Accordion title="remove()">
    Disconnects the chat and removes it from the page:

    ```
    AdamChat.remove();
    ```

    In order to initialize the chat again, you must use the init() method detailed above.
  </Accordion>

  <Accordion title="openChatWindow()">
    Acts like a click on the Adam launcher, opening the chat window. This can be especially useful for mobile, where you might not want the launcher button to show - rather you can create a custom element and trigger the opening of the chat window programatically:

    ```
    AdamChat.openChatWindow();
    ```
  </Accordion>

  <Accordion title="closeChatWindow()">
    Closes the chat window:

    ```
    AdamChat.closeChatWindow();
    ```
  </Accordion>
</AccordionGroup>

### Available Options

These values enable you to tailor the widget to your requirements.

<AccordionGroup>
  <Accordion title="clientId">
    `string`

    This is a *mandatory* field. Pass the clientId relating to your community.
  </Accordion>

  <Accordion title="source">
    `string`

    This is a *mandatory* field. Pass one of the following values to identify the channel that the conversations is being held on:

    * **portal** - if the user is accessing Adam via a private/secure portal
    * **website** - if the user is accessing Adam via a public website
  </Accordion>

  <Accordion title="clientInfo">
    `object`

    You can optionally pass a `clientInfo` object to initiate the chat with the user information pre-loaded (e.g. for use in resident portals in logged-in state):

    * **firstName** `string`: user's first name
    * **lastName** `string`: user's last name
    * **phoneNumber** `string`: user's registered phone number
    * **email** `string`: user's registered email address
    * **unit** `string`: apartment number
    * **address** `string`: property address
  </Accordion>

  <Accordion title="colors">
    `object`

    You can optionally pass a `colors` object to tailor the colors used in the widget to your brand:

    * **background** `string`: 6-digit HEX or RGB string
    * **foreground** `string`: 6-digit HEX or RGB string
    * **text** `string`: user's 6-digit HEX or RGB string

    When passing a `colors` object, the icon on the launcher button will change from the Travtus T logo to a message bubble.

    <img src="https://mintcdn.com/travtus-33/BbquytAFybLqihed/images/widget/widget-colors.png?fit=max&auto=format&n=BbquytAFybLqihed&q=85&s=b8dbd967d34608a9fff0189301bd893b" width="474" height="657" data-path="images/widget/widget-colors.png" />
  </Accordion>

  <Accordion title="position">
    `string`

    Sets which corner of the viewport the launcher and chat window appear in on desktop. Defaults to `"BR"` (bottom right).

    Pass one of the following values:

    * **TL** - top left
    * **TR** - top right
    * **BL** - bottom left
    * **BR** - bottom right
  </Accordion>

  <Accordion title="breakpoint">
    `number`

    This is the resolution at which the chat window should switch from full screen (mobile view) to a corner overlay (desktop view). The corner is determined by the `position` option. Defaults to `769` (tablet portrait).

    Mobile view:

    <img src="https://mintcdn.com/travtus-33/BbquytAFybLqihed/images/widget/widget-mobile.png?fit=max&auto=format&n=BbquytAFybLqihed&q=85&s=15b0c6ceaddd590f4d7ab307ef750efb" width="316" height="682" data-path="images/widget/widget-mobile.png" />
  </Accordion>

  <Accordion title="hideLauncherOnMobile">
    `boolean`

    You can choose to hide the launcher button on mobile, and to instead open the chat window programatically using the `openChatWindow()` method. This defaults to `false`.
  </Accordion>

  <Accordion title="hideFooter">
    `boolean`

    Hide the "Powered by Travtus" footer. Defaults to `false`.
  </Accordion>
</AccordionGroup>

Example with all options passed:

```
AdamChat.init('adam-bot', { 
  clientId: "CLIENT_ID", 
  source: "portal", 
  clientInfo: { 
      firstName: "Adam", 
      lastName: "Bot", 
      phoneNumber: "123456789", 
      email: "adam@travtus.com", 
      unit: "unit 3", 
      address: "Summer 5 Rd", 
  },
  colors: {
    background: "#94E087",
    foreground: "#000000",
    text: "#000000",
  },
  position: "BR",
  breakpoint: 641,
  hideLauncherOnMobile: false,
  hideFooter: false,
});
```