🔸Setup

Step by step guide to set up the Marswap Aggregator Widget

Remember to grab your API Key and Integrator ID from the Marswap Team.

Modular Projects

If you are using modular frameworks like React follow the below steps to get started.

Installation

Install the widget using npm

npm install --save @marswap-exchange/widget

or yarn

yarn add @marswap-exchange/widget

Import Widget

import { MarswapWidget } from '@marswap-exchange/widget';

Quick Start

Below is the minimum setup code for the widget to get you started. 

//SwapWidget.tsx

import { MarswapWidget } from '@marswap-exchange/widget';

export const SwapWidget = () => {
  return (
    <MarswapWidget 
      apiKey={'4b5f885c-b764-4160-95f4-00ceb5124abb'} //Example API Key
      integration={
        {
          id: 'test-widget'
        }
      }
    />
  );
};

HTML and JavaScript

If you are using plain HTML with JavaScript follow the below steps to get started.

Import Widget

The Marswap Aggregator Widget can be imported using CDN or equivalent scripts like so.

<script src="https://cdn.jsdelivr.net/npm/@marswap-exchange/widget@latest/bundles/marswap-widget.min.js" type="text/javascript"></script>

Create Widget Container

Place an HTML element within the <body> tags of the code and set the id to marswap-widget

<div id="marswap-widget"></div>

Initialise the Widget

Load the widget using JavaScript with the InitMarswapWidget() function.

Set the widgetElementId inside the function to marswap-widget. This tells the code to render the Marswap Aggregator Widget inside the HTML element called marswap-widget.

<script>
    window.onload = () => {
    InitMarswapWidget({widgetElementId: 'marswap-widget'}, {
        integration: {
            id: 'test-widget'
        },
        apiKey: '4b5f885c-b764-4160-95f4-00ceb5124abb' //Example API Key
    })}
</script>

Quick Start

Below is the minimum setup code for the widget to get you started

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Marswap Aggregator Widget</title>
        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    </head>
    <body>    
        <div id="marswap-widget"></div>        
        <script src="https://cdn.jsdelivr.net/npm/@marswap-exchange/widget@latest/bundles/marswap-widget.min.js" type="text/javascript"></script>
        <script>
            window.onload = () => {
            InitMarswapWidget({widgetElementId: 'marswap-widget'}, {
                integration: {
                    id: 'test-widget'
                },
                apiKey: '4b5f885c-b764-4160-95f4-00ceb5124abb' //Example API Key
            })}
        </script>
    </body>
</html>

Head to the next section of the documentation to learn how to configure your new Marswap Aggregator Widget.

PreviousAuthenticationNextConfiguration

Last updated