Integration of the Widget
A quick glance at the Spool Widget informs the user instantly what the Performance and Total Value Routed (TVR) of your created Spool Smart Vault(s) are. Through this widget, users can access Smart Vaults directly and deposit assets in order to earn yield. The Spool Widget opens up a new channel for the monetization of websites and content with simple integration, fitting in seamlessly with the "Use cases for Capital Aggregators" linked below:
Spool gives you the ability to display any Spool 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:
<iframe width=320px height=240px frameBorder="0" scrolling="no" src="https://app.spool.fi/widgets/spool-widget/spoolAddress=0xf880ceebbbd960143a65ce70366324516f2104fc"/>
A Spool Smart Vault Widget without styling applied.
When you want to display multiple Smart 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:
<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"/>
A styled Spool Smart Vault Widget.