Giving Compass Widget Playground
The Articles Advanced Widget is an easily embeddable JavaScript module so your site can have a philanthropy knowledge hub. The widget is responsive and configurable to easily fit in within your site.
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-articles/1.2.2/gc-wc-articles.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-articles api-key="MY_API_KEY"></gc-wc-articles>Additional attributes can be added to customize the look of the widget.
<gc-wc-articles api-key="MY_API_KEY" per-page="10" render-list-as="list" width="300px"></gc-wc-articles>
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: Philanthropy Knowledge Hub Recommended character length: 24 |
| description (optional) |
Override the widget introductory text to better suit your page. |
| render-list-as (optional) |
Display options for the list of articles.
Default: tiles |
| per-page (optional) |
Number of articles 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.