Giving Compass Widget Playground
The Funds Advanced Widget is an easily embeddable JavaScript module so your site can have an ever increasing resource of vetted funds addressing immediate and long-term needs. The widget is responsive and configurable to easily fit in within your site. There is also a COVID-19 Funds variant that can be used as well.
Including the widget on your site is easy. The only requirement is an API-Key which you can get from your Giving Compass contact.
If you're new to Giving Compass software solutions, please contact us to learn more.
The following examples demonstrate variations on how this widget may look against different layouts of an imaginary company website.
You can display the widget embedded on a page by adding the Vue component.
Start by including the widget script:
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://code.givingcompass.org/gc-wc-funds/1.2.1/gc-wc-funds.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Roboto:wght@400;500&display=swap" rel="stylesheet">Then place the following code on your site where you want the widget to display:
<gc-wc-funds api-key="MY_API_KEY"></gc-wc-funds>Additional attributes can be added to customize the look of the widget.
<gc-wc-funds api-key="MY_API_KEY" per-page="10" render-list-as="list" width="300px"></gc-wc-funds>
The following attributes can be added to the component code to add further customization.
| Key | Description |
|---|---|
| api-key (required) |
Partner API key that can be obtained from your Giving Compass contact. |
| title (optional) |
Override the widget heading to better suit your page. Default: Issue Funds and Intermediaries Recommended character length: 24 |
| description (optional) |
Override the widget introductory text to better suit your page. Default: Find a range of vetted funds addressing immediate and long-term needs. |
| render-list-as (optional) |
Display options for the list of funds.
Default: images |
| per-page (optional) |
Number of funds to display per page. Default: 6 |
| width* (optional) |
Forces the widget to a specific width regardless of the user's browser width. |
| max-width* (optional) |
Prevents the widget from expanding past a width while behaving responsively below it. Default: 985px |
| include-terms (optional) |
Include specific search terms with the results list. |
| exclude-terms (optional) |
Excludes specific search terms from the results list. |
| include-categories (optional) |
Only return results for specific categories. |
| exclude-categories (optional) |
Excludes specific categories from the results list. |
| include-tags (optional) |
Only return results for specific tags. |
| exclude-tags (optional) |
Excludes specific tags from the results list. |
| *By default the widget is responsive with a minimum width of 200px and will resize based on the containing wrapper it is placed in. By setting the width or max-width this behavior is overridden. | |
The widget will render as a tile or link unless explicitly changed. If you would like to switch to a link list for certain views, then change the render-list-as attribute when your code detects the view criteria. Remember to change the value back in the reverse case.
When including the widget scripts, you can opt to pull COVID-19 specific funds by referencing a different JavaScript file:
<script src="https://code.givingcompass.org/gc-wc-funds/1.1.0/gc-wc-covid-funds.min.js"></script>
This will give you access to a component that renders COVID-19 funds only.
<gc-wc-covid-funds api-key="MY_API_KEY"></gc-wc-covid-funds>
The same attributes for the basic funds component apply to the COVID-19 variant as well. Here are some examples for the COVID-19 Funds variant: