How to design a "embeddable" widget/pixel for a dashboard
Hi fellow indiehackers,
I am trying to build an "embeddable" video widget company that I have designed in HTML and CSS.
What I don't understand is how some other companies create those cool embeddable JS snippet codes that allow you to embed other overlays / popups / widgets on a website.
There are alot of other SAAS products that create these "embeddable" scripts like :
<div style="position: relative;bottom: 0;left: 0;" id="juicier-container" data-account-id=""><a style="font-size: 8px;color: #19191f36;text-decoration: none;" href="#" target="blank">Powered by ProofFactor - Social Proof Notifications</a></div><script type="text/javascript" src="https://cdn.prooffactor.com/javascript/dist/1.0/jcr-widget.js?account_id=_________"></script>
whether it is a company like social proof like UseProof/ProofFactor or chatbot company like Instabot
But What are the technical design components that go into making a pixel into a dashboard? How can one build an JS script / pixel via a dashboards that embeds that html/css/js into another website?
Essentially what you need is a JS file that changes the DOM and adds elements dynamically to the page that it has been loaded. https://www.google.com/search?client=safari&rls=en&q=how+to+make+a+js+widget&ie=UTF-8&oe=UTF-8"
create an html version on a page and then use an iframe.