Stock Widget (TradingView)

Interact has support to embed other functionality into your intranet. Using the below steps you'll be able to add any of the TradingView widgets to your intranet.

Common Widgets

Ticker Widget
Customize Widget on TradingView

Mini Chart Widget
Customize Widget on TradingView

Symbol Info Widget
Customize Widget on TradingView

Adding Widget to Interact

Adding a TradingView widget to your intranet is simple. Follow the steps below to get any of the widgets shown on your intranet:

1. Pick a widget
You can find a list of all the widgets on TradingView. In this example, we'll embed Mini Chart Widget as an example.

2. Customize Widget
Once you've selected a widget, you will need to customize it (Click 'Get Widget' on TradingView). Configure the on-screen widget options within TradingView. Once you're done click 'Apply'.

3. Generate Widget
Now you've generated the widget it will create the embed code below.

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <div class="tradingview-widget-copyright"><a href="https://uk.tradingview.com/symbols/FX-EURUSD/" rel="noopener" target="_blank"><span class="blue-text">EURUSD Rates</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
  {
  "symbol": "FX:EURUSD",
  "width": 350,
  "height": 220,
  "locale": "uk",
  "dateRange": "12m",
  "colorTheme": "light",
  "trendLineColor": "#37a6ef",
  "underLineColor": "#e3f2fd",
  "isTransparent": false,
  "autosize": false,
  "largeChartUrl": ""
}
  </script>
</div>
<!-- TradingView Widget END -->

We require the JSON options object from the code above:

{
  "symbol": "FX:EURUSD",
  "width": 350,
  "height": 220,
  "locale": "uk",
  "dateRange": "12m",
  "colorTheme": "light",
  "trendLineColor": "#37a6ef",
  "underLineColor": "#e3f2fd",
  "isTransparent": false,
  "autosize": false,
  "largeChartUrl": ""
}

We also require the widget name from the generated embed code. We can find that from the script src attribute URL. Using our example...

<!-- Widget HTML -->
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async></script>
  
<!-- Widget URL -->
https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js

<!-- Widget Name -->
mini-symbol-overview

Now we've got the widget name and JSON options we need to generate the embed URL. The TradingView embed is in the following format:

https://s.tradingview.com/embed-widget/{embed-name}/?locale={locale}#{urlEncodedOptions}

Swapping the widget name and the locale (found in our JSON options) from above this is our widget URL:

https://s.tradingview.com/embed-widget/mini-symbol-overview/?locale=uk#

Now for the most important part, passing JSON widget options in the URL! The JSON options are required to be URL encoded - URL Encoder Online.

// Input
{
  "symbol": "FX:EURUSD",
  "width": 350,
  "height": 220,
  "locale": "uk",
  "dateRange": "12m",
  "colorTheme": "light",
  "trendLineColor": "#37a6ef",
  "underLineColor": "#e3f2fd",
  "isTransparent": false,
  "autosize": false,
  "largeChartUrl": ""
}

// Encoded
%7B%0A%20%20%22symbol%22%3A%20%22FX%3AEURUSD%22%2C%0A%20%20%22width%22%3A%20350%2C%0A%20%20%22height%22%3A%20220%2C%0A%20%20%22locale%22%3A%20%22uk%22%2C%0A%20%20%22dateRange%22%3A%20%2212m%22%2C%0A%20%20%22colorTheme%22%3A%20%22light%22%2C%0A%20%20%22trendLineColor%22%3A%20%22%2337a6ef%22%2C%0A%20%20%22underLineColor%22%3A%20%22%23e3f2fd%22%2C%0A%20%20%22isTransparent%22%3A%20false%2C%0A%20%20%22autosize%22%3A%20false%2C%0A%20%20%22largeChartUrl%22%3A%20%22%22%0A%7D

Once we've encoded the options we can finish our embed URL:

// Embed URL - Format
https://s.tradingview.com/embed-widget/{embed-name}/?locale={locale}#{urlEncodedOptions}

// Embed URL
https://s.tradingview.com/embed-widget/mini-symbol-overview/?locale=uk#%7B%0A%20%20%22symbol%22%3A%20%22FX%3AEURUSD%22%2C%0A%20%20%22width%22%3A%20350%2C%0A%20%20%22height%22%3A%20220%2C%0A%20%20%22locale%22%3A%20%22uk%22%2C%0A%20%20%22dateRange%22%3A%20%2212m%22%2C%0A%20%20%22colorTheme%22%3A%20%22light%22%2C%0A%20%20%22trendLineColor%22%3A%20%22%2337a6ef%22%2C%0A%20%20%22underLineColor%22%3A%20%22%23e3f2fd%22%2C%0A%20%20%22isTransparent%22%3A%20false%2C%0A%20%20%22autosize%22%3A%20false%2C%0A%20%20%22largeChartUrl%22%3A%20%22%22%0A%7D

4. Embed into Interact
Within your Interact layout, you need to add a new widget and select IFrame.

Copy and Paste the TradingView Embed URL we created above in the field Web Page URL and save the widget. Note: Adding a widget name or changing IFrame Size is optional.

Now you should see your new widget within the layout.

Additional Widgets

Market Overview Widget
Customize Widget on TradingView

Economic Calendar Widget
Customize Widget on TradingView