> 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`