> For the complete documentation index, see [llms.txt](https://docs.airdev.co/canvas-pages-and-modules/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airdev.co/canvas-pages-and-modules/master-1/modules/chat-widget.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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.