Demo to preview the plugin:
Introduction
The Chat Messaging Lite plugin allows you to create dynamic chat bubbles within your Bubble app, enhancing the messaging experience. You can customize the appearance, alignment, and behavior of the chat bubbles, providing a responsive and visually appealing chat interface for users.
🔔 For more advanced chat functionality check out our Air Chat & Messaging Pro plugin which is more advanced than this free plugin and comes with a host of powerful features:
Usage Features:
- Adjust the background color, border radius, and alignment (left or right) to match your app's style.
- Supports custom fonts, font sizes, colors, and text formatting options for chat content.
- Easily display dynamic text from your database or workflows, making each chat bubble interactive and personalized.
- Control the size and position of chat bubbles within the layout, ensuring they fit any screen size or design.
- Drag and drop the Chat Bubble element onto your page, set up the necessary dynamic fields, and start using it instantly.
👛 Please support our efforts to keep this plugin free—your donations help us invest the time and resources needed to continue maintaining and improving it for everyone’s benefit: https://zeroqo.de/support.
How to setup
- Add the Chat Bubble element to the page
- Go to the Design tab in the Bubble editor.
- Search for Chat Bubble.
- Drag the element onto the place on your page where you want the chat message to appear.
- Set the message text
- Select the Chat Bubble element on the page.
- In the text field, enter the message you want to display in the bubble, or use dynamic data.
Plugin Element Properties
Chat Bubble
Fields:
Title | Description | Type |
Text | The message content that will appear inside the chat bubble. You can enter static text or bind dynamic data. | Text |
BackgroundColor | The background color of the chat bubble. This allows you to visually distinguish different senders or match your app’s design. | Color |
Boarder Radius | Controls how rounded the corners of the chat bubble appear. Enter a value in pixels (e.g. “8”) for more or less curve. | Text |
Bubble Alignment | Defines whether the chat bubble aligns to the left or right side of the container. Useful for differentiating sent and received messages. Available options: left, right. | Dropdown |
