ChartIQ Blog

Posted on by Sidd

Integrating Financial Content Seamlessly with Widgets

We recently introduced our new independent small widgets which are fully customizable and interact with our portal. Just like the portal, they come with data included which means no US exchange fees, very low negotiated index fees and optional real-time and international data.

Our first widget is a sidebar widget. Here is a fully functional example, on the left. The sidebar can be customized with any stocks, ETFs, indexes etc. of your choice that are sorted under tabs.

Our second widget is a carousel. The carousel can be customized to show as many symbols and charts as you wish, with a lot of customization options. Do what you want!

Customers can generate both the sidebar widget and the carousel by using the ChartIQ customization tool. They can also generate these widgets in javascript to create a custom widget for every page. Users can pass in their own stylesheets and make the widget completely blend in with any website to match brand standards, look and feel.

We are currently working on giving our customers every piece of our portal as a widget.  As an example, here is Our "Rates" widget from the Markets page of our portal.

The Making of our Portal and Widgets Demo

To demonstrate the ease of use, flexibility and interaction between our portal and our widgets, we challenged ourselves to create a demonstration site in just a few hours. Here is a step by step guide showing you just how easy it is.

Portal and Widget Demo

Step 1: Get Widget/Portal Code

As soon as you have your unique URL from sales, get carousel code here and sidebar code here. Your portal code will be provided by sales, or you can join our beta and get portal code here. Customize to your hearts content.

Step 2: Paste Widget/Portal Code into your website

Simply paste the code from Step 1 wherever the widget/portal needs to appear on your website.

Step 3: Enjoy!

That's it. You're done.

Interaction Between the Widgets and the Portal

You will notice that on our demo site, clicking the chart titles within the sidebar and the carousel take you to our fully embedded portal directly to the page for that ticker. The url is set up at the same time as you setup the widget and the symbol is automatically added to the URL. A little simple javascript does the trick of taking the portal to the page for the ticker. A more detailed blog post on that is coming up. Stay tuned

Portal Pages as Sidebars

On our demo site, we also have the research, financials, filings and insider trade pages from the portal showing as a sidebar on an article page:

Portal as Sidebar

This takes very little effort. We have four links at the top of the sidebar which call a simple script that changes the URL of the iFrame:

<a href="javascript:goToPage('overview')">Snapshot</a>
<a href="javascript:goToPage('financials')">Financials</a>
<a href="javascript:goToPage('filings')">Filings</a>
<a href="javascript:goToPage('insiders')">Insiders</a>
<script> function goToPage(page) { var frame = $('#sidebarFrame'); var url = 'Your_unique_url_here/' + page; switch (page) { case 'overview': url += '.html?sym=TSLA&#&sec=q&sec=ch&sec=fe'; break; case 'financials': case 'filings': case 'insiders': url += '.html?sym=TSLA&#&sec=q'; break; } frame.attr('src', url); } </script>

Advanced Customization

Our new sidebar and carousel widgets  are flexible with design, look and feel - take your own fully customized stylesheet per widget. The portal colors and stylesheet are per-account working with our design team. We are working on giving you widget-like flexibility for the portal components too. Sign up below to be the first to beta the new functionality later this year.

Auto Generation

Auto generating widgets based on the content/tickers of a page is easy and only takes a few lines of code. Look out for the next blog post on how easy implementation can be.


Contact us to try this functionality on your site now!