The Connect UI widgets make it possible for you to embed CapitalCube's rich analyses into your website. This gives your users greater context and insight into your content.
These widgets are built specifically for the web, mobile web and touch devices. As a result they are responsive, they load fast and scale with your traffic.
Creating a Widget
To get started, all you need to do is copy and paste the code snippet from the widget you wish to use into your website.
Here's an example embed code:
1. <a href="online.capitalcube.com/#!/screener/528ddc32fb6fce9c1d8b4567" class="cc-widget" data-widget-id="78857158069586341632">Top 5 Dividends Stocks by CapitalCube</a>
2. <script src="//ui.capitalcube.com/widgets.js" charset="utf-8" async></script>
The Elements of the Snippet
1. The widget
This element will turn into the widget itself. You must place it where you wish the widget to appear on your website.
This element powers CapitalCube's widgets. If you have multiple CapitalCube widgets on the page, you only need to include it once. For optimized performance, you should place this element at the end of your
Customizing Your Widget
An 18 character numeric string. This is unique to each widget.
<a href="..." data-widget-id="##################">...</a>
Choose between a
light theme. Use the light option if your website has a white or light coloured background or the dark if it has a black or dark colour background.
<a href="..." data-theme="light">...</a>
The width of the widget in pixels.
<a href="..." data-width="300">...</a>
The height of the widget in pixels. You can also choose
auto so that the widget automatically resizes to fit it's content (so that your users don't have to scroll).
<a href="..." data-height="auto">...</a>