How to export Custom Tile?

@josh how do you export a custom tile and supply the link like how you do?

Hey @just_jake - thanks for posting and I look forward to seeing your creation shared with the community. The sneak preview you shared in PM looks awesome!

You can find some details on creating the import URL here:

Most people host their code on Github and then use the ‘raw’ link so they can link directly to the raw source code rather than a page displaying the code.

So from the ‘Import Code’ section of the documentation above, the base format is:

https://sharptools.io/developer/custom-tiles/import/?url={{URL_TO_RAW_SOURCE_HTML}}

End-to-End Example

  1. Getting the raw source URL
    For the Scenes example in my screenshot above, the URL from the ‘raw’ button is:

    https://raw.githubusercontent.com/joshualyon/custom-tile-demos/main/smartthings-scenes/scenes.html
    

    :information_source: Technically, the URL_TO_RAW_SOURCE_HTML should be URL encoded. I find the easiest way to do that is just combine the URLs like normal and then open it in a modern browser like Chrome which will automatically encode the parameter for you.

  2. Combine our source URL with the import format
    So combined we have the unencoded format…

    https://sharptools.io/developer/custom-tiles/import/?url=https://raw.githubusercontent.com/joshualyon/custom-tile-demos/main/smartthings-scenes/scenes.html
    
  3. Ensure it’s encoded properly
    And if I put that in my browser and load it, the browser encodes the url property for me giving me the final version

    https://sharptools.io/developer/custom-tiles/import/?url=https%3A%2F%2Fraw.githubusercontent.com%2Fjoshualyon%2Fcustom-tile-demos%2Fmain%2Fsmartthings-scenes%2Fscenes.html
    

    :information_source: You could URL encode it any other way you’re comfortable with - for example with an online URL Encoder tool, but I found the browser does the job and it’s readily available.

Here’s a demo showing the process end-to-end:

1 Like

Did I miss the big reveal @just_jake :slight_smile: