Configure B2COPY widgets

Learn how to embed the Leaderboard and Account Statistics widgets on your website using HTML <iframe> and JavaScript for seamless interaction

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:

<head>
 <script>
  const ACCOUNT_STATISTICS_LANDING_URL = 'https://statistics.example.com'; 
  const INVESTMENT_PLATFORM_ID = 1;
  const PLATFORM = 'b2copy'; // 'b2copy' | 'mam' | 'pamm'

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

    if (eventType === 'LEADERBOARD_WIDGET_LOAD_COMPLETE') {
      const leaderboardWidgetConfigParams = {
        type: 'LEADERBOARD_WIDGET_CONFIG_PARAMS',
        payload: {
          investmentPlatformId: INVESTMENT_PLATFORM_ID,
          platform: PLATFORM,
        },
      };

      const url = document.getElementsByTagName('iframe')[0].src;
      event.source.postMessage(JSON.stringify(leaderboardWidgetConfigParams), 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>
</head>

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). For details, refer to Obtain INVESTMENT_PLATFORM_ID.
If you have only one platform configured, the identifier of your platform is 1.
PLATFORM — the type of platform. Possible values:
- b2copy — for copy trading
- mam — for MAM
- pamm — for PAMM

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

<body>
 <iframe src="https://example.com/leaderboard"></iframe>
</body>

where:

https://example.com/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:

<head>
 <script>
  const ACCOUNT_STATISTICS_WIDGET_CDN_URL = 'https://statistics.example.com';
  const ACCOUNT_STATISTICS_WIDGET_FOLLOW_LINK = 'https://example.com/en/trading-platform/';
  const INVESTMENT_PLATFORM_ID = 1;
  const PLATFORM = 'b2copy'; // 'b2copy' | 'mam' | 'pamm'

  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},
    };

    const platformData = {
     type: 'ACCOUNT_STATISTICS_WIDGET_PLATFORM',
     payload: {platform: PLATFORM}
    };

    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);
    event.source.postMessage(JSON.stringify(platformData), ACCOUNT_STATISTICS_WIDGET_CDN_URL);
   }
  });
 </script>
</head>

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 (such as for MT4, MT5, and so on). For details, refer to Obtain INVESTMENT_PLATFORM_ID.
If you have only one platform configured, the identifier of your platform is 1.
PLATFORM — the type of platform. Possible values:
- b2copy — for copy trading
- mam — for MAM
- pamm — for PAMM

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

<body>
 <iframe src="https://statistics.example.com"></iframe>
</body>

where:

https://statistics.example.com — must be replaced with the address of a web page containing the Account Statistics widget.

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 11).

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

Last updated 1 month ago

Was this helpful?

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