Third-party code injection

There are several options to embed third-party code on Flexbe. To have your code running flawlessly, it's important to choose 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 tweaks that should apply to site-wide. The run any custom code, go to 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 set the time of delayed loading.

Injecting code on the Code tab

Any code you embed on the Code tab of the upper panel applies to a current page only. It allows you to add widgets conveniently without stacking them in the window of the Code Injection.

It is a good option for widgets and counters that should run on one page, but should not trigger in the editor. To test the code, go to the Preview mode.

You can inject JavaScript and CSS code in two 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 additional need to manage @media.

You can rename widgets and change 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 run in a 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 iframes.

Embedding code with HTML blocks has the same pros as using the Code tab. The HTML editor has JS tab and CSS tab, you can also upload files to use code paths.

NOTE

Any code you add with HTML blocks runs 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'll 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 want to use a code snippet on several pages of your site, it's better to turn a code section into a Global section and add it to the pages where you see fit.

Thus, any changes you add later to the code in any Global section will instantly proppagate across all its duplicates on other site's pages.