Third-party code injection
There are several options to embed third-party code on Flexbe. To have your code well running, it's important to select an appropriate method of injection. Read on to learn about all options and some cases when each method is suitable.
If after reading this article you still have doubts which method to use, contact our support service team. We will check the code and suggest where it's better to embed it.
Settings -> Code Injection
Any code you add in the Settings → Code Injection is applied to all pages of your site. It's the simplest, low-level way to embed code. It is suitable for embedding counters, widgets, and hacks that should apply to all pages of your site. The code runs only in the Preview mode.
As the code on the tab is added directly to the page HTML, it should be wrapped with correct tags. For example, JavaScript code is wrapped with <script> tags, CSS styles – with <style> tags.
Settings -> Widgets
Any code you embed in the Settings -> Widgets applies to all pages of your site.
To set up lazy loading of a widget, go to the Settings -> Speed Optimization and specify the time of delayed loading.
Code tab on the page
Any code you embed on the Code tab of the page applies only to this particular page. It allows you to add widgets conveniently without stacking them into one block of the Code Injection. It is a good option for widgets and counters that should run on one page, and should not trigger in the editor. To run the code, go to the Preview mode.
You can inject JavaScript and CSS code on the separate tabs so there's no need to wrap code snippets with tags. The JS tab supports ES Modules. The CSS tab supports LESS syntax. Using the CSS tab, you can also set up the responsive mode for mobile devices without extra need to manage @media.
You can rename widgets and change the their order at any time.
HTML sections and elements
HTML blocks (sections, pop-ups and elements) also run on particular pages. They are suitable for embedding code that should be displayed in the specific place on the page (for example, a calculator widget). Injecting code through HTML blocks also comes in handy for adding CSS styles to your custom classes of elements and iframe.
Embedding code with HTML blocks has the same pros as using the Code tab. The HTML editor has JS and CSS tabs, you can also upload files to use code paths.
NOTE
Any code you add with HTML blocks is applied in the editor so it should be used with caution. Erroneous code may mess up the editor or even ruin the page layout. If this occurs, contact our support team and we will do our best to solve the issues.
Any code you add with HTML blocks is applied in the editor so it should be used with caution. Erroneous code may mess up the editor or even ruin the page layout. If this occurs, contact our support team and we will do our best to solve the issues.
To add an HTML section, go to the section catalog → Other.
To add an HTML element, open the list of elements. Use the search bar to access the element faster.
If you need to use a code snippet on several pages of your website (but not on all), make the section Global. Then add the global section with the code snippet to the pages where you need it. This allows to edit code easily as changes to any Global section are instantly applied to all its duplicates on other pages of your site.