Crypto Exchange Widget

CrowdSwap Crypto exchange widget is a convenient and profitable way to offer your users access to the world of cryptocurrencies. By adding our widget to your site, you can keep your users in your site and earn profit out of every transaction. Our widget is easy to install, secure, and customizable to suit your needs.

How do you profit from crypto exchange widget? đź’°

By adding our exchange widget to your website, you can get a share of 0.4% fee from every transaction

Create Affiliate ID
Earn commission from user transactions with your Widget’s affiliate ID. Learn more here.
Integrate widget
Add the Crypto Exchange Widget codes into your site
Marketing and promotion
grow your site and attract new users, you need effective marketing strategies.
Review Incomes
The swap widget will boost your site’s revenue and let you enjoy the fruits of your work.

Our Crypto Exchange Features

With a simple yet complete design swap widget has it all.

User friendly interface

Users can easily exchange crypto assets with a few clicks on the intuitive and simple interface of Crowdswap.

Easy and fast crypto exchange

Users can exchange their crypto assets in seconds with low fees and high speed on Crowdswap. No registration or KYC required.

Earn referral commission​

You can earn a percentage of the fees generated by your referrals, creating a passive income stream for yourself.

Customizable

You can customize the look and feel of the widget to match your brand and preferences.

Great exchange routes

You can access the best exchange rates and liquidity across multiple platforms, such as Uniswap, PancakeSwap, SushiSwap and more.

Cross-chain exchange over 7 networks

You have access to different blockchains, such as Ethereum, Binance Smart Chain, Polygon, Avalanche, Zksync, Arbitrum and Optimism.

Online support team

You can contact the online support team of Crowdswap anytime if you have any questions or issues with your swaps. They are ready to help you 24/7.

Free and up to date

Crowdswap widget is free to use and always up to date with the latest developments and innovations in the crypto space.

Who can use the crypto exchange API and Widget?

 DApps can use the widget to provide users with an easy way to purchase or swap tokens.

NFT platforms can use the widget to allow users to purchase tokens needed to buy NFTs.

Wallets can use the exchange API to allow users to swap or purchase tokens easily.
 

Games can use the widget to allow players to purchase in-game tokens.

Metaverse projects can use the widget to allow users to purchase land or other assets.

DAO (Decentralized Autonomous Organizations) can use the widget to allow members to purchase tokens needed to participate in the DAO.

Many projects are already earning with our widget.

Don't wait; start earning NOW!

How to use the swap widget in my business

You can master our widget in simply four steps

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.

				
					<crowdswap-swap-widget
  id="crowdswapWidget"
  config='{
    "fromTokenAddress":"0x0000000000000000000000000000000000001010",
    "fromChainId":137,
    "toTokenAddress":"0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
    "toChainId":56,
    "theme":"light",
    "affiliateId":"your affiliate Id"
}'></crowdswap-swap-widget>
				
			

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:

				
					<script data-minify="1" src="https://crowdswap.org/wp-content/cache/min/1/loadAssets.js?ver=1707320715" defer></script>
				
			

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)

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.

				
					.app-splash-screen {
    display: none !important;
}
				
			

Next, create your splash loading within an HTML tag with the given ID (below), so that the functions can work properly:

				
					<div id="splash-div"></div>
				
			
Step One
Step Two
Step Three
Step Four

Supported technologies 🤟

				
					<!--app.module.ts-->

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

<!--app.component.html-->

<crowdswap-swap-widget
  config='{
  "fromTokenAddress":"0x8595F9dA7b868b1822194fAEd312235E43007b49",
  "fromChainId":56,
  "toTokenAddress":"0x514910771AF9Ca656af840dff83E8264EcF986CA",
  "toChainId":21,
  "theme":"light"
  }'
>
</crowdswap-swap-widget>

<!--index.html-->

<!DOCTYPE html>
<html lang="en">
  <head>
    
    <title>Use CrowdSwap Widget</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link data-minify="1"
      rel="stylesheet"
      href="https://crowdswap.org/wp-content/cache/min/1/crowdswap-widget.css?ver=1707376138"
    />
  </head>
  <body>
    <app-root></app-root>

    <script data-minify="1" src="https://crowdswap.org/wp-content/cache/min/1/crowdswap-widget.js?ver=1707320717" defer></script>
  <script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
				
			
				
					<!DOCTYPE html>
<html lang="en">
  <head>
    
    <title>Use CrowdSwap Widget</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link data-minify="1"
      rel="stylesheet"
      href="https://crowdswap.org/wp-content/cache/min/1/crowdswap-widget.css?ver=1707376138"
    />
  </head>
  <body>
    <crowdswap-swap-widget
      config='{
        "fromTokenAddress":"0x8595F9dA7b868b1822194fAEd312235E43007b49",
        "fromChainId":56,
        "toTokenAddress":"0x514910771AF9Ca656af840dff83E8264EcF986CA",
        "toChainId":21,
        "theme":"light"
      }'
    >
    </crowdswap-swap-widget>

    <script data-minify="1" src="https://crowdswap.org/wp-content/cache/min/1/crowdswap-widget.js?ver=1707320717" defer></script>
  </body>
</html>

				
			
				
					import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));

const script = document.createElement('script');
script.src = 'https://95c689e6.crowdswap-widget.pages.dev/loadAssets.js';
document.body.appendChild(script);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

				
			
				
					// Get the input field
var input = document.getElementById("myInput");

// Execute a function when the user presses a key on the keyboard
input.addEventListener("keypress", function(event) {
  // If the user presses the "Enter" key on the keyboard
  if (event.key === "Enter") {
    // Cancel the default action, if needed
    event.preventDefault();
    // Trigger the button element with a click
    document.getElementById("myBtn").click();
  }
});
				
			

No Matter how your website is coded, we have different solution for you

Computer Man
Computer Man
Computer Man
Computer Man
Computer Man
Computer Man
Computer Man
Computer Man
Computer Man
Computer Man
Computer Man
Computer Man
Computer Man
Computer Man
Computer Man
Computer Man

Crypto Exchange Widget Supported Networks

Avalanche
BSC
Ethereum
Polygon
Arbitrum
Arbitrum
Optimism

Our swap widget partners

We are very grateful for your support

Frequently Asked Questions

A crypto exchange widget is a feature that can be integrated into any website, platform, or browser. Once combined, the widget allows users to trade crypto assets seamlessly without ever leaving the site. CrowdSwap exchange widget is a fully customizable tool that provides online cryptocurrency exchange services to clients at the best exchange rates.

For example, CrowdSwap widgets allow users to swap cryptocurrencies, and the host platform can profit from each exchange. Also, provide real-time prices for any cryptocurrency on seven blockchain. The exchange widget enhances the user experience and offers convenient access to cryptocurrency transactions.

An exchange widget and an exchange API are both tools that allow interaction with a cryptocurrency exchange, but they serve different purposes and are used in different contexts:

  • Exchange Widget: This user-friendly tool can be embedded on a website or platform. It allows users to perform actions like buying, selling, or trading cryptocurrencies directly on the site where the widget is installed. It’s designed to provide a seamless user experience and doesn’t require technical knowledge.
  • Exchange API: This stands for Application Programming Interface. It’s a set of rules and protocols that allows one software application to interact with another. In the context of a crypto exchange, an API allows developers to build applications that can interact with the exchange, enabling actions like querying market data, placing trades, or managing accounts. It requires technical knowledge and is typically used to build more complex applications or services.

CrowdSwap provides both a crypto exchange widget and crypto exchange API.

An affiliate ID is a unique identifier assigned to an affiliate in an affiliate marketing program. This ID tracks the affiliate’s activities, such as promoting a merchant’s products, to calculate the commission they should receive. It’s often used in the URL of affiliate links to track which affiliate referred a customer.

Having an affiliate ID in the exchange widget can be beneficial for several reasons:

  • Track Performance: Each time you add a new widget or product, it also receives its unique Affiliate ID, allowing you to measure which widgets perform best.
  • Earn Commissions: Every exchange transaction on your website or app with your Affiliate ID included in the URL is allocated to your account, and you will receive a commission for it.