0.1.0-beta (#1)

Initial set of documents

1-Get started/4-Plugin customization.md

@@ -0,0 +1,42 @@
+# Plugin customization
+Last update: 13-Dec-21 ([View change history](https://github.com/foxdev-studio/easylogon-docs/commits/master/1-Get%20started/3-Plugin%20customization.md))
+
+## Table of Contents
+- [Plugin types](#obtain-code)
+- [Custom CSS](#custom-css)
+- [Related links](#related-links)
+
+When everything is up and running, it's time to think about appearance. We provide some tools to customize your widget
+
+## Plugin types
+There're four basic types of widget which work out of the box:
+- Inline (`inline`) - QR code is placed next to sign in form
+- Button (`button`) - "Sign in with QR code" button which is placed under sign in button
+- Inline button (`inlineButton`) - Small "Sign in with QR code" button which is placed on the right from password field
+- Link (`link`) - Hyperlink which opens QR code in another browser tab
+
+![Widget types](https://easylogon.foxdev.studio/docs/widget-types.png)
+
+To see how each type of widget acts, go to [widget contructor panel](https://easylogon.foxdev.studio/profile#CreateWidget)
+
+## Custom CSS
+Since QR code button is injected into your website code, it can be heavily customized with CSS
+
+You can attach new CSS file to your page head and use `#ezl-btn` selector to apply styling rules to the widget
+
+### Example
+```css
+#ezl-btn
+{
+	background: gray;
+	border: 2px solid red;
+	color: white;
+	font-family: monospace;
+}
+```
+![Customized button](https://easylogon.foxdev.studio/docs/custom-btn.png)
+
+For more information about customization and limitations, see [Plugin API reference](/docs/2-API%20Reference/1-Plugin)
+
+## Related links
+- [Plugin API reference](/docs/2-API%20Reference/1-Plugin)