Marswap Aggregator Step by step guide to set up the Marswap Aggregator Widget
Modular Projects
If you are using modular frameworks like React follow the below steps to get started.
Installation
Install the widget using npm
Copy npm install --save @marswap-exchange/widget or yarn
Copy yarn add @marswap-exchange/widget Import Widget
Copy import { MarswapWidget } from '@marswap-exchange/widget'; Quick Start
Below is the minimum setup code for the widget to get you started.
Copy //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.
Copy <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
Copy <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.
Copy <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
Copy <!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> 