Embeddable Widgets to Bring Web3 Experience to Any Website
Tags: web3, widgets, product, api
Published: 2023-07-18 01:16:50

Recently, while building a DeFi wallet, I discovered a range of embeddable widgets from various Web3 projects. These widgets provide an effortless means to incorporate Web3 functionalities into any website, regardless of whether it belongs to the Web2 or Web3 world. In this article, I will explore some of the solutions offered by different Web3 projects that can be easily embedded as widgets, bringing the benefits of Web3 to any website, while also providing monetization opportunities through commission-based model.

## Uniswap Widget
Uniswap, a leading decentralized exchange (DEX), has introduced an embeddable widget that enables users to trade tokens directly from any website. This widget provides seamless access to Uniswap's liquidity pools, allowing website visitors to trade cryptocurrencies without the need to navigate to the Uniswap platform. The Uniswap widget empowers developers to integrate decentralized token trading into their websites, creating new opportunities for e-commerce and online marketplaces. The widget can be added just with a few lines of code:
```javascript
import { SwapWidget } from '@uniswap/widgets'
import '@uniswap/widgets/fonts.css'

function App() {
  <div className="Uniswap">
    <SwapWidget />
  </div>
}
```

GitHub demo: [https://github.com/Uniswap/widgets-demo](https://github.com/Uniswap/widgets-demo)
Docs: [https://docs.uniswap.org/sdk/swap-widget/guides/getting-started](https://docs.uniswap.org/sdk/swap-widget/guides/getting-started)

---

## deSwap Widget from deBridge
Cross-chain alternative to Uniswap from deBridge. A plug-and-play solution for Web3 projects looking to offer users capital-efficient and secure cross-chain interactions, via a user-friendly interface. The Widget can power frictionless cross-chain experiences for your users, such as a cross-chain swap + smart contract interaction in a single transaction. Under the hood, deSwap API will power seamless trades between tokens and chains right from within your app or website, unlocking an additional revenue stream with just a few lines of code.

![screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eylfztti1x5f0ix41gn4.png)

Build a widget: https://app.debridge.finance/widget
Docs: https://docs.debridge.finance/cross-chain-trading/deswap-widget

---

## On-ramp and Off-ramp Widgets
An on-ramp widget acts as a gateway, allowing users to easily exchange fiat money for digital assets, making it the first step for many individuals into the crypto space. These widgets provide a user-friendly experience, supporting various payment methods and enabling seamless integration into websites. Similarly, off-ramp widgets offer the reverse functionality, allowing cryptocurrency holders to convert their digital assets back into fiat currency or other goods and services effortlessly.

Platforms offering the seamless integration of on-ramp and off-ramp widgets: [Moonpay](https://www.moonpay.com/buy), [Ramp.network](https://ramp.network/), [Onramper](https://www.onramper.com/try), [Mercuryo](https://mercuryo.io/widget/) and [Kado](https://www.kado.money/).

![screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/se43p042724mnzfyfvoy.png)

---

## ECHO Commenting Widget

[ECHO](https://0xecho.com/) is a decentralized social engagement protocol based on Arweave, introducing the first Web3 comment widget with permanent data storage embeddable on any website. This widget enables users to express themselves in a decentralized, permissionless, and censorship-resistant environment.

Alongside the comment widget, ECHO offers Reactions and Tips widgets. The Reactions widget allows users to show their approval or liking for content on websites. With the Tips widget, you can accept support and contributions(tips) from your website visitors.

![screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k11fpa6kqkfivhqjzipy.png)

---

## Crypto prices Widget

These widgets display real-time cryptocurrency prices and provide valuable data on market capitalization, trading volumes, and price movements. Several reputable platforms offer embeddable crypto prices widgets that can easily be integrated into websites. Binance, CoinGecko, Crypto.com provide a comprehensive widget that displays cryptocurrency prices and other essential market data. The widget can be customized to match the website's design, ensuring a seamless user experience.

![screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ga0rj624chns68bv291.png)
```html
<script src="https://widgets.coingecko.com/coingecko-coin-market-ticker-list-widget.js">
</script>
<coingecko-coin-market-ticker-list-widget  coin-id="kujira" currency="usd" locale="en">
</coingecko-coin-market-ticker-list-widget>
```
![screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwbw0u71licnriyp5q1j.png)

---

As Web3 continues to evolve, we can expect to see even more innovative embeddable solutions that bridge the gap between Web2 and Web3, enabling a seamless integration of decentralized technologies into the mainstream web, just like embedding a YouTube video. Website owners can earn commissions on transactions facilitated through the widgets. This opens up new revenue streams and incentivizes the adoption of Web3 technologies. I would love to hear about your experiences of navigating and building in Web3.