Chat
A Chat page allows real-time messaging and conversation features within the app, supporting text, emojis, images, and attachments.
Page
This configuration defines a page’s core behavior: it sets type, name, color, and cover, controls navigation with routes, next page, and timeout, marks if it’s the final step, manages display options like fullscreen, landscape, and screenshots, and specifies layout and text direction.
| Field | Type | Default Value | Description |
|---|---|---|---|
| @Type | PageType | "Chat" | Specifies the page type as a chat page |
| Name | PageName | {name} | Name or title of the page |
| Color | Color | {color} | Background color of the page |
| Cover | URL | {cover} | Optional cover image for the page |
| Routes | Array |
[] | List of route scripts or actions associated with the page |
| NextPage | Page | 0 | ID of the next page to navigate to |
| Timeout | Number | 0 | Duration in seconds before automatic navigation |
| Finish | Boolean | false | Indicates if this page marks the end of a sequence |
| FullScreen | Boolean | false | Determines if the page should be displayed in full screen mode |
| CanLandScape | Boolean | false | Allows landscape orientation if true |
| CanScreenShot | Boolean | false | Allows users to take screenshots if true |
| Dir | Direction | {dir} | Layout direction (e.g., "ltr" or "rtl") |
| Dir.Text | TextDirection | {dir} | Text direction for content on the page |
Title
This configuration manages the page title bar: it can show or hide the bar, set its background color, define the title text with size, color, and style, link a menu page, and assign icons for the back and menu buttons.
| Field | Type | Default Value | Description |
|---|---|---|---|
| Title.Color | Color | {titleColor} | Background color of the title bar |
| Title.Text | String | {titleText} | Title text displayed at the top |
| Title.Text.Size | Number | 16 | Font size of the title text |
| Title.Text.Color | Color | {titleTextColor} | Text color of the title |
| Title.Text.Style | TextStyle | {titleTextStyle} | Font style (bold, italic, etc.) |
| Title.Back.Logo | Logo | {backLogo} | Icon used for the back button |
Chat
This configuration defines the chat user identity settings. It includes the Chat.Email field for the user’s associated email address, Chat.Name for the display name shown in conversations, and Chat.Profile for the profile picture or avatar URL. Together, these fields establish the user’s identity and presence within the chat interface.
| Field Name | Type | Default Value | Description |
|---|---|---|---|
| Chat.Email | {email} | Email address associated with the chat user. | |
| Chat.Name | String | {chatName} | Display name for the chat user. |
| Chat.Profile | URL | {chatProfile} | Profile picture or avatar URL for the chat user. |
Chat Style
This configuration defines the Chat interface appearance and controls. It allows customization of the input bar color, the main background, and the title text color, along with the default text color for messages. It also specifies icons for key actions such as sending messages, emoji selection (including hover state), media sharing, closing the chat, editing, replying, and pinning messages. These settings ensure the chat environment is both visually consistent and functionally intuitive.
| Field Name | Type | Default Value | Description |
|---|---|---|---|
| Chat.Bar.Color | Color | {barColor} | Color of the chat input bar. |
| Chat.Color | Color | {color} | Main background color of the chat interface. |
| Chat.Title.Color | Color | {titleColor} | Color of the chat title text. |
| Chat.Text.Color | Color | {textColor} | Default text color for messages. |
| Chat.Send.Logo | Logo | {sendLogo} | Icon for the send button. |
| Chat.Emoji.Logo | Logo | {emojiLogo} | Icon for opening emoji selection. |
| Chat.Emoji.Logo.Hover | Logo | {emojiLogoHover} | Hover state icon for emoji button. |
| Chat.Media.Logo | Logo | {mediaLogo} | Icon for sending media files. |
| Chat.Close.Logo | Logo | {closeLogo} | Icon for closing the chat interface. |
| Chat.Edit.Logo | Logo | {editLogo} | Icon for editing messages. |
| Chat.Reply.Logo | Logo | {replyLogo} | Icon for replying to messages. |
| Chat.Pin.Logo | Logo | {pinLogo} | Icon for pinning messages. |
Chat Card
This configuration defines the Chat page styling and behavior. It allows customization of chat bubble radius, background colors for both user and participant messages (including replies), and text colors for each side of the conversation. It also supports seen status icons with hover states, plus control over the font size of chat text. Altogether, these settings ensure a consistent, personalized, and visually clear chat experience.
| Field Name | Type | Default Value | Description |
|---|---|---|---|
| Chat.Radius | Number | 12 | Corner radius of chat bubbles. |
| Chat.Me.Color | Color | {meColor} | Background color for user’s own messages. |
| Chat.Than.Color | Color | {thanColor} | Background color for other participant’s messages. |
| Chat.Me.Reply.Color | Color | {meReplyColor} | Background color for user’s reply messages. |
| Chat.Than.Reply.Color | Color | {thanReplyColor} | Background color for other participant’s reply messages. |
| Chat.Me.Text.Color | Color | {meTextColor} | Text color for user messages. |
| Chat.Than.Text.Color | Color | {thanTextColor} | Text color for other participant messages. |
| Chat.Seen.Logo | Logo | {seenLogo} | Icon indicating message seen status. |
| Chat.Seen.Logo.Hover | Logo | {seenLogoHover} | Hover state icon for seen indicator. |
| Chat.Text.Size | Number | 12 | Font size of the chat message text. |
🔗 Additional Resources
To learn how to build this same page using JSON coding, visit:
Develop the Chat Page with JSON