Common Questions / Issues

Multiple widgets in one page

When using multiple widgets in a single page only a few minor changes are needed. In the following example code, these are mentioned in the comments.

html

<script lang="js">
    (function (btc, d, i, r, e, c, t) {
        // The code from the "Getting started" page is omitted for readability.
    })
    // In the below line, the value "btcdirect" is changed to "buyWidget".
    (window, document, 'script', 'buyWidget',
        'https://cdn.btcdirect.eu/fiat-to-coin/fiat-to-coin.js'
    );

    // The value of this function call has to match the above change ("buyWidget").
    // Also a new parameter is added for the selector.
    buyWidget('init', { token: 'API_KEY', selector: 'buy-widget' });

    // When adding another widget, in this case the sell widget,
    // the name has to be different to reach each widget separately.
    (function (btc, d, i, r, e, c, t) {
        // The code from the "Getting started" page is omitted for readability.
    })(window, document, 'script', 'sellWidget',
        'https://cdn.btcdirect.eu/coin-to-fiat/coin-to-fiat.js'
    );

    sellWidget('init', { token: 'API_KEY', selector: 'sell-widget' });
</script>

Now we have to widget calls in the page they need individual target elements in order to display them. These have classes added to them that match the selector-values in the above code example.

html

<div class="widgets">
    <fiat-to-coin-widget name="f2c" selector="f2c-widget"  />
    <coin-to-fiat-widget name="c2f" selector="c2f-widget" />
</div>

<style>
    .widgets {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    @media screen and (min-width: 700px) {
        .widgets {
            grid-template-columns: 1fr 1fr;
        }
        .widgets .btcdirect-widget-container {
            width: 100%;
        }
    }
</style>

If everything is done correctly, it should result in the following:

CORS Errors

When calls from the widget result in CORS-related errors, this is usually caused by the containing website’s referrer policy. Make sure that the referrer header is present in the call headers and it’s not empty.

Sometimes this is caused by external packages such as “helmet” and “nuxt-helmet”. In these cases the referrer can be enabled in the package settings.

When using an iframe, make sure that the referrer policy is: referrerpolicy=”origin”.

Common Questions / Issues ​

Multiple widgets in one page ​

CORS Errors ​

Common Questions / Issues

Multiple widgets in one page

CORS Errors