Widget integration
In this section, we will discuss the integration of each TradingView widget, with detailed instructions regarding code embedding and widget placement. Each widget provides different insights into a company or stock’s performance, and as such, they will each play a unique role on our web page.
Matching the widgets to your page design
All the widgets have two themes to choose from: ‘light’ and ‘dark’. In this tutorial, we will use the ‘light’ theme because it matches our existing page design, which has a white background color.
Integrating the Ticker Tape Widget
We’ll start by integrating the Ticker Tape widget into our webpage. The Ticker Tape gives a real-time representation of the performance of a group of symbols.
Head to the configurator for the Ticker Tape widget, customise the settings as you see fit and then copy the code to be embedded in the page.
Getting the widget into the page is as simple as copy-pasting the embed code inside the element on the page where you would like it to appear. In this case we want to insert the code inside this element:
which would end up looking like this:
However, Ticker Tape is one of the widgets which doesn’t require this and will instead occupy enough height to display it’s contents automatically. So we can adjust the skeleton styles to remove the CSS manually setting a height for the #ticker-tape
element.
This will remove the skeleton styling on that element and set height to the default of auto
.
Integrating the Symbol Info Widget
Next, we will add the Symbol Info widget, which provides useful details related to a specific symbol. The widget displays key summary metrics for the symbol, including the current price and fundamental data such as the symbol’s market cap.
Symbol Info is another widget which doesn’t require a specific height to be set for the container and will instead automatically adjust it’s height to fit it’s content.
So adding the Symbol info widget follows the same steps as the Ticker Tape widget.
- Configure the widget on the Wizard page
- Grab the embed code
- paste it within the desired element on the page (
<section id="symbol-info"></section>
) - and adjust the CSS to remove the skeleton styling and predefined height.
You should end up with the HTML element looking like this:
and the CSS being updated like this:
Adding the Advanced Chart Widget
The Advanced Chart widget is one of the most valuable widgets for visualizing stock data. It provides various chart types, technical indicators, and drawing tools for efficient technical analysis.
Just like all the widgets, integrating the Advanced Chart widget is as simple as configuring your options, copying the embed code, and pasting it into the desired section of your page.
However, this is the first widget we’ve encountered during this tutorial which offers additional configuration for height of the widget. When ‘Use container size’ is selected then the widget will automatically grow to fill the size of the containing widget. Thus it is important to define a height for the container element if you make use of the autosize option.
In this case we are setting the height of the container to 500px via the CSS rules for that element:
Don’t forget to remove the skeleton styles for the #advanced-chart
selector as you’ve previously done for the Ticker Tape and Symbol Info widgets.
Integrating the remaining Widgets (Company Profile, Fundamental Data, Technical Analysis, Top Stories)
The remaining widgets, namely the Company Profile, Fundamental Data, Technical Analysis, and Top Stories widgets provide detailed information about the company, its financials, technical analysis of the stock, and news related to the company respectively.
Embed each of these widgets in their respective <section id=""></section>
that matches the widget name. You can get the code for these widgets like the others from TradingView’s widget page.
Remember to adjust parameters such as "symbol"
, "colorTheme"
, "isTransparent"
and "locale"
etc., to match your specific requirements and match the style of your page.
That’s it - you’ve now integrated each of the TradingView widgets into your webpage. This combination will provide an in-depth overview of any stock your page visitors choose to view.