> For the complete documentation index, see [llms.txt](https://help.synode.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.synode.ai/visualizer/callouts-in-synode-visualizer.md).
# Callouts in Synode Visualizer
Callouts are customizable information panels that can be displayed in the 3D scene. They can contain text, dividers, images, and buttons to provide additional information, instructions, images, or external links.
Callouts can also be connected to hotspots so that the callout appears when the user selects the assigned hotspot.
***
### Add a Callout
Open the Callouts panel from the toolbar on the left side of the Visualizer.
Click Add Callout to create a new callout.
The new callout appears in the Callouts list and is displayed in the 3D scene.
Select the callout from the list to edit its properties.
***
### Rename and Remove a Callout
To rename a callout, double-click its name in the Callouts panel and enter a new name.
Use a clear and descriptive name to make the callout easier to identify, especially when assigning it to a hotspot.
To remove a callout, click the X icon beside its name.
Make sure the callout is no longer needed before removing it.
***
### Global Appearance
The Global Appearance section controls the overall appearance and spacing of the selected callout.
Changes made in this section apply to the callout itself rather than to an individual content item.
Fill controls the background color of the callout.
Border controls the color of the callout border.
Border Width controls the thickness of the border.
Corner Radius controls how rounded the corners of the callout appear.
Padding controls the space between the callout border and its content.
Margin controls the spacing around the callout within its display area.
Spacing controls the amount of space between content items inside the callout.
***
### Callout Properties
Select a callout from the Callouts list to display its settings under Callout Properties panel.
#### Location
Use Location to choose where the callout appears in the viewer.
Available locations include:
* Top Left
* Top Right
* Bottom Left
* Bottom Right
Changing the location moves the callout to the selected corner of the viewer.
#### Size
Use Width and Height under Size to control the dimensions of the callout.
Increase or decrease these values based on the amount and type of content displayed inside the callout.
#### Contents
The Contents section determines what appears inside the callout.
Click + Add and select one of the available content types:
Text
Divider
Image
Button\
\
Iframe
Each added item appears in the Contents list.
Select an item from the list to edit its settings under Content Properties.
You can also change the order of the content displayed inside the callout by dragging content items in the Contents list to rearrange how they appear.
***
### Content Properties
The Content Properties section displays the settings for the content item currently selected in the Contents list. \
The available settings change depending on the selected content type.
#### Text
Select Text from the + Add menu to add written information to the callout.
Enter the text you want to display, then use the available formatting options to customize its appearance.
Available options include:
* Bold
* Italic
* Underline
* Text Color
* Font Size
* Line Height
Text can be used for titles, descriptions, instructions, specifications, or other information.
#### Divider
Select Divider from the + Add menu to add a horizontal line between content items.
A divider can be used to visually separate different sections of information inside the callout.
Under Content Properties, you can adjust:
* Height
* Color
#### Image
Select Image from the + Add menu to add an image to the callout.
Under Content Properties, click Select Image and choose the image you want to display.
Use Corner Radius to adjust the roundness of the image corners.
Images can be used to display diagrams, product details, instructions, or reference images related to the selected component.
#### Button
Select Button from the + Add menu to add a clickable button to the callout.
Under Content Properties, you can configure:
* Label – The text displayed on the button.
* Link – The destination opened when the button is selected.
* Fill Color – The background color of the button.
* Text Color – The color of the button text.
* Border Color – The color of the button border.
* Border Width – The thickness of the button border.
* Corner Radius – The roundness of the button corners.
Buttons can be used to direct users to additional documentation, websites, videos, or other resources.
#### iFrame
Use IFrame to embed web-based content directly in the Callout.
Enter the source URL under Content Properties. The website or application must allow iframe embedding for the content to display correctly.
