How to Use

Once the Code Snippet tile has been placed onto the page, you will be able to open up the settings and enter custom code. In order for tile to be able to read in Javascript and CSS, you will need to place in the <script> and <style> tags for Javascript and CSS respectively.

Developer Notes

Sandbox Mode- When enabled this embeds the custom html code in an iframe.

As long as the tile is loaded with "Sandbox Mode" unchecked, it is possible to access the various libraries loaded on the page. This include jQuery via the $ variable. Through this, it's possible for a developer to implement solutions that use: DOM manipulation, animation, and even AJAX calls.
LiveTiles is NOT responsible for any modifications made via Code Snippet tiles and encourage the following Best Practices:

  1. Do NOT modify any DOM elements not contain within HTML in the Code Snippets tile itself with either CSS or JavaScript
  2. If you choose to modify outside DOM elements, especially via custom CSS, keep in mind that LiveTiles may change the HTML structure of other elements in the future as part of the natural evolution of the product. These chnages this may cause breaks in customization
  3. A gallery of Code Snippet examples are available on the LiveTiles GitHub page, offering a free resource for learning more about what is possible with the Code Snippet tile
  4. Comment your code. It is important to annotate your code. The Code Snippet Tile, unlike the Custom Tile, contains a single code canvas that supports HTML, JavaScript and CSS. The Code Snippet Tile declares variables, whereas the Custom Tile creates variables within settings. 
  5. Keep your code in one source. The purpose of having the Code Snippet Tile is to allow advanced customization with a simpler approach. When using the Code Snippet Tile, it is not recommended to modify the code with third party resources/software. If a third party resource or software is being used, consider using the custom tile which allows for more behavior and display customization. 
Did this answer your question?