This block 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.
When this block is added to a page, it is placed within a group called Blocks container 860 (do not rename) on the page. This group contains the responsive settings for all blocks.
new_bottomchatwidget This reusable element contains all of the logic and UI for threads and messages. It contains three main groups:
Group Main threads list_thread This group contains the list of threads that the current user is a part of. All of the threads are displayed in RepeatingGroup t-Thread. Clicking on Group Main select thread_thread will hide Group Main threads list_thread and show the messages for the selected thread.
Group Main message_thread This group displays all messages between users in a thread (in RepeatingGroup t-Message). You have two versions of message formats to choose from:
iMessage format This is the default message format. To hide this style, select Group Collapsible iMsg_message and uncheck the box for This element is visible on page load.
Slack format To use this style, hide Group Collapsible iMsg_message and show Group Collapsible Slack_message by checking the box for This element is visible on page load.
Clicking on Group Inner Back to threads will navigate back to the list of threads. The user can enter a message in MultilineInput message and attach a file by clicking on the file clip icon. When an attachment is added, it will show underneath the message input. Clicking on it will open the attachment in a new tab for previewing. Clicking on Group Inner delete file will delete the attachment and allow you upload a new attachment.
Popup Hidden Variables This popup includes various variables that are referenced in workflows or conditionals on the page.
var - Website object - This group stores the
website object (e.g., app name, primary color, and etc.)
var - chat thread - This group stores the
thread that the user is currently viewing.
var - user viewing chat - This group stores the
user information (current user who is viewing the thread and messages).
var - attached msg file - This group temporarily stores a
file that the current user attaches to a message (this group will be reset when the message is sent).
For more information on how to use hidden variables, click here.
In Popup Hidden Variables, update var - user viewing chat's data source to include any filters for the user who is viewing the chart
You would also want to change the data source for this group here to
Current user (Do a search for users:first item is a placeholder for demo purposes).
Select a message format by showing Group Collapsible iMsg_message or Group Collapsible Slack_message. Hide the format that you are not using.
[Optional] Change the iMessage format colors. You can do this by locating the HTML message styles in the reusable element and updating the hex color codes. From-me styles will apply to all messages sent by you (current user). From-them styles will apply to all messages sent by the other user(s).
On the page that you have your chat widget instance, set up a workflow to create a new thread and add the user(s) to the thread.
For example, you might add a Message user button to the page and include the following workflows:
The new_bottomchatwidget instance has a data type of type
t-Thread. To display all of the current user's threads that he or she is a part of, do not set a thread data source. However, if you want to display only one thread for a user (i.e, hiding the threads list view and only showing the thread conversation view, then you should pass a thread to the reusable instance).