# Integration
The easiest way to start learning about XanPool widget is to show a simple example. The following web page integrates XanPool widget into the page.
<html>
<head>
<script src="https://cdn.widget.xanpool.com/xanpool-sdk-v1.js"></script>
<script>
function onWidgetEvent(message) {
console.log('Received message ' +message.type);
console.log('Message payload: ' +message.payload);
}
function onLoad() {
const options = {apiKey: 'test-api-key'};
const widget = new XanPoolWidget(
options, document.getElementById("widgetContainer"), onWidgetEvent
);
widget.init();
}
</script>
<style type="text/css">
.widgetContainer {
width: 600px;
}
</style>
</head>
<body onload="onLoad()">
<div id="widgetContainer" class="widgetContainer"/>
</body>
</html>
Things to note in the example:
- We create a container div where we would like to display our widget. The widget will take 100% of this element(up to 580px). The height will be automatically adjusted by expanding root element.
- We add XanPool widget library "xanpool-sdk-v1.js"
- We initialize the widget after the page has been loaded
# Widget options
The first argument of initXanPoolWidget function is options, below is the list of available parameters.
Parameter | Required | Description |
---|---|---|
apiKey | Required | A unique key identifying a partner |
wallet | Optional | Pre filled wallet for buying transactions, if you pass this parameter you also need to pass cryptoCurrency |
cryptoCurrency | Optional | One of the supported cryptocurrencies |
currency | Optional | One of the supported currencies |
autoSelling | Optional | Skips instructions for selling transactions, in this case you should transfer crypto upon "transaction-created" event or receiving a notification via webhook |
transactionType | Optional | Either "buy" or "sell", It will pre-select widget mode and hide the tabs |
partnerData | Optional | A string that could help a partner to track/identify a transaction |
chain | Optional | This parameter is required for currencies which are supported by multiple chains, either zilliqa or ethereum |
# Widget events
The third argument of initXanPoolWidget function is onEvent callback that is triggered upon transaction's initiation. This callback accepts an object with the following attributes
Parameter | Description |
---|---|
type | Type of the event, currently only 'transaction-created' |
payload | Payload for the event, usually an object with different attributes |
# transaction-created payload
Attributes of 'transaction-created' payload
Parameter | Description |
---|---|
id | Unique id of the created transaction |
type | Either 'sell' or 'buy' |
crypto | How much crypto is being bought or sold |
fiat | How much fiat is either bought or sold |
serviceCharge | Service charge in crypto |
total | Amount of crypto/fiat(for selling) after deducting service charge |
cryptoPrice | Price of crypto in local currency |
cryptoPriceUsd | Price of crypto in USD |
currency | Fiat currency |
depositWallet | ONLY FOR SELLING: Wallet where user/you should transfer crypto funds to initiate selling |
← Introduction Demo →