tradable-ui

1.21.0
Welcome to the Tradable JS documentation. Tradable is an open API to easily build financial trading features into any app, through any brokerage. This is the documentation for the Tradable JavaScript SDK, which offers 2 kits:
  • core: See here
  • ui-kit: Provides different components like the website scraper and other Widgets - plug and play! (includes 'core')

There are 2 ways to add tradable-ui to your site. In both approaches we use jQuery in no conflict mode (what?) and we assign it to the variable 'trEmbJQ'.

The recommended approach is to link the JS file that we generate for your app, if you do, the global configuration will be automatically handled:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//js-api.tradable.com/app/your-app-id.js"></script>

Alternatively, if you want to maintain the configuration yourself, you can define the configuration object and link tradable-ui directly:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript"> 
 window.tradableConfig = {"appId": your-app-id};
</script>
<script type="text/javascript" src="//js-api.tradable.com/ui/1.21.0/tradable-ui.min.js"></script>
NOTE! The oauth flow doesn't work properly in this documentation site for the codepen examples, for the best experience please see the examples on Codepen.io, you can do that clicking on the "Edit on Codepen" link

Bottom Banner

Adding the Tradable UI script to your page will automatically add our bottom banner with the trader's dashboard & portfolio. If you are in the auto configuration mode and you want to turn it off, you just need to tell us. On the other hand, if you manage the configuration, you need to add the following option in your tradableConfig object:

<script type="text/javascript"> 
 window.tradableConfig = {"appId": your-app-id, "showBottomBanner": false};
</script>

Watch List

Portfolio

Dashboard

Account selector & Buttons

Broker Sign In Buttons

Confirmation Dialog

From version 1.17 of Tradable UI a confirmation dialog is shown before closing positions or cancelling orders, it is possible to turn it off as follows:

<script type="text/javascript"> 
 window.tradableConfig = {"appId": your-app-id, "showConfirmation": false};
</script>

executeEnableTrading

Executes the same action as the Enable Trading button - If the user has not connected an account it will start practice trading, otherwise it will start the oauth flow for authentication.

Examples

tradable.executeEnableTrading();

promptOrderEntry(symbol, options)

Opens the order entry light box in the center of the window - This method can be called when trading is not enabled too and an information message will be diplayed.

Parameters

  • String symbol :

    (optional) Instrument symbol or currency to display in the order entry. If you want to specify options, this parameter must be sent.

  • Object options :

    (optional) Every attribute is optional. Price or Pips can only be specified for Limit and Stop orders.

    • String options.instrumentId

      If specified and valid, the instrument id will override the defined symbol (optional)

    • String options.type

      "MARKET", "LIMIT" or "STOP" (optional)

    • String options.side

      "BUY" or "SELL" (optional)

    • number options.price

      Price Level for limit or stop order. If a pip value is sent, it will be ignored. (optional)

    • number options.pips

      Pip Distance for limit or stop order. (optional)

Examples

tradable.promptOrderEntry();
tradable.promptOrderEntry("EURUSD", {'type': 'MARKET', 'side': 'BUY'});
tradable.promptOrderEntry("EUR/GBP", {"instrumentId" : "401155662"});

refreshUI

If you inject the widgets html asynchronously or change the tradable options (config), you will need to call this method for the UI to be refreshed

Examples

// Change bottom banner config
tradableConfig.showBottomBanner = true;
tradable.refreshUI();

scrapeContent(content)

Scrapes the content of the given selector and highlights the account instrument symbols and currencies. This can be used when trading is not enabled too and default instruments get highlighted.

Parameters

  • String content :

    Selector for the content to scrape (for example '.yourClass' or '#yourId')

Examples

tradable.onEmbedReady(function() {
	tradable.scrapeContent("#myContainerId");
});

setEnableTradingCallback(callback)

Customizes the enable trading action (action that occurs when any enable trading button is clicked on one of the widgets). This is useful for cases in which you what to force an action (for example showing a message) before trading can be enabled.

Parameters

  • callback :

Examples

tradable.setEnableTradingCallback(function() {
     // Perform custom logic
});
// To reset back to the default enable trading logic:
tradable.setEnableTradingCallback(null);

startDemoTrading(type)

Starts demo trading for a Forex or Stocks account, if the user has used a demo account before it will be reused. If the user is logged in, the user will be first signed out

Parameters

  • String type :

    (optional) "FOREX" or "STOCKS". If not specified, the app's default (tradableConfig.defaultDemoAccountType) or the previously picked will be used.

Examples

tradable.startDemoTrading("STOCKS");