Swap Widget
The CrowdSwap Swap Widget is a versatile tool that seamlessly integrates with other applications, providing users with a powerful and user-friendly decentralized finance (DeFi) experience. This innovative widget allows users to access and interact with decentralized exchanges, swapping functionalities, and cross-chain ability directly from their favorite apps.
Integrating the CrowdSwap Swap Widget into your project is a straightforward process that brings the power of cross-chain swaps to your application. By utilizing the standalone component approach, you can seamlessly embed the widget's functionality without requiring extensive technical know-how.
Here is how you can do it in just a few steps:
Include Resources
In your HTML file's section, place the widget's HTML tag. Customize the configurations like fromTokenAddress, fromChainId, toTokenAddress, toChainId, and theme to match your requirements. Finally, include the widget's JavaScript file at the end of the section. This file will load the widget's assets and make it interactive on your webpage.
Following these simple steps, you can seamlessly integrate the CrowdSwap Swap Widget into your project, enabling your users to engage in cross-chain swaps easily. This approach ensures that your application benefits from advanced functionality without the complexities of building it from scratch.
A step-by-step guide to integrating the CrowdSwap Swap Widget into your project
Add the Widget Element
In your HTML file's <body> section, add the <crowdswap-swap-widget> element to embed the CrowdSwap Swap Widget. This element will include the configuration parameters for the widget.
fromTokenAddress
default from token for first time visitors
fromChainId
default network that will be looked up for from token address
toTokenAddress
default to token for first time visitors
toChainId
default network that will be looked up for to token address
theme
can be light or dark. This will make the widget's look light or dark
affiliateId
your Affiliate IDs
By using the affiliate ID key, you will earn commission whenever any user registers and trades through your website. This commission is usually calculated based on the trading volume. By using an affiliate ID, CrowdSwap can track your performance and deposit earned commission amount into your account.
Make sure to replace the fromTokenAddress, fromChainId, toTokenAddress, and toChainId values with the appropriate token addresses and chain IDs.
Include the Widget Script
At the end of the <body> section, include the widget's script just before the closing </body> tag. This script will initialize and render the widget:
Test and Verify
Save your HTML file and open it in a web browser. You should see the CrowdSwap Swap Widget, and users can interact with it to perform swaps.
Custom Splash Loading (Optional)
To customize the splash loading, start by adding the CSS code snippet to your CSS file:
Next, create your splash loading within an HTML tag with the given ID (below), so that the functions can work properly:
Using this easy step-by-step guide, you can integrate the CrowdSwap Swap Widget into your project and bring the power of cross-chain swaps to your business and application.
Last updated
Was this helpful?