This block allows a user to manage multiple conversation threads with different users. A user can click into one of the threads and view all messages and attachments within that thread.
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_chatwidget 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:
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.
- 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.
- Popup Hidden Variables This popup includes various variables that are referenced in workflows or conditionals on the page.
For more information on how to use hidden variables, click here.
- var - Website object - This group stores the
website object(e.g., app name, primary color, and etc.)
- var - chat thread - This group stores the
threadthat the user is currently viewing.
- var - user viewing chat - This group stores the
userinformation (current user who is viewing the thread and messages).
- var - attached msg file - This group temporarily stores a
filethat the current user attaches to a message (this group will be reset when the message is sent).
- [Optional] Update var - user viewing chat's data source to include any filters for the user who is viewing the chart
- 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:
Create a new thread
Add the users to the thread. The second user is for demo purposes and should be whoever the user is messaging.
- The new_chatwidget 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).