Links
🔃

Swap Widget

XDEFI Swap Widget Integration Instructions

Overview

This documentation provides instructions for web developers to seamlessly integrate our swap widget into their webpages using an iframe.

Prerequisites

Before integrating the widget, ensure that you have the following:
  • Access to the HTML of the page you will be adding the widget to
  • Your referral codes generated and accessible.

Instructions

Adding the swap widget is really simple. Just add the following iframe code to the HTML of your webpage where you want the widget to appear. Remember to replace the placeholder with your referral code.
<iframe
src="https://widget-xdefi.netlify.app/?widget=true&referral=YOUR_REFERRAL_CODE"
width="500px"
height="700px"
frameborder="0"
style="border: none"
></iframe>

Configuration

You can configure the width and height of the widget to fit your page content by adjusting the width and height parameters in the iframe tag.

Widget appearance customization

Dark and Light Color Modes

Our widget includes built-in dark and light color modes for versatility in different visual contexts. The default setting is dark mode. The images below demonstrate the widget in both the prebuilt dark and light modes.
Prebuilt light mode
Prebuilt dark mode

Color Mode Configuration

To select a color mode, you need to pass the mode parameter as a URL query parameter. The mode parameter accepts two values: light or dark. If any other value is attempted, the widget will default to dark mode.
Color mode configuration example
<iframe
src="https://widget-xdefi.netlify.app/?widget=true&mode=light"
width="500px"
height="700px"
frameborder="0"
style="border: none"
></iframe>

Primary Color Customization

The widget also provides the option to customize the primary color, allowing it to better align with your brand's color scheme. To set the widget's primary color, use the primaryColor query parameter must be passed. This parameter should contain the HEX color code, omitting the leading '#' symbol. For example, use "FF0000" instead of "#FF0000". The example below shows how to set the widget's primary color to red.
<iframe
src="https://widget-xdefi.netlify.app/?widget=true&primaryColor=FF0000"
width="500px"
height="700px"
frameborder="0"
style="border: none"
></iframe>
The subsequent images display the primary color set to red in both light and dark modes.
Red as primary, light mode
Red as primary, dark mode
XDEFI Technologies 2024