HTML editor

Get Started

Using links to open pop-ups/cart, to add products or send goals to analytics services

You can use anchor links to set up scrolling to a section, opening pop-ups / cart, etc.

To open a pop-up, specify its ID as the anchor link:

<a href="#form">Open a pop-up</a>

To open the cart, use the #cart anchor link:

<a href="#cart">Open the cart</a>

To follow an anchor link or element ID, use the link that looks like:

<a href="#about">Go to section "About"</a>

You can set up the behavior of links using the following attributes:

[data-goal="GOAL_NAME"] — the name of a goal that will be sent to your analytics service;

[data-action="ACTION_NAME"] — it specifies the type of an action that happens after the link is followed. This attribute triggers the goal set up in your analytics service. If the attribute isn't specified, then the link value is used.

ACTION_NAME	Goal	Additional attribute	Description
link by default	link_open	href="URL" — Link URL target="_blank" — Open in a new tab	Open a link / Open a pop-up / Open the cart / Follow an anchor
cart	add_to_cart	data-product-image="/img/2000018200_600.jpg" — Path to a product image data-product-name="Product name" — Product name data-product-price="1000" — Price for a product unit data-product-count="1" — Quantity of products to be added	Add to the cart
file	file_load	href="URL" — Path to a file download — Force downloading files that can be opened in the browser (PDF files, images)	Download a file
modal	modal_open form_open done_open product_show quiz_start	data-modal-id="MODAL_ID" – ID of a pop-up to be opened	Open a pop-up
close	modal_close	–	Close a pop-up (only for pop-ups)
none	–	–	Don't handle

Add--to-Cart code snippet:

<a 
    data-action="cart"
    data-product-image="/img/9512942_1150.webp"
    data-product-name="Black Hoodie"
    data-product-price="15990"
>
    Add a product to the cart
</a>

Open-a-Pop-up code snippet:

<a 
    data-action="modal"
    data-modal-id="form567"
>
    Show pop-up
</a>

Trigger-a-Goal code snippet:

<a 
    data-action="none"
    data-goal="my_custom_goal"
    href="#anchor"
>
    Follow the anchor and run the goal "my_custom_goal"
</a>

Responsive design

You can override styles for different types of devices using the .adaptive-desktop and .adaptive-mobile classes applied to the body.

Classes applied to the body

className	Description
adaptive-desktop	Current site's display mode — PC
adaptive-mobile	Current site's display mode — Mobiles
is-touch	Device with touch screen
is-pointer	Device with cursor
is-ios	iOS device (iPhone, iPad)
is-android	Android device
is-safari	Safari browser
is-chrome	Chrome browser
is-edge	Edge browser
is-firefox	Firefox browser

Example of using classes:

// Red colored element in Chrome for iPhone devices
body.adaptive-mobile.is-ios.is-chrome {
    :scope {
    	color: red;
    }
}

CSS variables

You can use system CSS variables in your styles. See the list of applied variables below:

Variable	Description
var(--currentColor)	Current text color
var(--contrastColor)	Color contrasting to current text color
var(--bgContrast)	Color contrasting to current background color (it differs from --currentColor in case when text color isn't set to Auto)
var(--lightColor)	Light color
var(--darkColor)	Dark color
var(--100vw)	100% screen width
var(--100vh)	100% screen height
var(--coverHeight)	Height of full-screen sections (it doesn't change when the screen size is changed slightly)
var(--scrollbarWidth)	Scrollbar width on the current device
var(--containerWidth)	Container width (1150px)
var(--containerMaxWidth)	Maximum container width (100%)

JS API

Element / section entering the viewport

You can set up any element or section entering the viewport. Use the elementApi object to access the properties of the current HTML element. You also have access to the parent object, sectionApi or modalApi depending on the location of this element.

Available object fields

Object field	Description
id	Unique section ID
is	Element type (block, modal, element)
area	DOM element of the entire element/section We do not recommend changing its properties.
content	DOM element of the section content container Use it to address the DOM element of the current HTML element
inScreen / wasScreen	Section is in the viewport / was in the viewport
inView / wasView	Section is more than 25% visible / was 25% visible
inFocus / wasFocus	Section is in the viewport center / was in the viewport center
inBeside / wasBeside	Section is beside the viewport / was beside the viewport
isVisible / wasVisible	Section is visible or hidden now / was visible at least once

Example of using API

function triggerOnScreen() {
  if (!flexbe_cli.is_admin) {
    flexbe_cli.events.trigger('ui_modal_open', { id: 'my_fancy_modal' }); 
  }
}
    
// If, on page load, the element is already in the viewport
if (elementApi.inScreen) {
    triggerOnScreen();
} 
    
// Register event of entering the viewport
elementApi.on('screen', ({ state, first }) => {
    if (state && first) {
        triggerOnScreen();
    }
});

Available events inside the element / section

Event name	Description
beside	Section will soon appear in the viewport
screen	> 1px of the section is visible in the viewport
view	> 25% of the section is visible in the viewport
focus	Section is crossing the viewport center
visible	Section becomes visible or hidden (its state changes from display: none to display: block). It applies to pop-ups, elements in tabs, etc.
resize	Element size has changed
open	Pop-up was opened
close	Pop-up was closed

Example of event registering

elementApi.on('screen', ({ state, first }) => {
    console.log('Element entered and left the viewport', { state, first });
});


sectionApi.on('resize', () => {
    console.log('Section width or heigth has changed');
});

Files tab

Use this tab to upload files accompanying your code.

Take into account the following:

🚨 Files are not deleted after an HTML section is removed.

🚨 All files are available on all pages of the site.

🚨 File size cannot exceed 15 MB.

Enable image optimization option affects the way file paths are listed. If this option is turned on, then the links to optimized images are generated (their settings depend on the setup in the Settings → Speed Optimization.

You can specify your own path to an image.

Supported path formats:
/img/{id}_{size}_q{quality}.{extension}
/img/{id}_{size}.{extension}
/img/{id}.{extension}

Variable	Description
%id%	Unique image ID
%size%	Image width If the original size of an image is less than this value, the image is generated in its original size.
%quality%	Image quality An optimal value is in the range of 65—85% depending on the file format.
%extension%	Image format (AVIF, WebP, JPG, PNG, GIF)

Example:
/img/19790179_1280_q65.webp — an HD image in the WebP format and 65 quality (1280x1021px, 250Kb)
/img/19790179_1920.jpg — a Full HD image in the JPG format (1920x1532px, 460Kb)
/img/19790179.jpg — an original image (3024x2413px, 1558Kb)

To speed up the performance of your pages, try to find an optimum size for each image.

HTML editor

HTML

Visibility on devices

Using links to open pop-ups/cart, to add products or send goals to analytics services

Opening images in the pop-up

Lazy loading of images

CSS / LESS

Visibility scope

Responsive design

CSS variables

JS / TSX

Uploading dependencies (ES Module Import)

JS API

Element / section entering the viewport

Programmed opening / closing of pop-ups or the cart

Files tab