Stock Price gadget

Note:

Your organization must be subscribed to Igloo's Gadget Depot to use gadgets in your digital workplace. Contact your Customer Success Manager or email the Customer Success Team to subscribe to the Gadget Depot and get access to all available gadgets.

The Stock Price gadget displays the price of a configured stock as of market close on the previous day. In addition to price information, it also shows the % change from the previous day and its direction.

The Stock Price gadget showing the current value of a stock and its % change.

Sections in this article:

Considerations and caveats

Alpha Vantage API key requirement

You must have an Alpha Vantage Stock API key to use this gadget. Go to Alpha Vantage | Claim your Free API Key to get a free key. 

If you are using a free key, there is a limit of 5 API requests per minute and 500 requests per day. A premium API Key will remove the daily limit and increase the number of requests made per minute.

Setting it up

Placing it

You set up gadgets in a way similar to widgets (see, Placing and setting up a widget). However, instead of selecting a gadget directly from the widget carousel, select the Integrations widget. When editing the Integrations widget, select the Igloo Gadget Depot; then select the gadget you want to configure. For information about gadget-specific configuration options, refer to the options below. 

This gadget is best placed in a narrow side column.

Options tab

General Options

Setting Description
Title

 Enter a title for the widget. The title appears as a heading above the widget's contents. You should use the title to give users an idea of why the widget's content is important to them or highlight the content's purpose. Titles also better structure a page's content by clearly denoting different sections.

When entering a title, you do so only for your currently selected language. If your digital workplace supports multiple languages, you should select Translation and enter a title for each supported language.  

Can contain a maximum of 140 characters.
Title link

 Enter the URL of a location in your digital workplace. Users who click the widget's title, if it has one, will go to this location. Whether you enter the link as a relative URL or an absolute URL does not matter, it will convert to an absolute URL the next time you edit the widget.

Can contain a maximum of 2,083 characters.
Description

Enter a description for the widget. The description appears between the title and the widget's contents. You can use this text to provide additional context to the widget or instructions for using the widget.

When entering a description, you do so only for your currently selected language. If your digital workplace supports multiple languages, you should select Translation and enter a description for each supported language.
 

 

Configuration options

Option Description
Stock Symbol Enter the stock symbol of the stock you want to display.
Alpha Vantage API Token Enter your Alpha Vantage API Key.
 

Color and Style options

Option Description
Text Font

 Enter the font-family that the text in the gadget will use. You can enter multiple font-families by separating each with a comma. When multiple font-families are specified, a user's browser will always attempt to use the leftmost available one.

Example A: Specific font-family: 
Tahoma
Example B: Multiple font-families: 
Tahoma, Geneva, sans-serif
Border Radius

 Enter the radius of the gadget's corners. For reference:
  • 0: results in a 90° corner
  • 10: is the equivalent of the CTA Widgets Small Rounded Corners option
  • 20: is the equivalent of the CTA Widgets Medium Rounded Corners option 
  • 45:  is the equivalent of the CTA Widgets Large Rounded Corners option 
Background Color

 Enter the background color of the gadget. Use any of the following formats:
  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • HSL value: hsl(90, 100%, 60%)
  • HTML color name: LavenderBlush
Text Color

 Enter the font color of the gadget. Use any of the following formats:
  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • HSL value: hsl(90, 100%, 60%)
  • HTML color name: LavenderBlush
Up Icon Color

 Enter the color of the up icon. Use any of the following formats:
  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • HSL value: hsl(90, 100%, 60%)
  • HTML color name: LavenderBlush
Up Icon

 Enter the Font Awesome 4.7 icon to use when the stock is increasing.

Example: 
fas fa-caret-up
Down Icon Color

 Enter the color of the down icon. Use any of the following formats:
  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • HSL value: hsl(90, 100%, 60%)
  • HTML color name: LavenderBlush
Down Icon

 Enter the Font Awesome 4.7 icon to use when the stock is decreasing.

Example: 
fas fa-caret-down
Icon Background Color

 Enter the background color of the up and down icons. Use any of the following formats:
  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • HSL value: hsl(90, 100%, 60%)
  • HTML color name: LavenderBlush
 

Layout tab

There are no layout options available for this gadget. 

Appearance tab

Use the Class field to add custom CSS to this gadget. 

Your digital workplace's CSS theme overrides the other settings here, so these settings will not change the gadget's appearance.

Using it

  • The gadget shows the value of the selected stock as of closing on the previous day, the % change, and its direction.
  • The data is not dynamic and requires a page refresh to update.
  • The gadget can't be interacted with.