Appearance
Dollar Cost Average Form (DCA)
Introduction
This document describes the steps to take in order to embed the BTC Direct dollar cost average form widget in another website. It is aimed at developers that will implement this functionality.
Implementing the widget
In order to enable the widget in your website, the following script needs to be embedded. This script loads the widget from the BTC Direct CDN (Content Delivery Network) and initializes it automatically.
html
<script lang="js">
(function (btc, d, i, r, e, c, t) {
btc[r] = btc[r] || function() {
(btc[r].q = btc[r].q || []).push(arguments)
};
c = d.createElement(i);
c.id = r; c.src = e; c.async = true;
c.type = 'module'; c.dataset.btcdirect = '';
t = d.getElementsByTagName(i)[0];
t.parentNode.insertBefore(c, t);
})(window, document, 'script', 'btcdirect',
'https://cdn.btcdirect.eu/dollar-cost-average/dollar-cost-average.js'
);
btcdirect('init', { token: 'API_KEY' });
</script>
If a valid key is provided, and the styling is added, it will result in the following:
Note that there is a starting screen by default. There is a setting that shows the overview as the starting page instead. This can be done with the startInOverview
setting that is described in the Optional init call parameters chapter.
Important: Provide wallet address(es)
When navigating to the next page using the “Get started” button you may notice that the dropdown for wallet addresses is empty. This is because the widget expects the user’s wallet addresses to be provided in order to select them.
Optional init call parameters
The init call, as described in Getting Started, can contain several key-value pairs to fine-tune the widget. The different options are described below.
Key | Type | Description | Default |
---|---|---|---|
startInOverview | boolean | If it is preferred to show an overview of the user’s DCA plans instead of the start page, you can set this value to true . | false |
All widgets support selector
, debug
, locale
and theme
.
Additional calls to the widget
The widget accepts several calls to it with which additional information can be provided. These can be added to the script tag that loads the widget.
Locale
This call sets the locale for the application. This determines the way monetary values are displayed. For example 0 Euro’s in the EN-GB locale is displayed as “€0.00” whereas the NL-NL locale results in “€ 0,00”.
js
btcdirect('locale', { locale: 'en-GB' });