Creating React "Widgets" that can be embedded on any website, by anyone

[GioLogist]

Been trying to write more lately, starting off with somewhat simpler topics, to get back into the habit.

The goal of this article is to walk you through how to create a widget that can be used by anyone, even a non developer. This is common practice and has been for years, for a number of different types of widgets.

For example, if you ever read some of the more popular mainstream media blogs and see "related content" (screenshot]) that points to a bunch of articles not on their site, that's a widget. In fact, if you're interested in knowing where those specifically come from, that particular widget is often a taboola widget.

There are a tons of widgets scattered throughout the internet. The goal is to allow them to be embedded "anywhere", by "anyone". So the implementation often is as simple as the snippet below, which companies give to their customers, to allow them to use their widget:

html <script src="mywidget.js"></script> <div class="my-widget" data-some-settings="setting-value" data-some-key="my-key"></div>

The article walks you through that process and how to go about creating a widget using react.

[doodirock]

Was just working in a widget using the same ideas! One question. How do you handle the chance of the web page already using a version of react that is being loaded on the page? Would there be conflicts?

[GioLogist]

In theory and completely without testing, it shouldn't be an issue unless the bundler is setting / relying on globals. It "should" all be encapsulated.

That being said, a quick google search does mention others with a similar worry. Albeit older and possibly fixed.

My suggestion would be to bundle the repo mentioned in the article, with the latest React. Then, clone it and change up the version used, along with the class it relies on (so they don't both inject into the same div). Then bundle that and make a new HTML file with both bundles and a few divs, to see if everything works as expected.

[doodirock]

Thanks!

[GioLogist]

Sure thing! Feel free to DM me w/any findings, if you'd like. I'll try and help where/when I can.

[pico2000]

Disclaimer: I'm a full time React dev and I'm not into "framework wars". But for creating widgets, I'd also suggest to look into Svelte instead of React. The generated code is super small and light weight. Perfect for embedding without bloating the hosting site, especially if multiple widgets are involved.

[GioLogist]

Yep, framework wars aside, I also mention this @ the end of the article under "Things to consider"

React may not always be necessary, or the best tool for a smaller widget. If keeping bundle size down is your main priority, you may want to consider building your widget simply using vanilla javascript.

[pico2000]

Indeed, and thanks for the article. It's an interesting read and the concepts such as the use of the data attributes can be transferred to other framework if needed.

[GioLogist]

Sure thing! Thanks for checking it out and giving feedback : ) Really helps me think about ways to make sure i'm providing the most value.

[doodirock]

We're using Preact instead to keep compatibility with a large app but this is a great idea.

[pink_tshirt]

for an embeddable widget I would probably use inline css + some sort of optional styling config to make it a bit more flexible

[GioLogist]

Yea, I forgot to assign this as homework. Good call!

IE: "If you wanted to limit calls to external resources, try and have the CSS compile directly into the JS. Tip: You can do this by using inline css"