Code Blocks

Code blocks are a special kind of block that can be dragged into your page-builder pages to run bespoke code. They run on the page they are placed on but only when previewing the page, or loading it via its Live URL. They do not run when editing the page.

They are generally used to add bespoke CSS styles or Javascript to your page, but anything else can be added such as YouTube embeds, or Facebook pixels.

They are generally used by more advanced users.

Why use a Code Block?

Javascript can be written to create almost any functionality on the internet. For example, you could use it to display an animation, or more practically to add a counter to text areas to show how many characters are left, or to add placeholders inside fields instead of labels.

You can also add CSS styles inside code blocks, if you wanted to change the look of a specific page but not apply it to the HTML template so that it affects all pages.

How to add a Code Block

Just like text and image blocks, you drag in a Code Block from the under toolbar’s Components menu. An editor will open up on the screen with some default code inside.

You can type your code in here and it will run at the point of where it is placed on the page when previewing or viewing the campaign. For example this would turn the page orange, but not within the editor:

<style>
  .en__component--page {
    background-color: orange;
  }
</style>

Or this javascript would add placeholders inside text blocks with an extra (*) if the field is mandatory:

<script> 
  // Adds placeholders to text boxes automatically
  $('.en__field--text').each(function() {
    var input = $(this).find('input');
    var label = $(this).find('label');
    var labelText = label.text();
    // Add * to placeholder if mandatory
    if ( input.parent().parent().hasClass("en__mandatory") ) {
      labelText += "*";
    }
    input.attr('placeholder', labelText);
  });
</script>

(Note that this example requires the jQuery library to run)

Once you have added your custom code you click “Save” to save the block to the page. To save the code block to use on other pages click “Save to library”.

Github

We have a Github area with some useful examples of code here. Please contribute anything you think would be useful to the Engaging Networks community here.