Tutorials / Build a page / Navigation

/ Tutorials / Build a page / 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.

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:

<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"></nav>
		<main>
			<section id="symbol-info">
			</section>
			<section id="advanced-chart">
			</section>
			<section id="company-profile">
			</section>
			<section id="fundamental-data">
			</section>
			<section id="technical-analysis">
			</section>
			<section id="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>
	<template id="ticker-tape-widget-template">
		<!-- 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": "#"
				 }
			</script>
		</div>
		<!-- TradingView Widget END -->
	</template>
	<template id="symbol-info-template">
		<!-- 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 -->
	</template>
	<script
				type="text/javascript"
				src="https://s3.tradingview.com/tv.js"
			></script>
	<template id="advanced-chart-template">
		<!-- TradingView Widget BEGIN -->
		<div
			class="tradingview-widget-container"
			style="height: 100%; width: 100%"
		>
			<div
				id="tradingview_ae7da"
				style="height: calc(100% - 32px); width: 100%"
			></div>

			<script type="text/javascript">
				new TradingView.widget({
					autosize: true,
					symbol: 'NASDAQ:AAPL',
					interval: 'D',
					timezone: 'Etc/UTC',
					theme: 'light',
					style: '1',
					locale: 'en',
					hide_side_toolbar: false,
					allow_symbol_change: true,
					studies: ['STD;MACD'],
					container_id: 'tradingview_ae7da',
				});
			</script>
		</div>
		<!-- TradingView Widget END -->
	</template>
	<template id="company-profile-template">
		<!-- 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 -->
	</template>
	<template id="fundamental-data-template">
		<!-- 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 -->
	</template>
	<template id="technical-analysis-template">
		<!-- 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 -->
	</template>
	<template id="top-stories-template">
		<!-- 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 -->
	</template>
	<script>
		function getQueryParam(param) {
			let urlSearchParams = new URLSearchParams(window.location.search);
			return urlSearchParams.get(param);
		}
		function readSymbolFromQueryString() {
			return getQueryParam('tvwidgetsymbol');
		}

		function cloneTemplateInto(templateId, targetId, rewrites) {
			const tmpl = document.querySelector(`#${templateId}`);
			if (!tmpl) return;
			const target = document.querySelector(`#${targetId}`);
			if (!target) return;
			target.innerText = '';
			const clone = tmpl.content.cloneNode(true);
			if (rewrites) {
				const script = clone.querySelector('script');
				script.textContent = rewrites(script.textContent);
			}
			target.appendChild(clone);
		}
		const symbol = readSymbolFromQueryString() || 'NASDAQ:AAPL';
		function setSymbol(scriptContent) {
			return scriptContent.replace(/"symbol": "([^"]*)"/g, () => {
				return `"symbol": "${symbol}"`;
			});
		}
		cloneTemplateInto('symbol-info-template', 'symbol-info', setSymbol);
		cloneTemplateInto('advanced-chart-template', 'advanced-chart');
		cloneTemplateInto('company-profile-template', 'company-profile', setSymbol);
		cloneTemplateInto('fundamental-data-template', 'fundamental-data', setSymbol);
		cloneTemplateInto('technical-analysis-template', 'technical-analysis', setSymbol);
		cloneTemplateInto('top-stories-template', 'top-stories', setSymbol);
		if (symbol) {
			document.title = `Stock Details - ${symbol}`;
		}
	</script>
</html>

Navigation

Using the Ticker Tape for navigation

Complete code

Dynamic symbols

Conclusion