Connect UI

Connect UI icon

Overview

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

Code Snippet

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.

2. The javascript

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 <body> tag.

Customizing Your Widget

Widget Settings

  • data-widget-id: string

    An 18 character numeric string. This is unique to each widget.

    <a href="..." data-widget-id="##################">...</a>

  • data-theme: string

    Choose between a dark or 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.

    Default: light

    <a href="..." data-theme="light">...</a>

  • data-width: string

    The width of the widget in pixels.

    Default: 300

    <a href="..." data-width="300">...</a>

  • data-height: string

    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).

    Default: auto

    <a href="..." data-height="auto">...</a>