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

List of messages in a thread

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

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

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

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

Messenger styles

This chat widget comes with two messenger styles:

• iMessage Style

Apple iMessage messenger style

• Slack Style

Slack messenger style

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