> For the complete documentation index, see [llms.txt](https://docs.saabytes.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.saabytes.com/controls/saachatbubble.md).

# SaaChatBubble

![](https://3593808699-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeLJp7jLxK-XmIvfxh3%2F-MgkqXZnCp0cDygUkzzl%2F-MgksR0EHGWaZoX8RyoK%2Fimage.png?alt=media\&token=993e5215-457a-42d6-ba69-01f3c6d2e3ce)

![](https://3593808699-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeLJp7jLxK-XmIvfxh3%2F-MgkqXZnCp0cDygUkzzl%2F-MgkrxgNPht29vE1MzUu%2Fimage.png?alt=media\&token=3e1c2440-8cfd-4f90-b7f3-903d10782872)

## 1. Colors

`BackColor` tells the overall background color of the bubble.

`ImageBackColor` tells the background color for the profile image.

`ImageBorderColor` tells the border color for the profile image.

`MsgBackground` tells the background color for message body.

## 2. Size

`BoddyPadding` tells the distance between the message body edges and its contents.

`ImageBorderThickness` tells the width or the thickness of the profile image border.

`ProfileSize` tells the size of the profile.

`ImageSizeMode` tells the sizing mode of the profile image.

## 3. Positions, Offsets and Peak

`ImagePosition` tells the position of profile image.

The peak of the message is drawn using three coordinates, (X1, Y1), (X2, Y2) and (X3, Y3) which are available as `PeakOffX1`, `PeakOffX2`, `PeakOffX3`, `PeakOffY1`, `PeakOffY2` and `PeakOffY3`. See the illustration below.

![](https://3593808699-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeLJp7jLxK-XmIvfxh3%2F-Mgkno3MpeIMwAzzzvKo%2F-MgkqOxY4F3rzFQCRcq5%2FSaaChatBubble%20PeakOffset.png?alt=media\&token=009acd8c-4c01-455f-aaef-08c233ed8bee)

`PeakPosition` tells the position of the peak.

`ProfilePosition` tells the position of the profile.

`RightToLeftRTL` tells whether the text will be right to left for RTL languages.

`TextAlign` tells the alignment of the text. This is the position the text will be writing from.

`Peak` tells whether the peak is visible or hidden.

## 4. Text and Image

`Body` tells the text message to display.

`Image` tells the profile image.

`Profile` tells whether the profile is shown or hidden.

## 5. Radius

`Radius` and `ImagRadius` tell the roundness of the message body and the profile image respectively. `Radius` and `ImagRadius` have four properties: `TopLeft`, `TopRight`, `BottomRight`, `BottomLeft`.

## 6. Methods

`MeasureHeight()` returns the height required for the bubble to display all its contents. It has optional `OnlyBody` argument which indicates whether height returned will be only the body or the whole bubble.

`MeasureWidth()` returns the width required for the bubble to display all its contents. It has optional `OnlyBody` argument which indicates whether width returned will be only the body or the whole bubble.

## 7. Events

`BodyChanged` fires when text in the body gets changed.

`BodyClicked` fires when the body of the message is clicked.

`ImageClicked` fires when the profie image is clicked.