Demo to preview the plugin:
Introduction
The plugin allows you to easily integrate your message experience into your app. It comes with various style settings and message options. No more complex bubble functionality with the repeating groups, inputs, and buttons.
Only one element with all the required message and style settings. It supports duo-chat as well as group-chat and even has a context menu.
Tutorial
How to setup
- Place "Chat" element on the page and complete all fields.
- Create two new datatypes in the Database: Messages, Chats.
- Configure Messages fields:
- Images list - list of images
- Replies Name - text
- Replies Text - text
- Sent time - date
- Text(message) - text
- User ID - text
- User image - image
- User nickname - text
- Configure Chat fields:
- Chat title - name of the chat
- List of messages - List of messages database things
- Configure the element following the picture below:
- Message Type: chose the Message we create in the previous step.
- Message Source: Search for chats, chose first chat’s list of messages
- Fill in the rest fields according to their titles.
- Configure workflow to save and show the messages:
- Create new workflow —> event “Message sent”
- Add first action: “Create a new thing…”:
- Add second action: “Make changes to things”:
Set type as “messages”, fill in all fields.
For “Thing to change” find the current chat, add field “list of messages” choose “add”, then chose result from previous step.
- Run the page with user:
- Plugin is ready, configure rest styles setting.
Plugin Element: "Chat"
Fields
Main Settings
Title | Description | Type |
Messages Type | Bubble App Type representing messages | App Type |
Message Source | List of messages to show in chat | List Of Message Type |
Message Text | Field of Messages Type representing message text | Field of Message Type ( Text ) |
User Image | Field of Messages Type representing sender image | Field of Message Type ( Image ) |
Message Send Time | Field of Messages Type representing message send time | Field of Message Type ( Date ) |
Images In Message | Field of Messages Type representing list of images attached to message | Field of Message Type ( List of Images) |
User ID | Field of Messages Type representing sender unique id | Field of Message Type ( Text ) |
User Name | Field of Messages Type representing username | Field of Message Type ( Text ) |
Replies | Field of Messages Type representing replies text. | Filed of Message Type, represent Text |
Replies From | Field of Messages Type representing username of the replies. | Filed of Message Type, represent Text |
Show from the first | Display messages from the end | Yes or No |
Theme | Available options: Light, Dark | Dropdown |
Input Styling Settings
Input Height | Height of input and buttons in bottom bar | Number |
Input Font Size | Font size of text in input | Number |
Input Font Color | Font color of text in input | Color |
Input Horizontal Padding | Horizontal padding of the input | Number |
Input Vertical Padding | Vertical padding of the input | Number |
Input Border Style | Available options: none, solid | Dropdown |
Input Border Color | Border Color of the input | Color |
Input Border Width | Border Width of the input | Number |
Input Border Radius | Border Radius of the input | Number |
Input Background Color | Background Color of the input | Color |
Placeholder | Placeholder of the input | Text |
Send Button Image | Send Button Image of the input | Image |
Send Button Image Size | Send Button Image Size in px | Number |
Emoji Icon | Image for the Emoji Icon | Image |
Emoji Icon Size (px) | Size of the Emoji Icon | Number |
Uploader Image | Image for the Uploader | Image |
Uploader Image Size | Uploader Image Size in px. if size == 0, button is invisible | Number |
Bottom Bar Settings
Choose positions of the element in the bottom bar, the first element will be on the left side, the last element will be on the right side
Input Order | Available options: 1, 2, 3, 4 | Dropdown |
Uploader Order | Available options: 1, 2, 3, 4 | Dropdown |
Emoji Order | Available options: 1, 2, 3, 4 | Dropdown |
Send Order | Available options: 1, 2, 3, 4 | Dropdown |
Bottom Bar Height | Height of the Bottom bar | Number |
Bottom Bar Color | Color of the Bottom bar | Color |
Bottom Bar Border Radius | Adds rounding for a block Bottom Bar | Number |
Bottom Bar Horizontal Paddings | Horizontal Paddings of the Bottom Bar | Number |
Bottom Bar Preview Border-Radius Top | Bottom Bar Preview Border-Radius Top. Adds top rounding for a block with loaded images | Number |
Bottom Bar’s Bottom Padding | Padding from the bottom | Number |
Replies | TODO: Fill in description | Filed of Message Type, represent Text, image or file |
Replies From | TODO: Fill in description | Filed of Message Type, represent Text, image or file |
Bottom Bar Uploaded Files | ||
Uploaded Files Border Radius | Radius in px. | Number |
Time Style Settings
Msg Show Time | Display time when message is sent in right-bottom corner | Checkbox (yes/no) |
Msg Time Color | Color of time | Color |
Msg Time Font Size | Font size of time | Number |
Msg Time Format | Format of time, Available options: 16:00, 16:00:00, 4:00 PM, 4:00:00 PM, To Now | Text |
Time padding top | Top padding of message time in px | Number |
Time padding bottom | Bottom padding of message time in px | Number |
Time padding right | Right padding of message time in px | Number |
Time padding left | Left padding of message time in px | Number |
Time’s Position | The position of time relative to the text Available options: left, right, center | Dropdown |
Name Style Settings
Show creators name | Show creators name for duo chat | Checkbox (yes/no) |
Name Color | Color of the user’s name | Color |
Name Bold | Bold when Yes | Checkbox (yes/no) |
Name vertical paddings | Top and bottom padding of username in PX | Number |
Image Style Settings
Image Width And Height | Users image size in px. | Number |
Image Border Radius | Users border radius in px. | Number |
Messages Style Settings
Others Msg Bg Color | Background color of the others’ messages | Color |
Others Msg Text Color | Text color of the others’ messages | Color (optional) |
User Msg Bg Color | Background color of message sent by current user | Color |
User Msg Text Color |
Text color of message sent by current user. | Color |
Msg Border Radius | Border radius of the message | Number |
Msg Border Style | Available options: none, solid | Dropdown |
Msg Border Width | Border width of the message | Number |
Others Msg Border Color | Border color of messages that do not belong to the current user. | Color |
User Msg Border Color | Border color of messages that belong to the current user. | Color |
Msg Horizontal Padding | Horizontal Padding of the messages. | Number |
Msg padding top | Padding top of message in px | Number |
Msg text line-height | Line-height of the text in messages. | Number |
Msg Text Word Spacing | Word Spacing of the text in messages. | Number |
Msg text padding top | Padding top of message text in px. | Number |
Common Styling
Enable interlocutors’ Images | Enable interlocutors Images | Checkbox (yes/no) |
Enable Sender’s Image | Show or hide sender’s messages | Checkbox (yes/no) |
Hide Scroll Bar | When checked, the scroll bar is hidden in the messages section. | Checkbox (yes/no) |
Context Menu Styling
Ctx Menu Background Color | Context Menu Background Color. | Color |
Ctx Menu Border Color | Context Menu Border Color. | Color |
Ctx Menu Border Width | Context Menu Border Width. | Number (optional) |
Ctx Menu Border Radius | Context Menu Border Radius. | Number (optional) |
Ctx Menu Font Color | Context Menu Font Color. | Color |
Ctx Menu Text color (hover) | Context Menu Text color on hover. | Color |
Ctx Menu Background color (hover) | Context Menu Background color on hover | Color |
Emoji Bar Settings
Emoji Bar Border Width | Width of the Emoji Bar in px. | Number |
Emoji Bar Border Color | Color of the Emoji Bar. | Color |
Actions
- Delete message view
Title | Description |
Message ID | Id of a message to remove it from chat ( message is not deleting from the base ) |
- Login new user - refresh current user in the chat.
- Refresh chat
- Download - download image
Title | Description | Type |
Download URL | URL to image from state “Image URLs” | Text |
Events
Event name | Triggered when |
Message sent | This event is triggered when the current user send a message |
Delete Message | This event is triggered then-current user select "Delete message" in the context menu |
Edit Message | This event is triggered then-current user selects "Edit message" in the context menu |
Chat initialized | This event is triggered once right after the chat is initialized |
Image Clicked | This event is triggered an image is clicked |
Exposed states
State Title | State Value |
The last message sent | Return text of last sent message |
The last Sent Files | Return the List Of Images sent by the current user in the last message |
Context Menu Target | Return the unique id of the message selected as the target of the context menu |
Image URLs | Return a list of clicked image’s URL |
Reply Text | Return text of last reply. |
Reply Name | Return name of the last reply. |
Current Theme | Return the current theme |
