# Configure the B2COPY Leaderboard and Account Statistics widgets

This instruction explains how to embed the **Leaderboard** and **Account Statistics** widgets from the Web UI into external web pages.

{% hint style="info" %}
These widgets are supported for copy trading, MAM, and PAMM.
{% endhint %}

The **Leaderboard** widget enables your clients to view a list of top-performing master accounts without requiring authentication. By clicking on an account, they can see detailed trading statistics in the **Account Statistics** widget. To subscribe, clients click the **Follow** button:

* In *full B2COPY solutions*, clients are redirected to the Web UI **Sign In** page, where they can sign up or sign in if already registered and finish the subscription.
* In *standalone solutions*, clients can enter their trading account credentials and subscribe directly from the widget, or navigate to the **Sign In** page.

The widgets are embedded using the standard HTML `<iframe>` element — no additional scripts or coding are required.

The embedded **Leaderboard** supports all standard options, including:

* Sorting and filtering
* Searching with the **Find account by login** option
* Navigating between **Account Statistics** and the **Leaderboard**
* Switching between card and table views
* Toggling between light and dark themes

## View and test the Leaderboard widget functionality

You can view how the embedded **Leaderboard** widget may appear on a web page and test its functionality by visiting the [B2COPY product page](https://b2copy.b2broker.com/), under the **Easy integration to your CRMs** section.

## The `<iframe>` code for the Leaderboard widget

You can insert the `<iframe>` into the HTML code of your web page anywhere where you want the **Leaderboard** to appear. The `<iframe>` must contain a properly formatted URL.

{% hint style="info" %}
The URL format for full B2COPY solutions and standalone solution is similar. The difference is that full B2COPY solutions use `/widget` in the URL, while standalone solutions use `/external`.
{% endhint %}

{% tabs %}
{% tab title="For full B2COPY solutions" %}

```html
<iframe src="https://example.com/en/widget/{platform_id}/{platform_type}/leaderboard"></iframe>
```

where:

* `https://example.com` — your Web UI domain.
* `en` — the language code for English. You can replace it with any other language code supported in your Web UI.
* `{platform_id}` — the identifier of the investment platform instance (such as for MT4, MT5, and so on). For details, refer to [Obtain the identifier of the investment platform instance](#obtain-the-identifier-of-the-investment-platform-instance).
* `{platform_type}` — the type of platform:
  * `copy` — for copy trading
  * `mam` — for MAM
  * `pamm-new` — for PAMM

For example:

```html
<iframe src="https://demo-full.b2copy.b2broker.com/en/widget/1/copy/leaderboard"></iframe>
```

{% endtab %}

{% tab title="For standalone solutions" %}

```html
<iframe src="https://example.com/en/external/{platform_id}/{platform_type}/leaderboard"></iframe>
```

where:

* `https://example.com` — your Web UI domain.
* `en` — the language code for English. You can replace it with any other language code supported in your Web UI.
* `{platform_id}` — the identifier of the investment platform instance (such as for MT4, MT5, and so on). For details, refer to [Obtain the identifier of the investment platform instance](#obtain-the-identifier-of-the-investment-platform-instance).
* `{platform_type}` — the type of platform:
  * `copy` — for copy trading
  * `mam` — for MAM
  * `pamm` — for PAMM

For example:

```html
<iframe src="https://demo-sav2.b2copy.b2broker.com/en/external/1/copy/leaderboard"></iframe>
```

{% endtab %}
{% endtabs %}

<figure><img src="https://1963181118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxwcNnEuBTBq87kginPk%2Fuploads%2Fgit-blob-daa4b534d7e8e634f182f87d57c862bfc458086f%2Fleaderboard-widget.png?alt=media" alt="Leaderboard widget"><figcaption><p>Leaderboard widget</p></figcaption></figure>

## The `<iframe>` code for the Account Statistics widget

To embed the **Account Statistics** widget for a specific account on a web page, insert the `<iframe>` into the HTML code of your web page at the desired location. The `<iframe>` must include the same URL parameters as for embedding the **Leaderboard** widget, with the addition of the specific account number.

{% hint style="info" %}
The URL format for full B2COPY solutions and standalone solution is similar. The difference is that full B2COPY solutions use `/widget` in the URL, while standalone solutions use `/external`.
{% endhint %}

{% tabs %}
{% tab title="For full B2COPY solutions" %}

```html
<iframe src="https://example.com/en/widget/{platform_id}/{platform_type}/leaderboard/{account_number}"></iframe>
```

where:

* `https://example.com` — your Web UI domain.
* `en` — the language code for English. You can replace it with any other language code supported in your Web UI.
* `{platform_id}` — the identifier of the investment platform instance (such as for MT4, MT5, and so on). For details, refer to [Obtain the identifier of the investment platform instance](#obtain-the-identifier-of-the-investment-platform-instance).
* `{platform_type}` — the type of platform:
  * `copy` — for copy trading
  * `mam` — for MAM
  * `pamm-new` — for PAMM
* `{account_number}` — the number of the account for which **Account Statistics** you want to display on a web page.

For example:

```html
<iframe src="https://demo-full.b2copy.b2broker.com/en/widget/1/copy/leaderboard/2838035"></iframe>
```

{% endtab %}

{% tab title="For standalone solutions" %}

```html
<iframe src="https://example.com/en/external/{platform_id}/{platform_type}/leaderboard/{account_number}"></iframe>
```

where:

* `https://example.com` — your Web UI domain.
* `en` — the language code for English. You can replace it with any other language code supported in your Web UI.
* `{platform_id}` — the identifier of the investment platform instance (such as for MT4, MT5, and so on). For details, refer to [Obtain the identifier of the investment platform instance](#obtain-the-identifier-of-the-investment-platform-instance).
* `{platform_type}` — the type of platform:
  * `copy` — for copy trading
  * `mam` — for MAM
  * `pamm` — for PAMM
* `{account_number}` — the number of the account for which **Account Statistics** you want to display on a web page.

For example:

```html
<iframe src="https://demo-sav2.b2copy.b2broker.com/en/external/1/copy/leaderboard/2838035"></iframe>
```

{% endtab %}
{% endtabs %}

<figure><img src="https://1963181118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxwcNnEuBTBq87kginPk%2Fuploads%2Fgit-blob-784b7672c2b6f23b757d89abbd10c89b85d16ccb%2Faccount-statistics-widget.png?alt=media" alt="Account Statistics widget"><figcaption><p>Account Statistics widget</p></figcaption></figure>

## Apply a light or dark theme to widgets

To match the embedded widgets with your web page style, you can force a specific theme by adding `?theme=dark` or `?theme=light` to the URL.

{% tabs %}
{% tab title="For full B2COPY solutions" %}

```html
<iframe src="https://example.com/en/widget/{platform_id}/{platform_type}/leaderboard?theme=dark"></iframe>
```

{% endtab %}

{% tab title="For standalone solutions" %}

```html
<iframe src="https://example.com/en/external/{platform_id}/{platform_type}/leaderboard?theme=dark"></iframe>
```

{% endtab %}
{% endtabs %}

<figure><img src="https://1963181118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxwcNnEuBTBq87kginPk%2Fuploads%2Fgit-blob-1914861bd211cbf891223afb85130bc0be8319b0%2Fwidget-theme-param.png?alt=media" alt="Theme parameter for widgets"><figcaption><p>Theme parameter for widgets</p></figcaption></figure>

## Obtain the identifier of the investment platform instance

{% stepper %}
{% step %}
In the Back Office, go to **Investment Platform** > **Platform Manager**.
{% endstep %}

{% step %}
Find the required platform and click the **Edit** button in its row.
{% endstep %}
{% endstepper %}

<figure><img src="https://1963181118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxwcNnEuBTBq87kginPk%2Fuploads%2Fgit-blob-e8330c7e3b0b13b0f94970bab7f6533e37f1227c%2Fback-platform-manager.png?alt=media" alt="Platform Manager"><figcaption><p>Platform Manager</p></figcaption></figure>

The identifier of the investment platform instance is the last number in the platform URL. In the example below, the identifier is `11`.

<figure><img src="https://1963181118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxwcNnEuBTBq87kginPk%2Fuploads%2Fgit-blob-3b1b50254c973e56cd28ef873297c07af2f67365%2Fback-investment-platform-id-pointer.png?alt=media" alt="The investment platform ID in the URL"><figcaption><p>The investment platform ID in the URL</p></figcaption></figure>