```
| Attribute | Description | Valid values |
| --------- | ----------- | ------------ |
| data-widgettype | Type of widget appearance. Go to [widget creation panel](/profile#CreateWidget) to see difference in action | `inlineButton`, `button`, `inline`, `link` |
| data-login | CSS selector which points at an `` field for user's email/login on authentication page | Valid CSS selector pointing at the exact `` element |
| data-password | CSS selector which points at an `` field for user's password on authentication page | Valid CSS selector pointing at the exact `` element |
| data-login | CSS selector which points at an HTML element which is used as "Sign in" button on authentication page | Valid CSS selector pointing at the exact `` element |
## Plugin CSS selectors
### #ezl-btn
This CSS selector points at the "Sign in with QR code" button (or link) and allow you to customize its appearance
#### Supported widget types
- `inlineButton`
- `button`
- `link`
#### Examples
```css
#ezl-btn
{
background: gray;
border: 2px solid red;
color: white;
font-family: monospace;
}
```
### .ezl-container
This CSS selector points at the plugin container
> **Note**
>
> Even though `.ezl-container` is presented in all widget types. It is advised to use this selector only with `inline` widget
#### Supported widget types
- `inline`
#### Examples
```css
.ezl-container
{
background: gray;
/* Inline widget requires size at least 200x100 pixels */
width: 200px;
height: 200px;
}
.ezl-container iframe
{
filter: brightness(0) invert(1);
}
```
> **Note**
> Since widget's QR code is currently displayed inside an `iframe`, it is impossible for now to customize it more precisely
## Flyout customization
Currently we support only button (and partially `inline`) customization. At the moment customization of a flyout is unsupported
## Related links
- [Plugin integration](/docs/1-Get%20started/3-Plugin%20integration)
- [Plugin customization](/docs/1-Get%20started/4-Plugin%20customization)