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.

Coding:

{
  "@Type": "Chat",

  "Name": "{name}",
  "Color": "{color}",
  "Cover": "{cover}",
  "Routes": [],
  "NextPage": 0,
  "Timeout": 0,
  "Finish": false,
  "FullScreen": false,
  "CanLandScape": false,
  "CanScreenShot": false,
  "Dir": "{dir}",
  "Dir.Text": "{dir}"
}

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.

Coding:

{
  "@Type": "Chat",

  "Title.Color": "{titleColor}",
  "Title.Text": "{titleText}",
  "Title.Text.Size": 16,
  "Title.Text.Color": "{titleTextColor}",
  "Title.Text.Style": "{titleTextStyle}",
  "Title.Back.Logo": "{backLogo}"
}

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.

Coding:

{
  "@Type": "Chat",

  "Chat.Email": "{email}",
  "Chat.Name": "{chatName}",
  "Chat.Profile": "{chatProfile}"
}

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.

Coding:

{
  "@Type": "Chat",

  "Chat.Bar.Color": "{barColor}",
  "Chat.Color": "{color}",
  "Chat.Title.Color": "{titleColor}",
  "Chat.Text.Color": "{textColor}",
  "Chat.Send.Logo": "{sendLogo}",
  "Chat.Emoji.Logo": "{emojiLogo}",
  "Chat.Emoji.Logo.Hover": "{emojiLogoHover}",
  "Chat.Media.Logo": "{mediaLogo}",
  "Chat.Close.Logo": "{closeLogo}",
  "Chat.Edit.Logo": "{editLogo}",
  "Chat.Reply.Logo": "{replyLogo}",
  "Chat.Pin.Logo": "{pinLogo}"
}

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.

Coding:

{
  "@Type": "Chat",

  "Chat.Radius": 12,
  "Chat.Me.Color": "{meColor}",
  "Chat.Than.Color": "{thanColor}",
  "Chat.Me.Reply.Color": "{meReplyColor}",
  "Chat.Than.Reply.Color": "{thanReplyColor}",
  "Chat.Me.Text.Color": "{meTextColor}",
  "Chat.Than.Text.Color": "{thanTextColor}",
  "Chat.Seen.Logo": "{seenLogo}",
  "Chat.Seen.Logo.Hover": "{seenLogoHover}",
  "Chat.Text.Size": 12
}

🔗 Visual Version

To see how to create this page in Applin Studio (no-code mode), visit:
Design the Chat Page in Applin Studio