Authorization Widget Ver. 2.0
Description of the Situation
The Authorization Widget is a tool that previously allowed users to perform automatic authorization on platforms during display by overlaying virtual elements (fields and buttons) onto screenshots of authorization pages.
The widget uses the URL of the authorization page and matches the screenshot image with the page displayed at that URL. Thus, the authorization process becomes automated.
The new version of the widget offers additional improvements to the functional logic, simplifies interaction, and enhances the overall user experience.
You can ознакомиться with the first version of the widget at the following link here
Adding the Widget to the Personal Account
To add the widget to the personal account, the user must request a content archive from a SmartPlayer technical support specialist. It will be provided in `.zip` format.
After that, the user must log in to the personal account and navigate to the “Content” section.
In the “Content” section, drag and drop the widget from local storage into the personal account. Once transferred, it will appear in the content list.
Widget Main Page
After transferring the widget, double-click its icon for initial configuration. This action will open the widget’s main page.
The widget main page displays:
- usage instructions (main screen where configured steps with fields and buttons will later be displayed);
- widget control buttons;
- steps tracking column.
General Widget Settings
Clicking the “Settings” button (gear icon) opens the general widget settings page. The following parameters can be configured:
- language selection — choose one of the supported languages (Russian, English, Spanish, Portuguese, Kazakh);
- page address — insert the URL of the required authorization page;
- checkbox “Launch desktop version” — enables/disables scaling of elements according to the display device screen size;
- page refresh interval — set the refresh interval in seconds (minimum value — 30 seconds);
- checkbox “Auto-scroll” — enables/disables automatic scrolling after the authorization process;
- auto-scroll speed — set scroll speed in percent (%). Minimum value — 1, maximum — 100. If outside the range, nearest boundary values will be used;
- delay before auto-scroll start — set delay value in milliseconds;
- select image — choose uploaded images from the SmartPlayer personal account folder.
Uploading and Downloading Settings
While working with widget settings, the user can import or export widget settings. Each action is performed using separate icons located at the bottom center of the widget interface.
Completing General Settings
After configuring settings, click “Apply settings” in the bottom-right corner. Alternatively, click “Reset” to discard changes.
Then the widget will expand to full screen. Click “Save” at the bottom center of the screen.
Adding a Step
After completing general settings, the “Add step” button becomes active in the bottom-left corner. Clicking it changes the page display:
- new buttons appear:
- select screenshot;
- add action.
- a new step appears in the “Authorization steps” column with two buttons:
- apply;
- flowchart.
- in the top-left corner, the current step appears as a clickable button.
Selecting a Screenshot
Clicking the corresponding button opens a modal window containing all screenshots from the folder. Select the required screenshot for the step.
The screenshot name will appear in the “Authorization steps” column.
Add Action
Clicking the corresponding button allows choosing between two action types:
- add input field — creates an overlay field for entering data;
- add button — creates a clickable overlay button for authorization page actions.
After creating fields and buttons, position them on the screenshot.
Added actions will appear in the “Authorization steps” column.
Authorization Steps Column
The column displays a list of all steps and their actions.
Each step contains:
- screenshot name;
- input field (editable via gear icon or removable via cross icon);
- action button (editable via gear icon or removable via cross icon).
Each step can be deleted via “Delete step”. Actions inside a step can also be removed individually. Click the blue “Apply” button at the bottom of the column to apply all steps and settings. The widget will display a confirmation modal window.
Configuring Input Field and Action Button
Click the gear icon next to a field or button to open its settings. Button settings:
- name;
- X coordinate (pixels);
- Y coordinate (pixels);
- width (pixels);
- height (pixels);
- delay time (milliseconds before click).
Field settings:
- name;
- value (text inserted into field);
- X coordinate;
- Y coordinate;
- width;
- height;
- delay time (milliseconds before input).
Click the blue “Apply” button at the bottom of the column to save changes.
Flowchart
Clicking “Flowchart” displays a visual flowchart showing steps and actions within each step. This allows clearer understanding of the authorization logic built in the widget.
Adding the Configured Widget to a Broadcast
To fully review this functionality, launch a scheduled broadcast and add the widget as content. For details on creating broadcasts and schedules, review the following articles:
Video Instruction
Authorization Widget Setup ver. 2.0
Additional Information
If this article does not help you use the functionality as intended, or if questions remain, they can be raised in the “Discussions” section at the top of the page.
Additional information is available on the page How users interact with the "Discussions" section
