Canvas Documentation
Bubble Best Practices
v6.0
v6.0
  • Introduction
  • Key Features
  • What's New
  • Canvas Design System Figma File
  • CANVAS FUNCTIONALITY
    • Getting Started
    • Branding & Design
    • Marketing Pages
    • Page
    • Bubble Pages & Blocks
    • Roles & Permissions
    • Menus & Navigation
    • Data & Workflows
    • Emails & Alerts
      • Mail merge terms
    • Miscellaneous
      • Setting up two factor authentication
      • Cookie and consent banner
      • Setting your password policy
      • Set up Payment info on Account page
      • Loading screen
      • Configuring multiple languages
      • Customizing your app's portal page colors
    • Reference
      • Pages
        • Index
        • Product homepage
        • Marketplace homepage
        • SaaS homepage
        • About us
        • Pricing
        • Admin Portal
        • Account
          • Account deletion
        • Login
        • Legal
        • Reset Password
        • 404
      • Reusable elements
        • Header
        • Footer
        • Signup & Log in
        • Cookies Permission
        • Widgets
          • App security
          • Header Widgets
          • Workflow Widgets
        • Admin Portal
          • Admin analytics
          • Admin email & templates
          • Admin header & footer
          • Admin legal popups
          • Admin branding, setup checklist, and settings
          • Admin options app variables
        • Menu Focus Elements
        • Sidebar tab
      • Data types
      • Option Sets
      • Backend Workflows
      • Design standards
        • Manually Building UI
  • Canvas library
    • Updating asset RG data source
    • UI Patterns
      • Simple Dashboard Page
      • Product Marketplace Dashboard Page
      • Labor Marketplace Profile Page
      • Social Network Profile Page
      • Simple Events Search Page
      • Events Search Page
      • Ecommerce Search Page
      • Labor Marketplace Search Page
    • Page templates
      • Basic Bubble Marketing Page
      • Chat Messenger Page
      • Form Builder Page
      • Centered Profile Page
      • Left-Justified Profile Page
      • Standard page
      • Toggle Tabs Page
      • Menu Page
      • Mobile Menu Page
      • Video List Page
      • Horizontal Tabs Portal / Dashboard Page
      • Standard Portal / Dashboard Page
      • Simple Portal / Dashboard Page with Icons
      • Double Sidebar Portal Page Template
      • Search Page
      • Map Search Page with Toggle and Filters
      • Floating Map Search Page
      • Search Bar Page
      • Multi-Step Page With Progress Bar
      • Standard Multi-Step Process Page
      • Multi-Step Process Page with Sidebar
      • Gallery Profile or Product Page
      • Sidebar Profile Page with Tabs
      • 2-Column Menu Tabs Page
      • 2-Column Checkout Page
      • 2-Column Video Chat Page
      • Vertical Multi-Step Page Template
    • Blocks
      • Pagination
      • Monthly Calendar Scheduling Widget
      • No Reply Comments Thread
      • Nested Comments Thread (with Like and Reply)
      • Placeholder Group
      • List with Circular Progress Bar Repeating Group
      • Top Input Chat Widget
      • Bottom Input Chat Widget
      • Toggle Tabs Group
      • Single-Select or Multi-Select Pill Tabs Group
      • Settings Group
      • Order Confirmation Group
      • To-Do List Repeating Group
      • Title Group with Button and Filters
      • Product Details Group With Progress Bar
      • Listing details with Icons and Menu Focus Group
      • Week Daily Availability Group
      • Frequently Asked Questions (FAQ) Repeating Group
      • Dismissible Module
      • Video Group
      • About Group
      • Add to Cart Group
      • Full Width Map with Directions Link
      • Location Module (Map and Directions)
      • Drag and Drop Repeating Group
      • Infinite Columns Horizontal Scroll Data Table with Fixed First Column (Repeating Group)
      • Nested Data Table (Repeating Group)
      • Standard Data Table (Repeating Group)
      • Standard Data Table (Table Element)
      • Mobile-Friendly Data Table (Repeating Group)
      • Mobile-Friendly Data Table (Table Element)
      • Infinite Columns Horizontal Scroll Data Table (Repeating Group)
      • Infinite Columns Horizontal Scroll Data Table (Table Element)
      • Activity Feed
      • Social Feed
      • Nested Repeating Group
      • Advanced Form Inputs Group
      • Reviews with Ratings Summary and Images
      • Reviews Repeating Group with User Images
      • Reviews (Text Only) Repeating Group
      • Standard Repeating Group with Image
      • Search Bar Group
      • Listing Details Group
      • Post Group with Upvoting UI
      • Large Chart Dashboard Widget
      • Chart With Key Metrics Dashboard Widget
      • 2-Column Table and Key Metrics Dashboard Widgets
      • 2-Column Large Metrics Dashboard Widgets
      • 4-Column Large Metrics Dashboard Widgets
      • Main Image with Thumbnails
      • Centered Profile Block
      • Left-justified Profile Block
      • Tile Image Gallery and Popup
      • Image Feed with Nested Comments Thread
      • 1-Column Standard Form Inputs Group
      • 2-Column Slideshow Tiles Repeating Group
      • 2-Column Repeating Group (Text, Link, Image, and Description)
      • 2-Column Repeating Group (Link, Text, and Button)
      • 2-Column Repeating Group with Actions
      • 2-Column Grid Tiles Repeating Group
      • 2-Column Form Group
      • 4-Column Tiles Repeating Group
      • Expiration timer
    • Popups
      • Edit Drawer
      • Map Location Details Drawer
      • Details and Comments Drawer
      • Confirmation Popup
      • Message Popup
      • Image Popup
      • Video Popup
      • Vertical Scroll Popup
      • Permissions popup
      • Multimedia Slideshow 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
      • View Profile Popup
      • Send Message Popup
      • Multi-Select Pill Tabs Popup
      • Net Promoter Score (NPS) Popup
      • Pricing Plans Popup
    • Reusables
      • Multimage uploader
      • Sidebar_icontab
      • Doublesidebar_tab
Powered by GitBook
On this page
  • Overview
  • Structure
  • How to set up
  • Customizing the message format
  • [Optional] Enable functionality to send multiple attachments

Was this helpful?

  1. Canvas library
  2. Page templates

Chat Messenger Page

Use this for all social chat messengers to display a list of threads and messages

PreviousBasic Bubble Marketing PageNextForm Builder Page

Was this helpful?

Overview

This page 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.

Structure

When this page is added to your app, it will come with two main groups:

Group Main left threads panel The top portion of this panel includes a search input where a user can search for keywords in all thread messages. Clicking on Group Open thread actions (action) will open a focus group with the option to view all archived threads. Clicking on Group Create new thread (action) will start a new thread, allowing the user to invite other users to the thread and send a message or attachment.

The bottom portion of the panel includes two repeating groups: RepeatingGroup threads for displaying all threads that the user is a part of and RepeatingGroup messages (search) for displaying thread messages that contain the searched keyword(s). To display vague timestamps for the messages, we use the free plugin Relative Time with Moment.js by Louis Adekoya.

Group Main message_thread This group displays all messages between users in a thread in RepeatingGroup thread messages.

  • Group Inner chat options_thread includes a few actions:

    • Multidropdown invite user to chat to invite users to a new thread

    • Group Edit thread (action) that will open a focus group with the option to archive or delete the thread

    • On mobile, a "<" chevron to return to the list of threads view

  • Group Main Messages container contains RepeatingGroup thread messages. You have two message formats to choose from:

    • iMessage format (default) To hide this message format, select Group Main iMessage style, go to the Layout tab and uncheck the box for This element is visible on page load.

    • Slack format To show this message format, select Group Main slack style, go to the Layout tab and check the box for This element is visible on page load.

    • Group Main message input includes the UI to compose a message, attach a file, and view file attachments. 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 - ⚙️ app settings - This group stores the App settings (e.g., app name, primary color, and etc.)

    • var - dummy variable - This is a placeholder group for users to add their own variable.

    • var - ⚙️ current page width <1100? - This group evaluates when the viewport view is less than 1100. It controls the display settings for when to show the tablet and mobile layout of the chat messenger.

    • var - ⚙️ start new thread? - This controls the visibility rule of Group Inner new thread to indicate a new thread is being created by the user.

    • var - ⚙️ current 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). There is a temporary conditional statement that you will need to remove as part of the page setup.

    • var - ⚙️ view archived chats? - This group controls the visibility rule for displaying the archived chats UI.

    • var - ⚙️ chat thread exists between users - This group checks for existing threads between the users. When the Current User is starting a new thread and inviting other users to the thread, if a thread between the users already exists then pressing the send button will send the message to the existing thread between the users. If a thread between the users doesn't already exist then it will compose a new thread.

    • var - ⚙️ users list to check in thread - This group stores the list of users when composing a new thread (referenced in var - ⚙️ chat thread exists between users).

    For more information on how to use hidden variables, click .

How to set up

Customizing the message format

  • In Popup Hidden Variables, 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 Main iMessage style or Group Main slack style. Hide the format that you are not using.

[Optional] Enable functionality to send multiple attachments

  • By default, users can attach multiple attachments when composing a message. However, the workflows are currently set up to only send the first attachment in the attachments list (RepeatingGroup file). To send multiple attachments when you click Group Main send msg button_thread (action), it would be best to use an API workflow. Your Bubble app would need to be on a paid Bubble plan to use API workflows.

The updated API workflow for sending multiple attachments should look similar to this:

You would want to keep the data source for this group here to Current user and remove the conditional statement (Do a search for users:first item is a placeholder for demo purposes).

here
List of attachments
This custom workflow sends the first attachment in RepeatingGroup file
This workflow step should be replaced by an API workflow to send multiple attachments
API workflow setup
First workflow step
Second workflow step
Updated workflow step on send message custom workflow