Instruction

Get started

  1. Put this script tag to the <head> of your page

<script type="text/javascript" src="https://widgets.rubic.exchange/iframe/bundle.new-app.min.js"></script>

2. Put this div tag to the place, where the Rubic Widget will be

<div id="rubic-widget-root"></div>

3. Put this script tag to the bottom of <body>

<script defer type="text/javascript">
    // describe widget configuration and saving to a global variable for future use
    var configuration = {
        from: 'ETH',
        to: 'RBC',
        fromChain: 'ETH',
        toChain: 'ETH',
        amount: 1,
        iframe: 'flex',
        hideSelectionFrom: false,
        hideSelectionTo: true,
        theme: 'dark',
        injectTokens: {
            eth: ['0xd123575d94a7ad9bff3ad037ae9d4d52f41a7518']
        },
        slippagePercent: {
            instantTrades: 2,
            crossChain: 5
        },
        crossChainIntegratorAddress: '<Your integrator address>',
        onChainIntegratorAddress: '<Your integrator address>'
    }

    // prevent accidental changes to the object, for example, when re-creating a widget for another theme
    Object.freeze(configuration);

    // create widget
    rubicWidget.init(configuration);
</script>

⚠️ You should enter tokens addresses in ethereum checksum format. To avoid errors, copy the token address from a blockchain explorer, for example, etherscan.

You can customize the configuration parameters the way you want. Below is a description of the options available.

Available configuration parameters

Dynamic change parameters

You can change the theme of the widget when changing the theme on your site, or any other parameters dynamically. To do this, call the init method again with the updated configuration. The previous widget will be deleted and a new one will be created instead.

Change widget theme when site theme changing

function onThemeChange(newTheme){
    // copy base dark configuration
    const newConfiguration = { ...configuration };

    if(newTheme === 'light'){
        // modify configuration for the light theme. You can change any properties
        newConfiguration.theme = 'light';
        
        // remove old widget and recreate new with light configuration
        rubicWidget.init(newConfiguration);
    } else {
        // remove old widget and recreate new with dark configuration
        rubicWidget.init(newConfiguration);
    }
}

Remember that when using server-side rendering, the script with the widget setting must be executed on the client-side. When adding the widget initialization code, make sure that it will only be executed on the client.

For example, if you use NuxtJs you should use the following code to initialize the widget:

<script>
    if (process.browser) {
        window.onNuxtReady(() => {
            // describe widget configuration and saving to a global variable for future use
            var configuration = {
                from: 'ETH',
                to: 'RBC',
                fromChain: 'ETH',
                toChain: 'ETH',
                amount: 1,
                iframe: 'flex',
                hideSelectionFrom: false,
                hideSelectionTo: true,
                theme: 'dark',
                background: '#28372e',
                injectTokens: {
                    eth: ['0xd123575d94a7ad9bff3ad037ae9d4d52f41a7518'],
                    bsc: ['0x8aed24bf6e0247be51c57d68ad32a176bf86f4d9']
                },
                slippagePercent: {
                    instantTrades: 2,
                    crossChain: 5
                }
            }
    
            // prevent accidental changes to the object, for example, when re-creating a widget for another theme
            Object.freeze(configuration);
    
            // create widget
            rubicWidget.init(configuration);
        })
    }
</script>

PreviousWidget OverviewNextPartners

Last updated