Code Widget

Blocs allows you to easily integrate any type of code into your projects using the code widget. This feature is exceptionally useful as it can be used to add additional functionalities to your Blocs projects that are currently not available yet.

Important

If a code widget is set to preview its contents in-app, please take care when pasting in code as it could cause Blocs to crash or your site to break if the content contains anything other than plain HTML. If you intend to add JS, PHP or anything other than plain HTML, take care to disable the code widgets in-app preview first.

Inputting Code

To edit the content of a code widget simply double click the element on the design canvas. This will open the Blocs code editor. This code editor makes it easy to input any type of custom code. All changes you make to the code will be reflected within your Blocs project in real time if it’s set to preview its contents in-app.

Beginner tip

All elements such as text, buttons or links that are created using code in a code widget can not be selected for editing using the standard in app options. The normal behaviour when trying to select elements inside a code widget is that the code widget container will be selected.

code-editor
 

In-App Previewing

The code widget makes it possible to prevent in-app previewing of code when it is pasted in, this is useful and recommend when you are inputting Javascript or PHP. The preview feature should only be enabled when adding plain HTML. A code widgets, in-app preview can be disabled using the preview checkbox located in the sidebar inspector options.

Adding Code To Other Areas

If you would like to add custom code to other areas of a page, you can do that using the built in Blocs code editor.

Updated on 18th November 2020

Was this article helpful?

Related Articles