Frontend integration

Integrate Mooni into your app

Mooni widget allows to quickly add Mooni into any web app in minutes.

The widget can either appear as a modal on top of an app, or included inside an HTML element.

If the hosting app already has a connected user with web3, this wallet can be forwarded to the widget.

🎁 Quick start


yarn add @mooni/widget

NPM package

Start widget

// Import package
import MooniWidget from '@mooni/widget';
// Instanciate the widget
const mooni = new MooniWidget();
// Open the widget as a modal when you want it;

📺 Example apps

An example app including Mooni widget have been published to let you try it out, or check the code.

🎛 Reference


  • new MooniWidget(options = {})

    Instanciate a Mooni widget.

options.containerElement: Include Mooni inside of an HTML element on your website. If not set, the widget will appear as a modal.

options.web3Provider: Use your own connected web3 provider.

options.token: Add a custom token to the list of input currencies. This must be the address of the contract and the token must be available on Uniswap.

If used as a modal:


    Opens the Mooni widget modal.

  • mooni.close()

    Closes the Mooni widget modal. Not mandatory, a button is present to enable the user to close it.

Additional information

Import on different module systems

  • ES6

import MooniWidget from '@mooni/widget';

  • CommonJS

const MooniWidget = require('@mooni/widget');

  • UMD

<script src=""></script>