Canvas Pages and Modules
2.0.0
2.0.0
  • Welcome
  • PAGES
    • Free Bubble Marketing Page
    • Premium Bubble Marketing Page
    • Centered Profile Page
    • Left-justified Profile Page
    • Standard Page
    • Toggle Tabs Page
    • Menu Page
    • Mobile Menu Page
    • Video List Page
    • Portal/Dashboard Page
    • Portal / Dashboard Page with Icons
    • Simple Portal / Dashboard Page with Icons
    • Search Page
    • Map Page with Search Bar, Toggle, and Filters
    • Search Bar Page
    • Listing Profile Page
    • Multi-Step Page (Progress Bar)
    • 1-Column Multi-Step Process Page
    • 2-Column Multi-Step Process Page
    • 2-Column Profile Page
    • 2-Column Profile Tabs Page
    • 2-Column Menu Tabs Page
    • 2-Column Checkout Page
    • 2-Column Product Checkout Page
    • 2-Column Video Chat Page
  • BLOCKS
    • Comments Thread
    • Nested Comments Thread (with Like and Reply)
    • Chat Widget
    • Bottom Input Chat Widget
    • Toggle Tabs Group
    • To-do List
    • Title Group with Button and Filters
    • Listing Details with Tags, Button, and Progress Bar
    • Listing details with icons and menu focus group
    • Week Daily Availability
    • Shopping Cart
    • FAQ Group
    • Shipping Details
    • Payment Methods
    • Order Confirmation
    • Dismissible Module
    • Placeholder group
    • Video Group
    • About Group
    • Add to Cart Group
    • Full Width Map with Directions Link
    • Location Module (Map and Directions)
    • Drag and Drop Repeating Group
    • Advanced Form Inputs Group
    • Reviews Repeating Group with Image
    • Reviews (Text Only) Repeating Group
    • Nested Repeating Group
    • Standard Repeating Group with Image
    • Single Input Search Bar and Filter Group
    • Listing Details Group
    • Post Group with Upvoting UI
    • Dashboard Chart Widget
    • Main Image with Thumbnails
    • Centered Profile Module
    • Left-justified Profile Module
    • 1-Column Standard Form Inputs Group
    • 1-Column Instagram Tiles Group with Nested Comments
    • 1-Column Link, Text, and Menu Focus Repeating Group
    • 2-Column Repeating Group (Text, Link, Image, and Description)
    • 2 Column Repeating Group (Link, Text, and Button)
    • 2-Column Tiles Repeating Group
    • 2-Column Simple Form Inputs Group
    • 2-Column Sortable List (Image, Link, Star Rating, and Text) Repeating Group
    • 2-Column Dashboard Widgets
    • 3-Column Dashboard Widgets
    • 3-Column Repeating Group (Text, Link, Image, and Description)
    • 3-Column Text and Link Repeating Group
    • 3-Column Icons with Labels Repeating Group
    • 3-Column Tiles Repeating Group
    • 3-Column Tiles with Buttons Repeating Group
    • 3-Column Horizontal Scroll Repeating Group
    • 4-Column Tiles Repeating Group
    • 5-Column Date Table with Cell Selection, Menu Focus Group, and Filters
    • Mobile-Friendly Data Table with Cell Selection, Menu Focus Group and Filters
    • Standard Horizontal Scroll Data Table
    • Infinite Columns Horizontal Scroll Data Table
    • Infinite Columns Horizontal Scroll Data Table with Fixed First Column
  • Popups
    • Confirmation Popup
    • Message Popup
    • Image Popup
    • Video Popup
    • Vertical Scroll Popup
    • Edit Popup
    • Standard Form Popup
    • Subscribe Popup
    • Feedback / Contact Popup
    • Details Popup
    • Add List Popup
    • Advanced Form Popup
    • Rating Popup
    • Toggle Tabs Popup
    • Share Popup
    • Multi-Step Popup
    • Invoice Popup
    • Stripe Credit Card Purchase Popup
  • Reusables
    • applyfilters
    • menufocusgroup or Menu options (︙)
Powered by GitBook
On this page
  • Overview
  • Structure
  • How to set up

Was this helpful?

  1. BLOCKS

Chat Widget

PreviousNested Comments Thread (with Like and Reply)NextBottom Input Chat Widget

Last updated 4 years ago

Was this helpful?

Overview

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.

Structure

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:

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

How to set up

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

Make sure you save the original code before you change the hex color codes in HTML message styles. Sometimes it takes a few page loads to see the html updates on the page. You can preview the updated html styles by doing a hard refresh in the chrome browser (Command + Shift+ R).

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

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