Building an embeddable Widget

In the article Creating a Powerful Pix Checkout with Woovi Plugin and HTML, CSS and Js we learn how to use the Woovi widget in another website.

In this article, we are going to learn how to build that Embeddable Widget.

What is an Embeddable Widget?

An Embeddable Widget is a piece of frontend that you can put into another website.

You add a script tag to your application

<script src="https://plugin.woovi.com/v1/woovi.js" async>

And this JavaScript will do something on your website.

You could also use an iframe to embed from websites directly to yours, but not as powerful as using custom JavaScript code.

A React Embeddable Widget

We are going to use React in our example, but this applies to any other frontend framework.

The first thing your Widget needs to do is to find a place to inject your React app.

const initWidget = () => {
  // <div id='woovi-order' data-appid={config.WOOVI_APP_ID} data-paymentlinkid={paymentLinkID} />
  const defaultOrderNodeWoovi = 'woovi-order';

  const wooviHostNodes = document.querySelectorAll(
    `#${defaultOrderNodeWoovi}`,
  );

  const [hostNode] = wooviHostNodes;

  const root = createRoot(hostNode);

  root.render(<Widget />);
}

In the code above we expect to find one div with id woovi-order, so we can render our React App Widget.

If you were expecting a much more complicated code, I'm sorry, but that's it. As simple as that.

In Conclusion

Does your product have an embeddable widget? What use cases do you think in building an embeddable widget?
We like our Woovi Plugin (our embeddable widget) because it reduces a lot the cost of our customers to integrate payments into their websites and products. We take it off all the complexity of the design of the frontend and real-time over WebSockets.
They get all that for free with just a few lines of code.

---

Woovi
Woovi is a Startup that enables shoppers to pay as they like. Woovi provides instant payment solutions for merchants to accept orders to make this possible.

If you want to work with us, we are hiring!

---

Image by pikisuperstar on Freepik