VanillaJs Installation

VanillaJs library enables developers from other UI frameworks or libraries to integrate with Native Widget. There's a drawback to doing this because you need to import React and ReactDOM bundle which adds an overhead in your application.

Usage

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- react 18-->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script defer src="https://static.native.org/widget/1.0.6.js"></script>
    <title>Vanilla Js Demo</title>
  </head>
  <body>
    <div id="ntv-swap-widget"></div>
  </body>
  <script defer>
    document.addEventListener("DOMContentLoaded", function () {
      const root = ReactDOM.createRoot(
        document.getElementById("ntv-swap-widget")
      );
      root.render(
        React.createElement(NativeWidget.default, {
          apiKey: "API_KEY",
        })
      );
    });
  </script>
</html>

To install the widget you need an API key. Please follow these steps to acquire one.

Customization

Follow the Customisation Guide to customize your widget such as theme, supported chains, external wallet provider, etc.

PreviousVueJS InstallationNextIframe Installation

Last updated