Link to the plugin page:
Demo to preview the plugin:
Introduction
The Collaboration, Screensharing & Chat plugin enables real-time collaboration in your Bubble app. Users can share unique session links to work together on the same page while chatting in real-time. However, the plugin does not support reusable elements.
See Key Features
Note: When multiple users open the same collaboration link, they will see and interact with the same page while chatting in real time. However, this plugin does not support reusable elements.
Prerequisite
- Bubble Account: An active Bubble.io account is required to install and use the plugin.
- Plugin Installation: The plugin can be installed directly from the Zeroqode Plugin Store or from the Plugins section of your Bubble Editor.
How to setup
Step 1: Installation
Step 2: Add the Togetherjs Collaboration
Plugin Element Properties
TogetherJS Collaboration
Fields:
Title | Description | Type |
Name | User's name | Text |
Avatar | User's avatar image | Image |
Color | User's color for identification | Color |
Don’t Show Clicks | Hide click indicators from other users | Checkbox (yes/no) |
Clone Clicks | Echo clicks to specific elements across clients | Checkbox (yes/no) |
Synchronize YouTube | Syncs YouTube videos across users | Checkbox (yes/no) |
Suppress Join Confirmation | Hides the "Join TogetherJS Session?" confirmation dialog | Checkbox (yes/no) |
Suppress Invite | Prevents the "Invite a friend" window from appearing | Checkbox (yes/no) |
Disable WebRTC | Disables WebRTC-based mic/chat | Checkbox (yes/no) |
Ignore Forms | Prevents form field synchronization | Checkbox (yes/no) |
Hide Chat | Hides or shows the chat window | Checkbox (yes/no) |
Element Actions
- Start Session: Start a new collaboration session.
- Stop Session: Ends the running collaboration session.
- Get Share Link: Generates and refreshes the session’s shareable link.
Exposed states
Title | Description | Type |
Name | Returns the user’s name. | Text |
Avatar | Returns the user’s avatar. | Image |
Color | Returns the user’s assigned color. | Text |
Collaboration Link | Returns the unique collaboration link. | Text |
