Go to https://developer.kyber.network/docs/WidgetGenerator. You will see the following interface:
Test out the widget for yourself by clicking on the button!
Note: Button's text, title, and CSS style can be changed if desired. You could add multiple buttons into a page.
|Recipient Address||Required||Not required||Not required|
|Receiving Token Symbol||Required||Not required||Required|
|Use Case||Vendor who wants to receive cryptocurrency as payment||Website that wants to provide a generic swap service||Platform who wants to allow users to buy their token on their website|
The widget will open as an overlay popup. The widget will be inserted directly into the host page's DOM. Use this mode if you want to customize the widget appearance by overriding CSS rules.
The widget will open in a new browser tab.
The widget will open inside an iFrame on an overlay popup. Use this mode if you prefer the widget's UI and don't want to override its CSS.
|string||Widget type. Either |
|string||Behavior of how the widget will appear to the user. Either |
|address||Destination wallet address which will receive the destination tokens.||N.A|
|string||Token symbol of destination token. Has to be a token supported by Kyber.||N.A||ETH|
|float||Amount of ||User gets to specify value||1.2|
|string||Callback URL that will be called after the tx has been broadcasted to the blockchain. It includes tx hash as a param and must return HTTP status code of 200 for the success. If not, the callback will be fired another 5 times at most||-||https://yourwebsite.com/kybercallback|
|string||ETH network that widget will run in||1 of the following values:|
|address||Registered ETH address that is part of the fee sharing program||-|
|string||Tokens that are pinned at the top of your token selector. Tokens are separated by an underscore (_).|
|string||This param only takes effect when type=swap, it indicates default token pair will show in swap layout.|
- I specify popup/iframe mode, but when user clicks payment button, the browser opens the widget in new tab?
If your buttons do not have ‘kyber-widget-button’ class, or they are generated on the fly when the page already loaded, you need to manually activate the buttons as following:
window.kyberWidgetOptions.register(‘your buttons CSS selector here’);
If you don’t provide the CSS selector, it defaults to ‘kyber-widget-button’.