Chat

How to add and style chats.

What is a Chat?

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

Example Chat Parts

Adding a 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’.

The Components of a Chat

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 Components of a Chat

Editing A Chat

Changing the Text, Background Color of a Chat Bubble, and Image in a Chat

Changing an Image

Changing an image 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 Text

Changing the text 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.

The same process occurs for editing the text in the chat header and the chat footer.

Changing the Time

Some of the example Chats in the Parts Library have a Time part. To change the time, including the format of the time, select the Time part to activate the right property editing panel.

Changing the Color of the Chat Bubble

To change the color 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.

Changing the Background Color of the Chat Bubble

Changing the Side of the Chat Bubble

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 the Side of the Chat Bubble

Adding a Background Image to A Chat

To add a background image 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 opacity of the background image within the Decoration Editor as needed.

Related Information

Colors

Images

Text

Time

Customizing and formatting