Embeddable Swap Widget

On this page you can get started using the Fanbase Embeddable Widgets for Pure and Aggregate ERC1155-ERC20 and ERC20-ERC20 swaps. A plan is required to install this widget: https://www.plan.fanbase.io

Fanbase supports embeddable swap widgets for non npm-based web development and no-code platforms. The iframe widget can be used on Content Management Systems (CMS)-- services like Wix, Wordpress and Webflow. Choose the 'Pure' version if speed matters, and you want to quickly query Fanbase Swap pools, or choose the 'Aggregate' version to compare prices across the decentralized web.

What is an Embeddable Widget?

An embeddable widget is a tool that can be embedded into a webpage or application using an iframe element. An iframe (short for inline frame) is an HTML element that allows you to embed another HTML document within the current document. This means that you can display content from another website or source within your own webpage or application.

Iframes are commonly used to embed videos, maps, calendars, social media feeds, and other types of content into webpages. By using an iframe, you can seamlessly display the content of the embedded widget within your own site, without the need for complex integration or coding.

To embed an iframe widget, you typically need to obtain the code provided by the widget provider. This code usually consists of an iframe element with specific attributes, such as the source URL of the widget content and the desired dimensions of the iframe. By copying and pasting the following code into your webpage or application, you can embed the widget and display its content to your users.

How to use Fanbase Embeddable Widget?

  1. Use with HTML front-end.

<!DOCTYPE html>
<html>
    <body>
        <-- Embeddable Swap Widget -->
        <iframe src="https://embedswap.fanbase.io/pure20-swap" width="500" height="600" style="border:none; border-radius: 10px" title="Embeddable Widget Example"></iframe>
    </body>
</html>

  1. Use with CMS platforms To embed the widget on a CMS website, reference these guides. Wix: https://support.wix.com/en/article/wix-editor-embedding-a-site-or-a-widget Wordpress: https://wordpress.org/plugins/wp-embed-widgets/ Webflow: https://university.webflow.com/lesson/custom-code-embed?topics=elements

  2. Widget render options Base Url: https://embedswap.fanbase.io/ Aggregate Token Exchange Widget: /agg20-swap Aggregation NFT Exchange Widget: /agg1155-swap Pure Token Exchange Widget: /pure20-swap Pure NFT Exchange Widget: /pure1155-swap

  3. Widget size options width, height /agg20-swap?width=500%&height=600dvh Widget size can be set by any unit such as %, px, vh, and vw. * Widget height option works with only vh and dvh

  4. NFT swap additional render option cover_view /agg1155-swap?cover_view=list | carousel With this option, the widget first renders the NFT explorer in carousel/list mode rather than swap mode. cover_view options must be one in list and carousel. Without passing this option via URL, the widget first renders the swap mode.

  5. API key and user roles to avoid "Invalid Access Key" error api_key /agg20-swap?api_key=0x00 This option passes the API key to the widget server to verify the user's API key and role. sup_domain /agg20-swap?sup_domain=user.example.com This option passes the user's domain to the widget server to verify the domain and allow access. This option must be used with the api_keyoption to access the widget and avoid "Invalid Access Key" error. chain_id /agg20-swap?chain_id=56 This option passes the network where the user created a plan (to verify he "paid"). It gets an API key to verify the API key. This value is displayed for the user in the "Manage Plan" section of https://www.plan.fanbase.io. Problem? Find a list of network values at https://chainlist.org/ where BSC is "chainID= 56", for example. This option must be used with the api_keyoption to access the widget and avoid "Invalid Access Key" error. buy_token /agg20-swap?buy_token=0x00 This option pegs one token on the widget and blocks all other transactions, except those involving the native token. Replace 0x00 with the full token address, to force transactions to involve the selected token as sender or receiver. This option is generally used for organizations wishing to distribute their own token from their own website. Delete this entire line of code if you want to sell all tokens.

PreviousStaking Widget SDKNextEmbeddable Staking Widget

Last updated