3.0 KiB
3.0 KiB
Plugin API reference
Last update: 23-Dec-21 (View change history)
Table of Contents
Plugin attributes
Structure sample
<!-- Should be placed at the place of plugin render -->
<div
class="ezl-container"
data-widgetType="inlineButton"
data-login="input[name=email]"
data-password="input[name=password]"
data-submit="input[name=submit]">
</div>
<!-- Should be placed at the bottom of the <body> -->
<script src="https://easylogon.foxdev.studio/ezlog.js" defer></script>
| Attribute | Description | Valid values |
|---|---|---|
| data-widgettype | Type of widget appearance. Go to widget creation panel to see difference in action | inlineButton, button, inline, link |
| data-login | CSS selector which points at an <input /> field for user's email/login on authentication page |
Valid CSS selector pointing at the exact <input /> element |
| data-password | CSS selector which points at an <input /> field for user's password on authentication page |
Valid CSS selector pointing at the exact <input /> 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 <input /> 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
inlineButtonbuttonlink
Examples
#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-containeris presented in all widget types. It is advised to use this selector only withinlinewidget
Supported widget types
inline
Examples
.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