DEV Community

Cover image for Building an embeddable Widget
Sibelius Seraphini for Woovi

Posted on

10

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>
Enter fullscreen mode Exit fullscreen mode

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 />);
}
Enter fullscreen mode Exit fullscreen mode

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay