Skip to main content

💻 InitPolyswapApp

If you are using plain HTML or any other Non-React Framework for your website, you can import our script to use the widget. If you are using a bundler like Webpack, you can import the InitPolyswapApp function from @polyswapai/widget package.

Setup​

1. Import @polyswapai/widget script. You can change @latest tag to any version.

<script src="https://cdn.jsdelivr.net/npm/@polyswapai/widget@latest/bundles/polyswap-app.min.js"></script>

2. Define the container element.

<div id="polyswap-root" style="min-height:420px"></div>

3. Call InitPolyswapApp or window.InitPolyswapApp to initiate the widget. You can call it again to change any configs like toggling between dark and light modes. You have to wrap the function in window.onload event function if this script is place before the container element.

Replace "polyswap-whitelabel" with a string to identify your project e.g. your-project-name

InitPolyswapApp("polyswap-root", {
  marketer: "polyswap-whitelabel"
});

Summary​

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Polyswap Widget Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/@polyswapai/widget@latest/bundles/polyswap-app.min.js"></script>
    <script>
      window.onload = () => {        
        InitPolyswapApp("polyswap-root", {
          marketer: "polyswap-whitelabel"
        });
      };
    </script>
  </head>
  <body>
    <div id="polyswap-root" style="min-height:420px"></div>
  </body>
</html>

Once you've done that, check out the implementation walkthrough to learn how to customize your widget.