Exchange page builder
Exchange page builder is a visual tool in the Lara-Script admin panel designed to configure the structure and appearance of the exchange request creation page without the need to edit source code.
Using this tool the administrator can:
manage the display order of blocks on the exchange page;
add, remove and rearrange sections;
customize the visual structure of the page to the business logic of a specific exchange service;
improve the user experience without involving developers.
This section relates exclusively to the request submission page, not to the website's main page.
Interface structure
The exchange page builder interface consists of two main areas.
1. Available sections
The left part of the screen contains a list of available sections that can be used on the exchange page.
Sections from this list can be:
added to the page;
removed from the page;
reordered in the right block.
2. Page Body Builder (Workspace)
The right part of the screen is a visual workspace that displays the current structure of the exchange page as it will be shown to the user on the site.
All changes are shown in real time after clicking "Save".
Working with sections
Adding a section
To add a new section to the exchange page you need to:
Find the required section in the list Available Sections.
Drag it into the workspace Page Body Builder.
After adding, the section will become available for editing and configuration.
Changing the order of sections
The order of sections directly affects their display on the site's page.
To change the order:
press and hold the desired section in the workspace;
drag it up or down relative to other sections;
release to fix the new position.
Changes apply immediately after saving.
Removing a section
If a section is no longer needed:
remove it from the builder workspace by clicking the gear and selecting "Delete section";
after saving changes it will no longer appear on the exchange page.
Section settings (gear icon)
Each section in the workspace has an icon ⚙ (gear) that opens the settings window for the specific block.
The set of available parameters depends on the section type, however the configuration logic is the same for all blocks.
Main sections of the exchange page
Below is a description of the key sections used on the request creation page.
Direction selection block (Give/Receive)
The main block of the exchange page, the calculator, in which the user:
selects the currency they give;
selects the currency they receive;
enters the exchange amount;
sees the current rate;
sees the minimum and maximum limits.
This block is a key element of the exchange page and is usually located at the top of the page.
Exchange regulations block
The section is intended to display:
exchange rules;
terms of service and important notifications for the user.
Information from this block is configured in the currency annotations.
Form field block
In this block the user fills in the data required to perform the exchange, configurable in custom fields, for example:
phone number;
card details or crypto wallet;
additional data required by the chosen exchange direction.
The set of form fields is formed dynamically and depends on the currency and custom field settings in the admin panel.
Visual grid and alignment
A visual grid, which:
helps align sections;
shows content boundaries;
makes it easier to build a logical page structure.
The grid is used only in the admin panel and is not displayed on the site.
Saving changes
After making any changes you need to:
Click the Save.
Wait for confirmation of successful saving.
If necessary refresh the site page.
⚠️ Important: If changes were not saved, they will be lost when leaving the section.
Features and limitations
The exchange page builder affects only the appearance and display order of blocks.
The exchange business logic, calculations and validations are set in other admin panel sections.
Some sections are critically important for the correct functioning of the exchange page and are not recommended for removal.
Summary
The exchange page builder allows you to:
flexibly customize the user interface;
adapt the page for different exchange scenarios;
improve UX without changing code or involving developers.
Last updated