# \&showlabels

General Option! ([`&push`](/advanced-settings/setup-parameters/push.md), [`&room`](/advanced-settings/setup-parameters/room.md), [`&view`](/advanced-settings/mixer-scene-parameters/view.md), [`&scene`](/advanced-settings/mixer-scene-parameters/scene.md))

## Aliases

* `&showlabel`
* `&sl`

## Options

There are some preset style options, which can be passed to the parameter as a value. You can also choose to just edit the label's style with CSS, as discussed lower on this page.

Example: `&showlabels=ninjablue`

<table><thead><tr><th width="210.9699570815451">Value</th><th>Description</th></tr></thead><tbody><tr><td>(no value given)</td><td>Generic styled display names</td></tr><tr><td><code>fire</code></td><td>Fire looking display names</td></tr><tr><td><code>ninjablue</code></td><td>VDO.Ninja styled display names</td></tr><tr><td><code>skype</code></td><td>Skype styled display names</td></tr><tr><td><code>teams</code></td><td>Microsoft Teams styled display names</td></tr><tr><td><code>toprounded</code></td><td>Top-center rounded display names</td></tr><tr><td><code>zoom</code></td><td>Zoom styled display names</td></tr><tr><td><code>rounded</code></td><td>Rounded lower-right names; bold</td></tr></tbody></table>

## Details

This parameter will display the user's display name or label on screen, as a text overlay. The label can be set either via the URL using the [`&label`](/advanced-settings/setup-parameters/label.md) parameter, or the room's director can set it dynamically via the "Add a label" option.

This parameter can be used on guest links, view links, or scene links. It will be sticky to each individual video and not the browser window as a whole.

Underscores "\_" used in label values will be replaced by spaces, allowing for word separation.

HTML5 Emojis 🎈 and some non-Latin characters are supported.

For example: `https://vdo.ninja/?showlabels=fire`\
![](/files/GSzJupPqbCVHEVHbqoYQ)

If no preset option is passed, a default generic style is used:\
![](/files/ycjg8nGRqGcIFh7uWS2t)

### Font size customization

You can change the font-size without using CSS, using the [`&fontsize`](/advanced-settings/design-parameters/fontsize.md) parameter. CSS is also supported though.

Font-size of labels will adjust slightly based on the window size.

### Advanced Customization

CSS of the styles can be set via the OBS browser source stylesheet window.\
The CSS class name you can customize is called `video-label`.

![An example of how to set a custom CSS style for labels](/files/-ManHOL9qFpcuB8Ql6Fy)

You can copy the below code, modifying it as you desire, as a starting point. You'll still need to use `&showlabels` to trigger the labels to display though.

```
.video-label {
	color: red;
  bottom: 2vh;
	left: 50%;
	transform: translateX(-50%);
  background: rgba(0, 0, 0, .8);
	pointer-events:none;
	border-radius: 5px;
	font-size: 0.8em;
}
```

Below is another example, this time we target the video tile class, creating a margin above the video elements. We can then move the display label into that space, creating a label that is not overlaying the video itself, but still attached.

![We can paste the CSS code directly into the OBS browser source, or we can host the style in a file and access it via the \&css parameter](/files/-MhFYETeM83fq8HoipNx)

```
.tile {
  margin-top: 10vh !important;
  max-height: 90vh!important;
}

.video-label {
	bottom:unset;
	top:0;
	text-align:middle;
	left:unset;
	background:unset;
	text-shadow : 0 0 10px #035;
	font-size: 7vh!important;
}
```

## Related

{% content-ref url="/pages/-MZNYhxR\_5-Ep\_h\_N74w" %}
[\&label](/advanced-settings/setup-parameters/label.md)
{% endcontent-ref %}

{% content-ref url="/pages/j6bf8UYNd5T0JtBA7AVR" %}
[\&screensharelabel](/advanced-settings/screen-share-parameters/and-screensharelabel.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MZdusAoZaSzfwRbPWjH" %}
[\&fontsize](/advanced-settings/design-parameters/fontsize.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MZNW5d8bRb7mzFAIouh" %}
[\&css](/advanced-settings/design-parameters/css.md)
{% endcontent-ref %}

{% content-ref url="/pages/8c2pVSgEgoXiOb2xe8ox" %}
[\&labelsuggestion](/advanced-settings/setup-parameters/and-labelsuggestion.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.vdo.ninja/advanced-settings/design-parameters/showlabels.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.