/ Tutorials / Build a page / Navigation

Navigation

Creating a user-friendly page is essential for a good user experience. Navigation plays a crucial role in this. TradingView widgets provide customization options that we can use to improve navigation. The Ticker Tape widget, which displays a scrolling list of symbols, can be customized to redirect clicks on symbols to your own page instead of the default TradingView webpage. In this section, we will demonstrate how to use JavaScript to enable this functionality.

Using the Ticker Tape for navigation

Customize the Ticker Tape widget by adjusting the largeChartUrl property in the widget’s options. This field allows you to define your custom URL to which the user will be redirected upon clicking a symbol in the Ticker Tape.

Here is an example of how to do this:

HTML
<script
  type="text/javascript"
  src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js"
  async
>
    {
        /* other options ... */
        "largeChartUrl": "https://your-site.com/your-symbols-page"
    }
</script>

By setting the current page URL as largeChartUrl, the page reloads with the selected symbol name in the query string when a symbol is clicked. The selected symbol name will be appended to the URL as a tvwidgetsymbol parameter.

Given that we have already set up the page to display data corresponding to the symbol in the URL query string, this will automatically result in the page displaying data for the symbol the user clicked on within the Ticker Tape. This is a straightforward yet powerful navigation feature for your users.

With this approach, we’ve effectively utilized the customizability of the TradingView widgets to design a navigational method that significantly improves user interactivity and experience on our webpage. Now, users can seamlessly navigate through various stocks and view their preferred stock’s data.

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;
				z-index: 1;
			}


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


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


			#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">
			<!-- TradingView Widget BEGIN -->
			<div class="tradingview-widget-container">
				<div class="tradingview-widget-container__widget"></div>
				<script
					type="text/javascript"
					src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js"
					async
				>
					{
					"symbols": [
					  {
						"description": "",
						"proName": "NASDAQ:TSLA"
					  },
					  {
						"description": "",
						"proName": "NASDAQ:AAPL"
					  },
					  {
						"description": "",
						"proName": "NASDAQ:NVDA"
					  },
					  {
						"description": "",
						"proName": "NASDAQ:MSFT"
					  },
					  {
						"description": "",
						"proName": "NASDAQ:AMZN"
					  },
					  {
						"description": "",
						"proName": "NASDAQ:GOOGL"
					  },
					  {
						"description": "",
						"proName": "NASDAQ:META"
					  },
					  {
						"description": "",
						"proName": "NYSE:BRK.B"
					  },
					  {
						"description": "",
						"proName": "NYSE:LLY"
					  },
					  {
						"description": "",
						"proName": "NYSE:UNH"
					  },
					  {
						"description": "",
						"proName": "NYSE:V"
					  },
					  {
						"description": "",
						"proName": "NYSE:WMT"
					  }
					],
					"showSymbolLogo": true,
					"colorTheme": "light",
					"isTransparent": false,
					"displayMode": "adaptive",
					"locale": "en",
					"largeChartUrl": "https://www.tradingview.com/widget-docs/tutorials/build-page/demo/"
					 }
				</script>
			</div>
			<!-- TradingView Widget END -->
		</nav>
		<main>
			<section id="symbol-info">
				<!-- TradingView Widget BEGIN -->
				<div class="tradingview-widget-container">
					<div class="tradingview-widget-container__widget"></div>
					<script
						type="text/javascript"
						src="https://s3.tradingview.com/external-embedding/embed-widget-symbol-info.js"
						async
					>
						{
						"symbol": "NASDAQ:AAPL",
						"width": "100%",
						"locale": "en",
						"colorTheme": "light",
						"isTransparent": true
						 }
					</script>
				</div>
				<!-- TradingView Widget END -->
			</section>
			<section id="advanced-chart">
				<!-- TradingView Widget BEGIN -->
				<div class="tradingview-widget-container" style="height:100%;width:100%">
					<div class="tradingview-widget-container__widget" style="height:calc(100% - 32px);width:100%"></div>
					<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async>
					{
					"autosize": true,
					"symbol": "NASDAQ:AAPL",
					"interval": "D",
					"timezone": "Etc/UTC",
					"theme": "light",
					"style": "1",
					"locale": "en",
					"allow_symbol_change": true,
					"calendar": false,
					"support_host": "https://www.tradingview.com"
				}
					</script>
				</div>
				<!-- TradingView Widget END -->
			</section>
			<section id="company-profile">
				<!-- TradingView Widget BEGIN -->
				<div class="tradingview-widget-container">
					<div class="tradingview-widget-container__widget"></div>
					<script
						type="text/javascript"
						src="https://s3.tradingview.com/external-embedding/embed-widget-symbol-profile.js"
						async
					>
						  {
						  "width": "100%",
						  "height": "100%",
						  "colorTheme": "light",
						  "isTransparent": true,
						  "symbol": "NASDAQ:AAPL",
						  "locale": "en"
						}
					</script>
				</div>
				<!-- TradingView Widget END -->
			</section>
			<section id="fundamental-data">
				<!-- TradingView Widget BEGIN -->
				<div class="tradingview-widget-container">
					<div class="tradingview-widget-container__widget"></div>
					<script
						type="text/javascript"
						src="https://s3.tradingview.com/external-embedding/embed-widget-financials.js"
						async
					>
						  {
						  "colorTheme": "light",
						  "isTransparent": true,
						  "largeChartUrl": "",
						  "displayMode": "adaptive",
						  "width": "100%",
						  "height": "100%",
						  "symbol": "NASDAQ:AAPL",
						  "locale": "en"
						}
					</script>
				</div>
				<!-- TradingView Widget END -->
			</section>
			<section id="technical-analysis">
				<!-- TradingView Widget BEGIN -->
				<div class="tradingview-widget-container">
					<div class="tradingview-widget-container__widget"></div>
					<script
						type="text/javascript"
						src="https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js"
						async
					>
						{
						"interval": "15m",
						"width": "100%",
						"isTransparent": true,
						"height": "100%",
						"symbol": "NASDAQ:AAPL",
						"showIntervalTabs": true,
						"displayMode": "single",
						"locale": "en",
						"colorTheme": "light"
						 }
					</script>
				</div>
				<!-- TradingView Widget END -->
			</section>
			<section id="top-stories">
				<!-- TradingView Widget BEGIN -->
				<div class="tradingview-widget-container">
					<div class="tradingview-widget-container__widget"></div>
					<script
						type="text/javascript"
						src="https://s3.tradingview.com/external-embedding/embed-widget-timeline.js"
						async
					>
						  {
						  "feedMode": "symbol",
						  "symbol": "NASDAQ:AAPL",
						  "colorTheme": "light",
						  "isTransparent": true,
						  "displayMode": "regular",
						  "width": "100%",
						  "height": "100%",
						  "locale": "en"
						}
					</script>
				</div>
				<!-- TradingView Widget END -->
			</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>
		function getQueryParam(param) {
			let urlSearchParams = new URLSearchParams(window.location.search);
			return urlSearchParams.get(param);
		}
		function readSymbolFromQueryString() {
			return getQueryParam('tvwidgetsymbol');
		}
		const symbol = readSymbolFromQueryString() || 'NASDAQ:AAPL';
		if (symbol) {
			document.title = `Stock Details - ${symbol}`;
		}
	</script>
</html>

Previous

Dynamic symbols

Next

Conclusion