Third-party code injection
There are several options to embed third-party code on Flexbe. To have a well running code, 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 team. We'll check the code and suggest where it's better to embed it.
Code injection option on the Settings tab
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 adding counters, widgets, and hacks that should apply to all pages of your website. The added 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, JS code is wrapped with <script> tags, CSS styles – with <style> tags.
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 (a good option for widgets and counters that should run on one page, and should not trigger in the editor. To test their work, go to the Preview mode.
You can inject JS and CSS code into 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. You can also set up the responsive mode for mobile devices without extra need to manage @media.
You can rename widgets at any time.
HTML section and element
HTML sections 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 sections or elements have 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 sections or elements is applied in the editor so it should be used with caution. Erroneous code may break the editor or even the page view. If this occurs, contact our support team and we'll do our best to solve the issues.
Any code you add with HTML sections or elements is applied in the editor so it should be used with caution. Erroneous code may break the editor or even the page view. 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.
If you need to use a code snippet on several pages (but not on all), make the section Global. Then add the section with code to those 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.