never asked a question here as usually I would find all my answers by just putting the right search query in. For right now, I'm not even sure I am looking towards the right direction and how possible is what I'm wanting to do..

Sadly, we do not really have a senior enough FE engineer in the team I could talk to.

The problem: my company wants to build a widget that they would be able to share with our 3rd party partners - basically give them a JS code snippet / HTML they would embed on their website and have it branded in their ways + for them to have some control to configure that widget. Just the way e. g. Intercom (or other help / support chats work when you want to integrate with them). So what you share is a JS (and maybe a CSS file) from your CDN + some code to embed on their website, needs to be platform-agnostic.

That's why the solution I came up with, was build a custom web / HTML component, having like a custom tag with some custom attributes like <my-component my-attribute1="" my-attribute2="" ... > bundled into a plain / vanilla JS file we could share with them.

Our current website (and the functionality we'd like to reuse this way) is built in React + NextJS. Am I on the right path / is it even possible that we wrap what we currently have (JSX React Component) in this custom HTML element and bundle it into a JS we could give to them?

I've gone through tons of online articles and even tried things in the sandbox, one thing I still cannot get right is - will they need to still reference React resources, how do I make it a separate / distributable bundle which is relatively small (we are using nextJS build + webpack), has someone ever done a thing like that before, what issues did they face and was it even worth it?

Another option is embed it all in an iframe referencing our URL with that functionality on a partner's website, which could be ugly, much less customisable + a whole bunch of security concerns...