@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
-
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
Technically, the URL_TO_RAW_SOURCE_HTMLshould 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. -
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 -
Ensure it’s encoded properly
And if I put that in my browser and load it, the browser encodes theurlproperty 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 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
