# Chat Widget

## Overview

This module allows a user to manage multiple conversation threads with different users. A user can click into one of the threads and send or view messages/attachments.

![Message threads](/files/-Lc2pHpygIwPEzf5BMKW)

![List of messages in a thread](/files/-Lc2pdOS5RA6xhxXV3Xi)

## Structure

* When this module is added to a page, it has a reusable element inside called `chatwidget`. This reusable element contains all of the logic and UI for the module.
* The module comes with two data types:
  *  `t-Thread`  will store the threads between users
  *  `t-Message`  will store the messages and attachments in each thread
* All of the threads are displayed in `RepeatingGroup t-Thread`
* All of the messages are displayed in `RepeatingGroup t-Message`
* `Button SEND` sends a new message and `Button SEND ATTACHMENT` in  `Popup Upload` sends an attachment

## How to set up

* Open the `chatwidget` reusable

![](/files/-Lc2voopCQmGdwuBaSRI)

* Open `Popup Hidden Variables`. This popup contains three group variables that are used in the chat widget. For more information on how to use `Popup Hidden Variables`, [click here](https://docs.airdev.co/canvas/general-information/functionality/hidden-variables-popup).
  * `var - Website object` stores the app's website object. It is used in `Button Search for t-Message` to pull the website's primary color.
  * `var - chat thread` stores the thread that the user is viewing. 
  * `var - user viewing chat` stores the user information (current user who is viewing the thread and messages). 

![](/files/-Lc2w2wz97IZKA9L5EL4)

* \[OPTIONAL] Modify the data source of `var - user viewing chat` to include any filters you need for the user that is viewing the thread

![](/files/-Lc2yutaZcNxGjLHk8R0)

## Messenger styles

This chat widget comes with two messenger styles:

* iMessage Style

![Apple iMessage messenger style](/files/-Lc31VDXQIBnUTLcwOO8)

* Slack Style

![Slack messenger style](/files/-Lc31uB28qrzhw26agTH)

By default, the chat widget uses the iMessage style. You can switch to a different style by opening the `chatwidget` reusable element, hiding `Group M-iMessage`, and showing `Group M-Slack`


---

# 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.airdev.co/canvas-pages-and-modules/master-1/modules/chat-widget.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.