Broker Rating widget

/ Widgets / Brokers / Broker Rating

The Broker Rating widget allows you to showcase your broker’s rating from TradingView directly on your website. It displays the star rating out of 5, awards your broker has won, and the total number of reviews.

Requirements

The widget uses ‘blob’ URLs to display broker awards. If you define a Content Security Policy (CSP) on your site, ensure your CSP includes the following directive to allow these URLs:

img-src 'self' blob:;

This directive allows your site to fetch and display images from ‘blob’ URLs, which are necessary for showing broker awards within the widget.

To add the Broker Rating widget to your webpage, first include the following script in your HTML. This script registers a new custom element <tv-broker-rating>.

<script src="https://www.tradingview-widget.com/widget/broker-rating.js?locale=en&broker=sample"></script>

After adding the script, you can use the custom element in your HTML as follows:

<tv-broker-rating broker="sample" theme="light" lang="en" transparent></tv-broker-rating>

The widget should be placed within a container element with a defined width, such as within a flexbox container or with specific width CSS styles. The displayed height of the widget depends on the number of awards and the displayed width.

Example code

<script src="https://www.tradingview-widget.com/widget/broker-rating.js?locale={your_locale}&broker={your_broker_name}"></script>
<div class="broker-rating-container">
  <!-- Broker Rating widget will be inserted here -->
  <tv-broker-rating broker="{your_broker_name}" theme="{your_theme}" lang="{your_locale}" show-broker-name show-reviews></tv-broker-rating>
</div>

Replace {your_locale}, {your_broker_name}, and {your_theme} with your specific settings.

Script URL parameters

Ensure the script URL contains query parameters for locale and broker that match the attributes on the custom element. This prevents additional network requests for displaying the data:

<script src="https://www.tradingview-widget.com/widget/broker-rating.js?locale={your_locale}&broker={your_broker_name}"></script>
<div class="broker-rating-container">
  <tv-broker-rating broker="{your_broker_name}" lang="{your_locale}"></tv-broker-rating>
</div>

Replace {your_locale} and {your_broker_name} with your settings.

Custom element attributes

The <tv-broker-rating> element supports several attributes to customize its appearance and behavior:

broker: The name of your broker as supplied by TradingView. Contact your TradingView representative for your broker’s internal name.
theme: Defines the color theme. Options are 'light' or 'dark'.
lang: Specifies the language for text and tooltips. Available options include en (default), ar_AE, br, ca_ES, cs, de_DE, es, fr, he_IL, hu_HU, id, in, it, ja, kr, ms_MY, pl, ru, sv_SE, th_TH, tr, vi_VN, zh_CN, zh_TW, el, nl_NL, and ro.
transparent: If included, the widget’s background will be transparent without an outer border. If omitted, the widget will use the default theme background color.

Display options

The <tv-broker-rating> element includes several attributes to control which information is displayed:

hide-rating: Hides the qualitative rating (e.g., “Excellent”, “Very Good”) based on the broker’s overall score.
hide-reviews: Hides the total number of user reviews.
show-score: Shows the numerical rating score (e.g., “4.4”).
show-number-accounts: Shows the total number of trading accounts with this broker.
show-broker-name: Adds the broker’s name at the top of the widget.

These attributes work as boolean flags. To modify the default behavior:

To enable an option: Add the attribute with no value
```
<tv-broker-rating show-score></tv-broker-rating>
```
Omitting an attribute entirely will use its default behavior

You can combine multiple display options to create a comprehensive view of your broker’s performance. For example, showing both the numerical score and review count can help build trust with potential clients:

<tv-broker-rating
  broker="sample"
  show-score
  hide-rating
  hide-reviews
  show-broker-name>
</tv-broker-rating>

Using the script for multiple brokers or locales

It is possible to load the script once and use it for multiple different brokers and/or locales. However, if you do this, there will be an additional network request for data for any instance that doesn’t match the settings defined in the script query parameter.

Visual integration

The Broker Rating widget is designed to be flexible in terms of visual integration with your website. Here are several approaches to customize its appearance:

Using transparent background

For seamless integration with your site’s design, enable the transparent background mode by adding the transparent attribute. This removes the widget’s default background and border, allowing it to blend with your page’s design:

<tv-broker-rating
  broker="sample"
  theme="dark"
  transparent>
</tv-broker-rating>

When using transparent mode, choose the appropriate theme value to ensure text readability:

Use theme="light" for light backgrounds (produces dark text)
Use theme="dark" for dark backgrounds (produces light text)

Custom styling

You can apply CSS styles directly to the <tv-broker-rating> element to match your site’s design system. Here’s an example:

tv-broker-rating {
  /* Custom border radius */
  border-radius: 16px;

  /* Subtle border */
  border: 1px solid rgba(0, 0, 0, 0.3);

  /* Semi-transparent background */
  background-color: rgba(0, 0, 0, 0.1);

  /* Border color surrounding award icons */
  --award-border-color-custom: #5EB5E6;
}

Here’s a complete example combining transparent mode with custom styling:

<div class="widget-container">
  <tv-broker-rating
    broker="sample"
    theme="light"
    lang="en"
    transparent
    hide-rating
    hide-reviews
    show-number-accounts
    show-score>
  </tv-broker-rating>
</div>

Contact us

For feedback or questions, please contact your TradingView representative. They can assist with any issues or provide further customization options for the widget.