Configure B2COPY widgets

This document describes how to embed the Leaderboard and Account Statistics widgets on your website.

Clients can find a list of top-performing master accounts in the Leaderboard widget displayed on your website. In the widget, they click a selected account to view the account trading information in the Account Statistics widget. If a client is satisfied with the trading results of the selected account and wants to subscribe to that account, the client clicks the +Follow button and is redirected to the Web UI Sign In page or any other landing page to which you want your client to be navigated.

The widgets are embedded in a web page using the HTML <iframe> element.

In addition to <iframe>, the scripts provided in the examples below are required to ensure proper interaction between both widgets. The scripts must also be added to the web pages in which the <iframe> elements containing the widgets are embedded.

The following code should be inserted in the <head> element of a web page:

<script>
      const ACCOUNT_STATISTICS_LANDING_URL = 'https://widgets-example.flexdns.org/b2copy-widget/account-statistics.html';
      const INVESTMENT_PLATFORM_ID = 1;

      window.addEventListener('message', event => {
        const {type: eventType, payload} = JSON.parse(event.data);

        if (eventType === 'LEADERBOARD_WIDGET_LOAD_COMPLETE') {
          const investmentPlatformEventData = {
            type: 'INVESTMENT_PLATFORM_ID',
            payload: { investmentPlatformId: INVESTMENT_PLATFORM_ID }
          }
          
          event.source.postMessage(JSON.stringify(investmentPlatformEventData), ACCOUNT_STATISTICS_LANDING_URL);
        }

        if (eventType === 'LEADERBOARD_WIDGET_ACCOUNT_ID') {
          const url = new URL(ACCOUNT_STATISTICS_LANDING_URL);
          url.searchParams.append('accountId', payload.accountId);

          window.open(url, '_blank');
        }
      });
</script>

where:

ACCOUNT_STATISTICS_LANDING_URL — the address of a page containing the Account Statistics widget.
INVESTMENT_PLATFORM_ID — the identifier of the investment platform instance (such as for MT4, MT5, and so on). If you have only one platform configured, the identifier of your platform is 1.

The following code should be inserted in the <body> element of a web page:

<iframe src="https://leaderboard.b2copy-demo.com/en/leaderboard"></iframe>

where:

https://leaderboard.b2copy-demo.com/en/leaderboard — must be replaced with the address of a web page containing the Leaderboard widget.

The following code should be inserted in the <head> element of a web page:

<script>
      const ACCOUNT_STATISTICS_WIDGET_CDN_URL = 'https://statistics.b2copy-demo.com/en/account-statistics';
      const ACCOUNT_STATISTICS_WIDGET_FOLLOW_LINK = 'https://statistics.b2copy-demo.com/en/account-statistics';
      const INVESTMENT_PLATFORM_ID = 1;

      window.addEventListener('message', event => {
        const {type: eventType} = JSON.parse(event.data);

        if (eventType === 'ACCOUNT_STATISTICS_WIDGET_LOAD_COMPLETE') {
          const url = new URL(window.location);
          const accountId = url.searchParams.get('accountId');

          const accountIdEventData = {
            type: 'ACCOUNT_STATISTICS_WIDGET_ACCOUNT_ID',
            payload: {accountId},
          };
          
          const investmentPlatformIdEventData = {
            type: 'ACCOUNT_STATISTICS_WIDGET_INVESTMENT_PLATFORM_ID',
            payload: {investmentPlatformId: INVESTMENT_PLATFORM_ID},
          }

          const followLinkEventData = {
            type: 'ACCOUNT_STATISTICS_WIDGET_FOLLOW_LINK',
            payload: {linkUrl: ACCOUNT_STATISTICS_WIDGET_FOLLOW_LINK},
          };

          event.source.postMessage(JSON.stringify(accountIdEventData), ACCOUNT_STATISTICS_WIDGET_CDN_URL);
          event.source.postMessage(JSON.stringify(investmentPlatformIdEventData), ACCOUNT_STATISTICS_WIDGET_CDN_URL);
          event.source.postMessage(JSON.stringify(followLinkEventData), ACCOUNT_STATISTICS_WIDGET_CDN_URL);
        }
      });
</script>

where:

ACCOUNT_STATISTICS_WIDGET_CDN_URL — the address of a web page containing the Account Statistics widget.
ACCOUNT_STATISTICS_WIDGET_FOLLOW_LINK — the address of a web page that is opened after clicking the Follow button.
INVESTMENT_PLATFORM_ID — the identifier of the investment platform instance that should be obtained in the Back Office (see below).

The following code should be inserted in the <body> element of a web page:

<iframe src="https://statistics.b2copy-demo.com/en/account-statistics"></iframe>

Obtain INVESTMENT_PLATFORM_ID

In the Back Office, go to Investment Platform > Platform Manager.
Click the Edit button located in the desired platform row.

The INVESTMENT_PLATFORM_ID is the last number of the platform URL (in the example below, INVESTMENT_PLATFORM_ID is 9).

PreviousConfigure the trade fee filter NextPrevent syncing of collapsed MetaTrader trading history with B2COPY

Last updated 9 days ago

Leaderboard widget

The following code should be inserted in the <head> element of a web page:

<script>
      const ACCOUNT_STATISTICS_LANDING_URL = 'https://widgets-example.flexdns.org/b2copy-widget/account-statistics.html';
      const INVESTMENT_PLATFORM_ID = 1;

      window.addEventListener('message', event => {
        const {type: eventType, payload} = JSON.parse(event.data);

        if (eventType === 'LEADERBOARD_WIDGET_LOAD_COMPLETE') {
          const investmentPlatformEventData = {
            type: 'INVESTMENT_PLATFORM_ID',
            payload: { investmentPlatformId: INVESTMENT_PLATFORM_ID }
          }
          
          event.source.postMessage(JSON.stringify(investmentPlatformEventData), ACCOUNT_STATISTICS_LANDING_URL);
        }

        if (eventType === 'LEADERBOARD_WIDGET_ACCOUNT_ID') {
          const url = new URL(ACCOUNT_STATISTICS_LANDING_URL);
          url.searchParams.append('accountId', payload.accountId);

          window.open(url, '_blank');
        }
      });
</script>

where:

ACCOUNT_STATISTICS_LANDING_URL — the address of a page containing the Account Statistics widget.

INVESTMENT_PLATFORM_ID — the identifier of the investment platform instance (such as for MT4, MT5, and so on). If you have only one platform configured, the identifier of your platform is 1.

The following code should be inserted in the <body> element of a web page:

<iframe src="https://leaderboard.b2copy-demo.com/en/leaderboard"></iframe>

where:

https://leaderboard.b2copy-demo.com/en/leaderboard — must be replaced with the address of a web page containing the Leaderboard widget.

Account Statistics widget

The following code should be inserted in the <head> element of a web page:

<script>
      const ACCOUNT_STATISTICS_WIDGET_CDN_URL = 'https://statistics.b2copy-demo.com/en/account-statistics';
      const ACCOUNT_STATISTICS_WIDGET_FOLLOW_LINK = 'https://statistics.b2copy-demo.com/en/account-statistics';
      const INVESTMENT_PLATFORM_ID = 1;

      window.addEventListener('message', event => {
        const {type: eventType} = JSON.parse(event.data);

        if (eventType === 'ACCOUNT_STATISTICS_WIDGET_LOAD_COMPLETE') {
          const url = new URL(window.location);
          const accountId = url.searchParams.get('accountId');

          const accountIdEventData = {
            type: 'ACCOUNT_STATISTICS_WIDGET_ACCOUNT_ID',
            payload: {accountId},
          };
          
          const investmentPlatformIdEventData = {
            type: 'ACCOUNT_STATISTICS_WIDGET_INVESTMENT_PLATFORM_ID',
            payload: {investmentPlatformId: INVESTMENT_PLATFORM_ID},
          }

          const followLinkEventData = {
            type: 'ACCOUNT_STATISTICS_WIDGET_FOLLOW_LINK',
            payload: {linkUrl: ACCOUNT_STATISTICS_WIDGET_FOLLOW_LINK},
          };

          event.source.postMessage(JSON.stringify(accountIdEventData), ACCOUNT_STATISTICS_WIDGET_CDN_URL);
          event.source.postMessage(JSON.stringify(investmentPlatformIdEventData), ACCOUNT_STATISTICS_WIDGET_CDN_URL);
          event.source.postMessage(JSON.stringify(followLinkEventData), ACCOUNT_STATISTICS_WIDGET_CDN_URL);
        }
      });
</script>

where:

ACCOUNT_STATISTICS_WIDGET_CDN_URL — the address of a web page containing the Account Statistics widget.

ACCOUNT_STATISTICS_WIDGET_FOLLOW_LINK — the address of a web page that is opened after clicking the Follow button.

INVESTMENT_PLATFORM_ID — the identifier of the investment platform instance that should be obtained in the Back Office (see below).

The following code should be inserted in the <body> element of a web page:

<iframe src="https://statistics.b2copy-demo.com/en/account-statistics"></iframe>

Configure B2COPY widgets

Leaderboard widget

The <iframe> code for the Leaderboard widget

Account Statistics widget

The <iframe> code for the Account Statistics widget

Obtain INVESTMENT_PLATFORM_ID

Leaderboard widget

The <iframe> code for the Leaderboard widget

Account Statistics widget

The <iframe> code for the Account Statistics widget

Obtain INVESTMENT_PLATFORM_ID