Swap Widget

You can add the Mayan cross-chain swap widget to your website by including a few lines of code: (example: buybonk.com)

 <script src="https://cdn.mayan.finance/widget/1_8_0/main.js"
  integrity="sha256-csokBs9wUf3aZCKTR7/XXElwXugjzCQeUygLmN+/Y7Y="
  defer
  crossorigin="anonymous"
  onload="initMayanWidget()"></script>
<script>
  const mayanConfigs = {
    "appIdentity": {
      "uri": "https://example.finance",
      "icon": "",
      "name": "Mayan Widget"
    },
    "setDefaultToken": true
  };
  function initMayanWidget() {
    const container = 'WIDGET_ROOT' // element id or DOM element
    document.addEventListener('DOMContentLoaded', function() {
      MayanSwap.init(container, mayanConfigs);
    })
  }
</script>

That’s it! You now have a fully-functional bridge on your website. We provide a dashboard where you can fully customize your widget, including:

Supported chains and token lists.
Referrer fees and referrer addresses for monetization.
Colors and overall appearance of the widget.
And more.

Please visit the Mayan widget builder: https://widget.mayan.finance.

Mayan widget builder dashboard

Full Example

For a full example of the integration, you can check the source code of buybonk.com on GitHub. This repository provides a comprehensive example of how to integrate the Mayan Swap Widget into a project.