Chat
How to add and style chats.
Last updated
Was this helpful?
How to add and style chats.
Last updated
Was this helpful?
Chat bubbles are used to show a line of conversation. Chat bubbles can include data, such as the author's image, name, time, and status such as 'delivered' or 'seen'.
Chat bubbles can be a great way to share small pieces of information as people are accustomed to the format of text message bubbles from their experience with messaging apps on smartphones. By mimicking this familiar interface, you can create a sense of comfort and ease for users.
Location in the Parts Library: Base Parts > Data Display > Chat
Choose the chat most closely aligned with what you need from the Parts Library.
Choose your preferred chat, select the part where you’d like to add your chat and click ‘+ add to page’.
A chat (parent) can consist of a few different parts (children). These parts may include:
A chat bubble, which has text inside
A chat image, containing an image
A chat header, containing text and time
A chat footer, containing text and time
Below is a brief video showing some key parts within a chat, and their parent/child relationship. In this video, there are two chats - the first is Neo, the second is Morpheus. Click the play button to view.
The same process occurs for editing the text in the chat header and the chat footer.
A chat can be aligned either to the left (start) or the right (end), as you would normally see in a message exchange. To set whether the chat is at the start or the end, select the chat part. Then go to the 'Side' property, and choose whether the chat should be at the start or at the end.
Changing an in a chat is the same as changing an image in any other part. Select the image which will open the property editor panel on the right. Click on Image > Value Set to select your image from the Media Gallery or upload an image from your device.
Changing the in a chat bubble is done like you would edit text in any other part. Select the text which will open the property editor panel on the right. Go to the Text Editor, and replace the value with your new text.
Some of the example Chats in the Parts Library have a part. To change the time, including the format of the time, select the Time part to activate the right property editing panel.
To change the of the chat bubble, make sure the chat bubble part is selected. Select the Colors Editor in the property editing panel on the right. Setting the background color will change the color of the bubble, and setting the foreground color will change the color of the text.
To add a to your chat, select the chat, then go to the property editor in the right panel. Go to 'Image', then choose your preferred image from the Media Gallery or upload a new image. You can then adjust the of the background image within the Decoration Editor as needed.
Colors
Images
Text
Time
Customizing and formatting
