Instruction

Get started
1.Put this script tag to the <head> of your page
1
<script type="text/javascript" src="https://widgets.rubic.exchange/iframe/bundle.min.js"></script>
Copied!
2. Put this div tag to the place, where the Rubic Widget will be
1
<div id="rubic-widget-root"></div>

Copied!
3. Put this script tag to the bottom of <body>
1
<script defer type="text/javascript">
2
    // describe widget configuration and saving to a global variable for future use
3
    var configuration = {
4
        from: 'ETH',
5
        to: 'RBC',
6
        fromChain: 'ETH',
7
        toChain: 'ETH',
8
        amount: 1,
9
        iframe: 'flex',
10
        hideSelectionFrom: false,
11
        hideSelectionTo: true,
12
        theme: 'dark',
13
        background: '#28372e',
14
        injectTokens: {
15
            eth: ['0xd123575d94a7ad9bff3ad037ae9d4d52f41a7518'],
16
            bsc: ['0x8aed24bf6e0247be51c57d68ad32a176bf86f4d9']
17
        },
18
        slippagePercent: {
19
            instantTrades: 2,
20
            crossChain: 5
21
        }
22
    }
23
​
24
    // prevent accidental changes to the object, for example, when re-creating a widget for another theme
25
    Object.freeze(configuration);
26
​
27
    // create widget
28
    rubicWidget.init(configuration);
29
</script>
Copied!
⚠️ 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
​
Parameter
Possible values
Default
Description
from
Token symbol (e.g. 'ETH', 'RBC') or address (e.g. '0x32Be343B94f860124dC4fEe278FDCBD38C102D88')
ETH
Can be used to specify tokens to trade.
to
Token symbol (e.g. 'ETH', 'RBC') or address (e.g. '0x32Be343B94f860124dC4fEe278FDCBD38C102D88')
RBC
Can be used to specify tokens to trade.
fromChain
'ETH', 'BSC', 'POLYGON', 'HARMONY'
ETH
Can be used to specify chain to trade.
toChain
'ETH', 'BSC', 'POLYGON', 'HARMONY', 'TRON', 'XDAI'
ETH
Can be used to specify chain to trade.
amount
Floating point number, e.g. 1.2345
1
Can be used to specify the initial trade amount.
iframe
'flex', 'vertical', 'horizontal'
flex
Can be used to specify widget appearance. flex -- the widget adjusts to the rubic-widget-rootcontainer size: if the width of the container is less than 1180px, then the widget is vertical, otherwise, it is horizontal
hideSelectionFrom
'true', 'false'
false
Allows you to block the selection of tokens on the form. Thus, it will be possible to exchange only the tokens specified in the parameters.
hideSelectionTo
'true', 'false'
true
Allows you to block the selection of tokens on the form. Thus, it will be possible to exchange only the tokens specified in the parameters.
theme
'dark', 'light'
dark
Can be used to specify the theme of the visual design.
background
values of css background property, e.g.'#28372e', 'white', 'linear-gradient(45deg, black, #4aa956)'
linear-gradient(45deg, black, #4aa956) with dark theme, linear-gradient(45deg, #4aa956 20%, white) with light theme
Allows you to set the background in widget outside the trade form.
language
'en', 'es', 'ko', 'ru', 'zh'
en
Allows you to set widget language.
injectTokens
Object whose array properties contain addresses or symbols of tokens that must be added to the list of tokens available for selection (initially, the list contains only a few basic tokens for each blockchain). Available property keys: eth, bsc, polygon, harmony e.g. { eth: ['0xd123575d94a7ad9bff3ad037ae9d4d52f41a7518', 'CRV'], bsc: ['0x2859e4544c4bb03966803b044a93563bd2d0dd4d'] }
{}
Allows you to add your tokens to the tokens selection list inside widget.
slippagePercent
Object whose key properties contain default slippage percent. Minimum value is 0.1, maximum value is 50. Available property keys: instantTrades, crossChain, e.g. { instantTrades: 5, crossChain: 7 }

{}

Allows you to set default slippage for Instant Trades and Cross-Chain swaps.
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
1
function onThemeChange(newTheme){
2
    // copy base dark configuration
3
    const newConfiguration = { ...configuration };
4
​
5
    if(newTheme === 'light'){
6
        // modify configuration for the light theme. You can change any properties
7
        newConfiguration.theme = 'light';
8
        newConfiguration.background = 'white';
9
        
10
        // remove old widget and recreate new with light configuration
11
        rubicWidget.init(newConfiguration);
12
    } else {
13
        // remove old widget and recreate new with dark configuration
14
        rubicWidget.init(newConfiguration);
15
    }
16
}
Copied!
Use with SSR
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:
1
<script>
2
    if (process.browser) {
3
        window.onNuxtReady(() => {
4
            // describe widget configuration and saving to a global variable for future use
5
            var configuration = {
6
                from: 'ETH',
7
                to: 'RBC',
8
                fromChain: 'ETH',
9
                toChain: 'ETH',
10
                amount: 1,
11
                iframe: 'flex',
12
                hideSelectionFrom: false,
13
                hideSelectionTo: true,
14
                theme: 'dark',
15
                background: '#28372e',
16
                injectTokens: {
17
                    eth: ['0xd123575d94a7ad9bff3ad037ae9d4d52f41a7518'],
18
                    bsc: ['0x8aed24bf6e0247be51c57d68ad32a176bf86f4d9']
19
                },
20
                slippagePercent: {
21
                    instantTrades: 2,
22
                    crossChain: 5
23
                }
24
            }
25
    
26
            // prevent accidental changes to the object, for example, when re-creating a widget for another theme
27
            Object.freeze(configuration);
28
    
29
            // create widget
30
            rubicWidget.init(configuration);
31
        })
32
    }
33
</script>
Copied!


The Widget
​
​

Cross-Chain Protocol - Previous

Exchange Rate and Slippage

Next - Rubic Relay Widget

Partners

Last modified 1d ago

Copy link

Contents

Get started

Available configuration parameters

Dynamic change parameters

Use with SSR