Spool Tech Docs
Search
K

Spool IFrame Widget

The Spool IFrame Widget allows for simple integration of Spool into any website. The IFrame Framework is used for the widget and simple HTML integration examples can be found below.

Use-case

A quick glance at the Spool Widget informs the User instantly what the Performance and Total Value Routed (TVR) of your created Spool Vault(s) are. Through this widget, Users can access Spools (Vaults) directly and deposit assets in order to earn yield.

A simple example

Spool gives you the ability to display any Spool (Vault) as a widget by importing an IFrame in your HTML code; giving users the easy option to display a Spool Widget on their website.
An example of the simplest IFrame to use can be found below:
A Spool Smart Vault Widget without styling applied.
<iframe width=320px height=240px frameBorder="0" scrolling="no" src="https://app.spool.fi/widgets/spool-widget/spoolAddress=0xf880ceebbbd960143a65ce70366324516f2104fc"/>

Two or more Spool Smart Vaults

When you want to display multiple Spools (Vaults) on your website the spoolAddress parameter can be used. When opting for this method one should not forget to use the & symbol.
<iframe src="https://app.spool.fi/widgets/spool-widget/spoolAddress=0xf880ceebbbd960143a65ce70366324516f2104fc&spoolAddress=0xcf4cf54f1f9fc1a88c1b4d85d4eee5cdd8ed254b"/>

Styling the widget

When custom styling is required, it must be added through the URL parameter. The format for each styling needs to follow the CSS.Properties.
A list of all possible stylings can be found here:
List of elements able to be customized:
  • container: 'spool-widget__app'
  • title: 'spool-widget__title'
  • statisticsTitle: 'spool-widget__statistics__title'
  • statisticsDetail: 'spool-widget__statistics__details'
  • deposit: 'spool-widget__deposit'
An example of how to style your widget can be found in the IFrame below:
A Spool Smart Vault Widget without styling applied.
<iframe width=320px height=240px frameBorder="0" scrolling="no" src="https://app.spool.fi/widgets/spool-widget/spoolAddress=0xf880ceebbbd960143a65ce70366324516f2104fc/container=background:%2373a2e7;color:%23000000;borderRadius:40px;&title=color:%23000000;fontSize:16px;&statisticsTitle=color:%231735ec;&statisticsDetail=color:%23f52d2d;&deposit=color:%238a3535"/>