Custom tile editor

How to Use

Once the custom tile is placed onto your page, you will be able to create a new tile/place custom code onto your page by using the code option. In addition, you will be able to use variables that you creating under the New Configuration Options by referencing them in your code. This tile will also allow you to lock it so that users in the designers group will see only the options for this tile, allowing you to be able to treat the custom tile with the code created for it as a normal tile for designers.

In order to call in custom variables/configuration, you will need to add customConfig.(insert variable here) in order to call it in your code, this will allow you to be able to call the thing



Width: Allows you to set the width of the tile.

Height: Allows you to set the height of the tile.

Background Color: Allows you to set the height of the colour

Custom Configuration: Shows the options you have set up via custom configuration options which you can call via the code for the tile you are creating.

New Configuration Option: Allows you to set up a custom configuation option via the following options

  • Label: Shows a descriptive title for the configuration option.
  • Variable Name: This will be the name for the configuration option you will call in your code.
  • Type: Allows you to choose what type of variable this is (String, Number, Color, Checkbox)


Allow Designers to Edit Code and Configuration Option: If this is selected, Both users in the Designers and Owners group will be able to edit the code for the tile. If this is de-selected, only users in the Owners group will be able to edit the code and configuration options

Run Code in Sandbox Mode: Allows the user to opt to run the tile in Sandbox Mode, When enabled this embeds the custom html code in an iframe.

Edit Code: Opens up the full screen coding experience. This will allow you to be able to work on your tile via HTML, CSS and Javascript.


Tile Visibility – Changes which groups can or cannot view the tile. Selectable via dropdown either Everyone, ‘Only for’ or ‘For everyone except’. When ‘Only for’ or ‘For everyone except’ is selected, a dropdown menu will appear where you can assign groups to the category that was selected.

Custom CSS Classes: This section allows you to add multiple Custom CSS classes to the product, allowing you to be able to add custom CSS classes to the tile.

Did this answer your question?