This widget is based on react for embedding via script tag. This has some disadvantages such as having a big bundle size. While vanilla js would work just fine react is easier to work with.
There are two options to embed a widget namely script and iframe. Based on some research I did, iframe is great if you want a general post to be shared. For example Twitter post, facebook post etc, but they're not good for seo. Whereas script tag are better for seo.
I used the script tag method and dynamically created a div to inject the react component. I also used a vite plugin to inject the generated css bundle via js file instead of a separate css file. This has an advantage of just being able to give someone the script tag and it'll just work in any application. A way to reduce the currently huge(140kb+) bundle size would be to build it without including the react and react dom which will break the widget on any non react sites.
An example usage would be like this
<script type="module" src="my-lib.js" defer>Some references that I used were
- Stackoverflow post showing usage of cssInjectedByJsPlugin (this plugin is used to inject generated build-time css via javascript without a separate css file) https://stackoverflow.com/a/72526153
- Vite Library Mode Docs - https://vitejs.dev/guide/build.html#library-mode
- have npm and nodejs installed (v18+ preffered)
- have serve installed (install it with
npm i -g serve)
-
npm install -
npm run build -
cp test.html ./dist/index.htmlto copy the test file todistfolder -
npm i -g servefor installing the serve library -
serve ./dist -
Check http://locahost:3000