Tutorials / Build a page / Getting started

/ Tutorials / Build a page / Getting started

Getting started

This guide is designed to help you create a comprehensive stock symbol page using TradingView widgets. This page will provide up-to-date and accurate information about any stock you choose to display. The basic structure for this page will be built using simple HTML, while further functionality will be provided by integrating TradingView’s variety of widgets.

Setting up the page structure

Our journey begins with a basic HTML page, serving as the skeleton on which we will build our stock viewing platform. Here’s what that skeleton looks like:

<body>
    <header>
        <a id="site-logo" href="#">TradingVista</a>
        <input type="search" placeholder="Search..." />
    </header>
    <nav id="ticker-tape">Ticker Tape</nav>
    <main>
        <section id="symbol-info">Symbol Info</section>
        <section id="advanced-chart">Advanced Chart</section>
        <section id="company-profile">Company Profile</section>
        <section id="fundamental-data">Fundamental Data</section>
        <section id="technical-analysis">Technical Analysis</section>
        <section id="top-stories">Top Stories</section>
        <section id="powered-by-tv">
        </section>
    </main>
    <footer>
    </footer>
</body>

You can view the starting page here and the source code for the entire starting page here. This includes CSS to style and define the layout.

Note

We’ve included an attribution on the page stating that the data and charts are provided by TradingView. This form can be filled out to discuss options regarding the removal of this attribution.

Integrating TradingView Widgets into the page

TradingView offers a wide array of widgets designed to provide comprehensive information about a given stock. For this tutorial, we will be integrating the following widgets into our page:

Each widget is integrated into the page by embedding code directly into the HTML source. These widgets will be placed into the corresponding <section id="widget-name"></section> element in the code. The integration of each widget will be discussed in detail in the following sections.

With the basic structure in place, we are ready to start integrating these widgets into our page. Let’s begin!

Complete code

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Stock Details</title>
		<style>
			:root {
				--gap-size: 32px;
				box-sizing: border-box;
				font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto,
					Ubuntu, sans-serif;
				color: #000;
			}

            * {
                box-sizing: border-box;
            }

			body {
				margin: 0;
				padding: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				background: #fff;
			}

			header,
			footer {
				display: flex;
				width: 100%;
				align-items: center;
				background: rgba(0, 0, 0, 0.05);
				gap: 12px;
			}

			header {
				justify-content: space-between;
				padding: 0 var(--gap-size);
				gap: calc(var(--gap-size) * 2);
				box-shadow: rgba(0, 0, 0, 0.05) 0 2px 6px 0;
				flex-direction: row;
			}

			header #site-logo {
				font-weight: 600;
				font-size: 32px;
				padding: 16px;
				background: var(
					--18-promo-gradient-02,
					linear-gradient(90deg, #00bce5 0%, #2962ff 100%)
				);
				-webkit-text-fill-color: transparent;
				-webkit-background-clip: text;
				background-clip: text;
			}

			header input[type='search'] {
				padding: 10px;
				width: 100%;
				height: 32px;
				max-width: 400px;
				border: 1px solid #ccc;
				border-radius: 20px;
			}

			footer {
				flex-direction: column;
				padding: calc(var(--gap-size) * 0.5) var(--gap-size);
				margin-top: var(--gap-size);
				border-top: solid 2px rgba(0, 0, 0, 0.1);
				justify-content: center;
			}

			footer p,
			#powered-by-tv p {
				margin: 0;
				font-size: 12px;
				color: rgba(0, 0, 0, 0.6);
			}

			main {
				display: grid;
				width: 100%;
				padding: 0 calc(var(--gap-size) * 0.5);
				max-width: 960px;
				grid-template-columns: 1fr 1fr;
				grid-gap: var(--gap-size);
			}

			.span-full-grid,
			#symbol-info,
			#advanced-chart,
			#company-profile,
			#fundamental-data {
				grid-column: span 2;
			}

            .span-one-column,
            #technical-analysis,
			#top-stories,
			#powered-by-tv {
                grid-column: span 1;
            }

			.skeleton,
			#ticker-tape,
			#symbol-info,
			#advanced-chart,
			#company-profile,
			#fundamental-data,
			#technical-analysis,
			#top-stories,
			#ticker-tape {
				text-align: center;
				padding: 16px;
				font-size: 24px;
				background: rgba(0, 0, 0, 0.075);
				border-radius: 4px;
			}

			#ticker-tape {
				width: 100%;
				margin-bottom: var(--gap-size);
				height: 75px;
			}

			#symbol-info {
				height: 175px;
			}

			#advanced-chart {
				height: 500px;
			}

			#company-profile {
				height:390px;
			}

			#fundamental-data {
				height: 490px;
			}

			#technical-analysis,
			#top-stories {
				height: 425px;
			}

			#powered-by-tv {
				display: flex;
				background: #f8f9fd;
				border: solid 1px #e0e3eb;
				text-align: justify;
				flex-direction: column;
				gap: 8px;
				font-size: 14px;
				padding: 16px;
				border-radius: 6px;
			}

			#powered-by-tv a, #powered-by-tv a:visited {
				color: #2962ff;
			}

			@media (max-width: 800px) {
				main > section,
				.span-full-grid,
				#technical-analysis,
				#top-stories,
				#powered-by-tv {
					grid-column: span 2;
				}
			}
		</style>
	</head>
	<body>
		<header>
			<a id="site-logo" href="#">TradingVista</a>
			<input type="search" placeholder="Search..." />
		</header>
		<nav id="ticker-tape">Ticker Tape</nav>
		<main>
			<section id="symbol-info">Symbol Info</section>
			<section id="advanced-chart">Advanced Chart</section>
			<section id="company-profile">Company Profile</section>
			<section id="fundamental-data">Fundamental Data</section>
			<section id="technical-analysis">Technical Analysis</section>
			<section id="top-stories">Top Stories</section>
			<section id="powered-by-tv">
				<svg xmlns="http://www.w3.org/2000/svg" width="157" height="21">
					<use href="/widget-docs/tradingview-logo.svg#tradingview-logo"></use>
				</svg>
				<p>
					Charts and financial information provided by TradingView, a popular
					charting & trading platform. Check out even more
					<a href="https://www.tradingview.com/features/">advanced features</a>
					or <a href="https://www.tradingview.com/widget/">grab charts</a> for
					your website.
				</p>
			</section>
		</main>
		<footer>
			<p>
				This example page is part of a tutorial for integrating TradingView
				widgets into your website.
			</p>
			<p><a href="https://www.tradingview.com/widget-docs/tutorials/build-page/#build-a-page">View the tutorial</a></p>
		</footer>
	</body>
	<script></script>
</html>

Getting started

Setting up the page structure

Integrating TradingView Widgets into the page

Complete code

Build a page

Widget integration