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.
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.
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"/>
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"/>
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"/>