Giving Compass Advanced Widgets

Giving Compass Widget Playground

Articles Advanced Widget

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.

Examples

The following examples demonstrate variations on how this widget may look against different layouts of an imaginary company website.

  1. Use Case - Tiles
  2. Use Case - Links
  3. Use Case - Various

Embedded Widget Code

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

Additional Customization

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.

  • tiles: tile grid
  • links: list of links

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.

Changing to list view for mobile

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.