Embedable Scripts
Hey guys, I’m trying to make an embedable script that any website can use HTML script tag to embed. I want to make my script obviously looking very nice and even somehow inherit the ShadCN and styles. How would I do this? I’m unsure how to customize the style beyond standard HTML styling. Also, is this bad, with this slow down the website to have such complex components?
This is for my next JS 14 application.
1 Reply
There is some unspoken rules that you need to follow, but generally it's pretty doable.
- write your script so it can (and should) be included with "async" param
- provide both static and dynamic ways of loading your code - see hcaptcha docs for a good example
- don't rely on anything in window. Bring your own scripts and frameworks if needed. Don't pollute window.
- play nice when your dom element is removed.
- play nice with content script policy. Don't use unsafe-eval
Etc etc
You can add styles, make sure they are scoped and will play nice with bootstrap, tailwind, jquery, whatever.
You can use shadow dom and web components, but that's often unnecessary.
Many scripts use about:blank iframes with injected code for best isolation. Register and reverse-engineer tawk.to embed script to see a good and minimaliatic example.
@oz