# Custom Tiles

# Overview

Custom Tiles can be used to embed web pages from other sites or to integrate with other services using standard web technology like HTML, CSS and JavaScript.

There are two types of Custom Tiles:

URL: points to an external webpage; embeds as an iframe
HTML: HTML, CSS, and JavaScript (hosted by SharpTools)

# Creating Custom Tiles

From the Developer Tools page, you can scroll down to the bottom of the Custom Tiles list and tap Create which will take you to the Custom Tile editor where you can create your first Custom Tile:

From here, you can select a Type of either URL or HTML and then follow the relevant guide for that type.

# Best Practices

Here are some best practices when working on Custom Tiles:

Test tiles without settings configured
For example, display a message suggesting the tile should be configured. You can test this by either not filling out the preview settings or clearing out the settings before tapping continue in the Settings preview modal.

Consider browser compatibility for shared tiles
If you're building a tile for personal use and know your devices support modern JavaScript, feel free to use whatever syntax you prefer. If you plan to share your tile with others, keep in mind that SharpTools supports devices as old as iOS 10.3 — so targeting ES2015 (ES6) syntax ensures the widest compatibility. Newer syntax like optional chaining (?.) or nullish coalescing (??) may not work on older tablets or iPads.

Write body content only, not a full HTML document
Your Custom Tile code is rendered inside a sandboxed iframe that already has a page structure in place. Write the content that would go inside a <body> tag — HTML elements, <style>, and <script> tags. Do not include <!DOCTYPE>, <html>, <head>, or <body> tags as these are already provided.

If using the ‘Default Dimensions’ option, take preference to the smallest reasonable size
When adding tiles to a dashboard, it’s generally preferred not to have a tile larger than the dashboard width added. For example, many mobile (portrait) dashboard users will only be showing 2 columns wide, so a 3 wide tile would extend beyond their dashboard.

Prefer dynamic measurements rather than fixed pixel sizes
Users retain the ability to adjust tile dimensions as they see fit, so also plan on accommodating larger or smaller tile sizes where reasonable em, vh, or % sizes provide flexibility in scaling compared to px units and can be used with font sizes, div sizes, etc.

The ‘window’ size will be the size of the tile since the custom HTML is displayed in an iframe. This can be used as a helpful reference if you want to dynamically calculate sizes or use CSS @media queries

# What Next?

Build your first Custom Tile using the URL or HTML approach.