Embed fund data and outputs on your website
Fund widgets let you embed selected fund data and outputs from TopSheets directly on your website. You can display individual factsheet elements such as charts, tables, statistics, fund information, fund lists, or even a full online factsheet.
Widgets are useful when you want to keep your website content automatically updated from TopSheets without manually editing your website every time your fund data changes.
You only need to copy a short embed code snippet from TopSheets and paste it into your website.
What can you embed with Fund widgets?
Depending on your factsheet setup, widgets can be used to display:
- performance charts,
- statistics tables,
- monthly or yearly performance tables,
- fund information,
- portfolio or allocation charts,
- fund lists,
- selected sections of a factsheet,
- or a full online factsheet.
Before you start
To add a widget to your website, you need:
- access to your TopSheets admin account,
- a program with data and a factsheet setup,
- access to your website editor or CMS,
- permission to add HTML, iframe, or JavaScript code to your website.
If your website is managed by a web developer, you can simply send them the widget code copied from TopSheets.
1. Open the Widgets section
In the TopSheets admin, select the program you want to publish. Then open the Widgets section.
2. Select a widget
Choose the widget you want to embed on your website.
Widgets are usually available for the main factsheet elements, such as charts, tables, statistics, and selected fund information.
If you do not see the widget you need in the default widget selection, use the Create widget icon to create a new widget from the available factsheet elements.
3. Copy the widget code
Click Copy to Clipboard to copy the embed code.
TopSheets provides two main embed options:
- iframe script,
- widget script.
The best option depends on your website setup and how much control you need over styling.
4. Choose between iframe script and widget script
Iframe script
The iframe option is usually the safest choice. It is isolated from the rest of your website, so it is less likely to interfere with other JavaScript or CSS on the page.
Use iframe if:
- you want the most reliable embed option,
- you are embedding the same widget multiple times on one page,
- you want to avoid conflicts with your website scripts or styles,
- you do not need to style the widget using your website CSS.
Please note that iframe styling is more limited. If you need to adjust the appearance of an iframe widget, use the Custom CSS box in TopSheets.
See also: Custom CSS for widgets
Widget script
The widget script option can be easier to style because the widget can be affected by your website’s CSS.
Use widget script if:
- you want more control over the widget appearance,
- you want the widget to match your website design,
- your website does not block external scripts,
- the script does not cause conflicts with your website.
If you are not sure which option to use, start with the iframe version.
5. Paste the code into your website
Paste the copied code into the page where you want the widget to appear.
The exact process depends on your website platform or CMS. In many website builders, the code can be added using an HTML block, embed block, or custom code section.
If you use WordPress, please note that the standard WordPress editor may automatically format text or block some scripts for security reasons.
6. Display widgets in another language
Widgets can be displayed in different languages by adding a language parameter to the widget URL.
For example, add the following parameter for German: &lang=de
You can find available language codes in the language dropdown in TopSheets.
7. Widget refresh frequency
Widgets are cached to improve loading speed.
After you update source data in the TopSheets admin portal, it can take up to 10 minutes for the updated data to appear in the widget on your website.
This is normal. TopSheets pre-generates widget files so they can load faster when visitors open your website.