▪️iFrame

What is an iFrame

An inline frame or iframe is a HTML element that loads another HTML page within a parent page. Consider it somewhat like a 'window' on your webpage displaying another webpage within it. In our case, the 'window' showcases the Houdini Swap widget, which allows your users to utilize our services without leaving your site. It also automatically adds your Account ID to identify and apportion your revenue share earned on all transactions that originate from your iframe.

---

Step-by-Step Integration

Step 1 - Inert the HTML Code

To embed the HoudiniSwap widget on your webpage, copy and paste the code snippet below:

<div id="houdiniSwap">
    <iframe class="iframe" 
            src="https://houdiniswap.com/?widgetMode=true
                 &theme=dark
                 &tokenIn=ETH&tokenOut=ETH
                 &amount=1
                 &anonymous=true
                 &partnerId=[INSERT KEY]
                 &accountId=[INSERT TO EARN COMMISSION]
                 &tokenLockOut=false">
    </iframe>
</div>

---

Parameters Explained

• theme: Adjust the theme by selecting "dark" or "light". Modify the iframe background in css to #333 for theme=dark and white for theme=light.

• tokenIn & tokenOut: Preset the default trading pair. A comprehensive list of tokens is here.

• Here is a list of the most common tokens.

Tokens	Tokens	Tokens	Tokens	Tokens
LOCK	ETH	BNB	BTC	XMR
ARB	ETHBASE	MATIC	OP	TRP
USDC	USDT	XRP

• amount: Decide on a preset amount of tokenIn. You can input any number here.

• anonymous: Choose between "true" or "false" based on default anonymity preferences. False is most commonly used when bridging/swapping is the core purpose.

• partnerId: Replace [INSERT KEY]with your unique key. To apply for a key, please contact us via Partnership Enquiries.

• accountId: Optionally, input your Referral ID to earn your revenue share. If you haven't yet set up your account please contact us via Partnership Enquiries.

▪️pagePartnership Enquiries

• receiveAddress: Ensure the address corresponding to tokenOut is valid

• tokenLockOut: Select either "true" or "false". True will restrict users from modifying the chosen tokenOut. This is commonly used for protocols implementing a cross-chain swapping solution specifically for their token.

---

Step 2 - Style the iFrame

To have the HoudiniSwap widget fit with your website design theme, we recommend integrating the following CSS styles:

<style>
    #houdiniSwap {
        display: flex;
        justify-content: center; /* centers iframe horizontally */
        padding: 20px;           /* optional, adds space around the iframe */
    }

    #houdiniSwap iframe {
        width: 100%;
        max-width: 1050px;       
        height: 90vh;            /* set the height relative to the viewport height */
        max-height: 1050px;
        background: #333;     /* background for dark theme, "white" for theme=light */
        border: solid 3px #444;  /* darker border for 3D effect */
        border-bottom: 5px solid #222;  /* 3D appearance */
        border-right: 5px solid #222;   /* 3D appearance */
        box-shadow: 
            inset 1px 1px 5px #555,     /* internal shadow */
            0 4px 15px rgba(0, 0, 0, 0.4);  /* external shadow */
        border-radius: 6px;     /* border curve */
        transition: all 0.3s ease;
        overflow: hidden;       /* ensures content doesn't spill out of iframe */
    }

    #houdiniSwap iframe:hover {
        box-shadow: 
            inset 1px 1px 5px #555,
            0 6px 20px rgba(0,0,0,0.1); /* hover shadow */
        transform: translateY(-2px); /* hover lift effect */
    }
</style>

---

Conclusion

In two straightforward steps, you have now embedded the Houdini Swap widget into your site, enhancing your user experience with our services.

If you have any questions or if you need further guidance, please don't hesitate to contact us via Partnership Enquiries.

☎️pageCONTACT US