Виджет авторизации Ver.2.0/en

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.

Example of the widget in .zip format

After that, the user must log in to the personal account and navigate to the “Content” section.

Example of the “Content” section in the personal account

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.

Example of transferring the widget via drag-and-drop

Widget Main Page

After transferring the widget, double-click its icon for initial configuration. This action will open the widget’s main page.

Example of the widget 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.

Example of the settings navigation icon

If necessary, the instructions can be reopened by clicking the “?” icon.

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.

Example of general widget settings

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.

Example of settings import/export icons

Completing General Settings

After configuring settings, click “Apply settings” in the bottom-right corner. Alternatively, click “Reset” to discard changes.

Example of “Apply settings” and “Reset” buttons

Then the widget will expand to full screen. Click “Save” at the bottom center of the screen.

Example of the “Save” button

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.

Example of changes after adding a step

Selecting a Screenshot

Clicking the corresponding button opens a modal window containing all screenshots from the folder. Select the required screenshot for the step.

Example of screenshot selection modal window

The screenshot name will appear in the “Authorization steps” column.

Example of updated “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.

Example of action button functionality

After creating fields and buttons, position them on the screenshot.

Example of input field and button placement

Added actions will appear in the “Authorization steps” column.

Example of actions in the “Authorization steps” column

Authorization Steps Column

The column displays a list of all steps and their actions.

Example of the “Authorization steps” column

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).

Example of step structure in the column

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.

Example of confirmation modal window

Configuring Input Field and Action Button

Some parameters described here automatically change when dragging elements within the widget screen.

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).

Example of button settings

Field settings:

• name;
• value (text inserted into field);
• X coordinate;
• Y coordinate;
• width;
• height;
• delay time (milliseconds before input).

Example of field settings

Click the blue “Apply” button at the bottom of the column to save changes.

Example of the “Apply” button

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.

Example of the flowchart

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.

Example of the “Discussions” tab on the wiki page

Additional information is available on the page How users interact with the "Discussions" section