Swap Integration
Swap component for integration on any website
We created a component, which is easy to integrate & customize, for use with any website. This allows developers to directly allow swapping of either a selected token or all tokens directly on their site.
Tutorial
Configure to your liking on the right or bottom of the page
Copy the generated code (placed below the configuration) into your clipboard
And paste it at the corresponding location in your html file
You are done! 🥳
Configuration
Select Base Token / Select Quote Token: Change the tokens which will be selected after load. Be careful: prices will be quoted in the base token and not in the quote token.
Auto Connect to Last Wallet: Automatically reconnect to the last wallet connector used inside the iframe. This option is not intended to be used in combination with selective auto connecting.
Theme: Let either the website determine the theme (Detect) through the system preferences or force the usage of a certain theme (Dark / Light). In the future more options will be added here.
Hide Background: Makes the background of the iframe see-through to make it easier to cleanly integrate
Tight Layout: If enabled this option will remove all surrounding paddings and margins of the iframe. This e.g. can be used to stretch the swap modal to the borders of the iframe.
Use Recommended Size: This will set the recommended minimum width and height. We do not recommend going below these defaults.
Height / Width: Make sure to hardcode your width and size here, these arguments will be processed internally. Therefore you should not change the iframe width and height manually!
Advanced Configuration
You can automatically connect to any (injected) wallet of your choosing by passing the key to a CIP-30 compliant object in window.cardano as the first argument. See the explanatory text in the second script element for more details. This should not be used in combination with the Auto Connect to Last Wallet option.
To integrate in any framework, please look into how to import and use external javascript files in your framework. Please refrain from downloading and storing the embed.js file locally, in case we ever update or change the internally used interface.
Last updated
