Appearance
Getting Started
The widgets have been designed to require as little configuration as possible. The initial script can be copied and pasted and only an "API_KEY" has to be configured. It's similar to the script needed for Google Tag Manager making it recognizable and easy to implement. This code loads and initializes the widget on the desired webpage.
After the initial setup the widgets accept init call parameters to configure and extend its functionality. Method calls are queued and executed on 'first come, first served' basis after a widget's initialization. We can interact with a widget by performing method calls after a widget's initialization. These method calls will be invoked immediately instead of being queued.
Step. 1: Embed 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',
'WIDGET_CDN_URL'
);
btcdirect('init', { token: 'API_KEY' });
</script>Step. 2: Set API key
In this script you can find the variable API_KEY. This variable needs to be replaced by the API key that is provided by BTC Direct. This key is used to identify you as a partner. If you haven’t received your API key yet, please contact your BTC Direct account manager.
Step. 3: Set widget CDN domain
If the variable WIDGET_CDN_URL is present in the embedded script it needs to be replaced. You can skip this step if it is not present.
In our examples https://cdn.btcdirect.eu/ is the location where the widget's source is retrieved from. When developing, it is recommended to change this to https://cdn-sandbox.btcdirect.eu/. This is our sandbox environment and it simulates the functionality of the production environment without using actual currency.
Valid options for WIDGET_CDN_URL are:
- Buy order form (F2C)
https://cdn.btcdirect.eu/coin-to-fiat/coin-to-fiat.jshttps://cdn-sandbox.btcdirect.eu/coin-to-fiat/coin-to-fiat.js
- Sell order form (C2F)
https://cdn.btcdirect.eu/fiat-to-coin/fiat-to-coin.jshttps://cdn-sandbox.btcdirect.eu/fiat-to-coin/fiat-to-coin.js
- Transaction history (Trx History)
https://cdn.btcdirect.eu/transaction-history/transaction-history.jshttps://cdn-sandbox.btcdirect.eu/transaction-history/transaction-history.js
- Onboarding form
https://cdn.btcdirect.eu/onboarding/onboarding.jshttps://cdn-sandbox.btcdirect.eu/onboarding/onboarding.js
- Dollar cost average form (DCA)
https://cdn.btcdirect.eu/dollar-cost-average/dollar-cost-average.jshttps://cdn-sandbox.btcdirect.eu/dollar-cost-average/dollar-cost-average.js
Step. 4: Add target element
In order for the widget to render itself, an element needs to be added to the page. By default it looks for an element with the class btcdirect-widget.
html
<body>
<div class="btcdirect-widget"></div>
</body>Step. 5: Result
If you are implementing the Buy order form (F2C) widget, a valid key is provided and the styling is added. It will result in the following:
Checkout the other widgets for more examples!
Optional: add stylesheet
A default stylesheet has been created to provide a responsive layout and gives the widget a BTC Direct look-and-feel. In order to add the styling, a tag has to be added to your page, preferably inside the <head> tag.
html
<head>
<link href="https://cdn.btcdirect.eu/fiat-to-coin/fiat-to-coin.css" rel="stylesheet"/>
</head>The styling utilizes the btcdirect-widget-container class as its starting point for the styling. So if you want to change the target element’s identifier but still use the styling, add the identifier to it instead of replacing the classname. For example:
html
<body>
<div class="btcdirect-widget" id="widget-target"></div>
</body>Optional: using an iframe
If you decide to load the widget in an iframe, the iframe HTML tag must have the attribute referrerpolicy=”origin”.