> 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](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-Lc2o_oOjfUcnjUxrX_V%2F-Lc2pHpygIwPEzf5BMKW%2FScreen%20Shot%202019-04-09%20at%201.40.25%20PM.png?alt=media\&token=eb4d4d0d-479a-49c5-ac57-cd07a3e46190)

![List of messages in a thread](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-Lc2o_oOjfUcnjUxrX_V%2F-Lc2pdOS5RA6xhxXV3Xi%2FScreen%20Shot%202019-04-09%20at%201.42.15%20PM.png?alt=media\&token=719c9548-5500-4a11-87b6-c3766c2e1736)

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

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-Lc2o_oOjfUcnjUxrX_V%2F-Lc2voopCQmGdwuBaSRI%2FScreen%20Shot%202019-04-09%20at%202.09.11%20PM.png?alt=media\&token=1ac16d9b-bee7-4c64-873a-94dc0e8fc64f)

* 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). 

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-Lc2o_oOjfUcnjUxrX_V%2F-Lc2w2wz97IZKA9L5EL4%2FScreen%20Shot%202019-04-09%20at%202.10.22%20PM.png?alt=media\&token=f2162ccc-a8c4-4e50-9256-8c7d90de3ecd)

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

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-Lc2o_oOjfUcnjUxrX_V%2F-Lc2yutaZcNxGjLHk8R0%2FScreen%20Shot%202019-04-09%20at%202.21.54%20PM.png?alt=media\&token=09059b5f-9d67-4777-aab8-59f9e0f169ab)

## Messenger styles

This chat widget comes with two messenger styles:

* iMessage Style

![Apple iMessage messenger style](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-Lc2o_oOjfUcnjUxrX_V%2F-Lc31VDXQIBnUTLcwOO8%2FScreen%20Shot%202019-04-09%20at%202.38.21%20PM.png?alt=media\&token=5d960e4f-4c02-42aa-beb7-b3ef537e5d43)

* Slack Style

![Slack messenger style](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-Lc2o_oOjfUcnjUxrX_V%2F-Lc31uB28qrzhw26agTH%2FScreen%20Shot%202019-04-09%20at%202.40.10%20PM.png?alt=media\&token=2f8d75a8-20d5-4ac9-89eb-65a0eeeab291)

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`