Saas Giving Planner

The Giving Compass Software as a Service (SaaS) Giving Planner is an embeddable software solution that makes it easy to include Giving Calculator and Giving Planner onto your site.

If you're new to Giving Planner, please contact us to learn more.

Integration use case

This page describes the use case where the entire SaaS Giving Planner is a members-only feature and requires the end user to be logged into your site. In this use case:

Only one page is required to embed the application.
It is recommended that the host site requires authentication before displaying the SaaS Giving Planner so the user is not redirected to the login page.

Demo

The following example demonstrates how this web component may look on an imaginary company website. A test account is required, which your Giving Compass contact can provide.

Demo

Prerequisites

These are setup steps that require Giving Compass coordination before you can integrate. Please reach out to your Giving Compass contact to start this process.

White list domain

Your domain that SaaS Giving Planner is served from is required to be white-listed to allow Cross-Origin Resource Sharing (CORS). You will need to give this value to Giving Compass.

Connect Identity Provider (IdP)

For your users to login, Single-Sign On (SSO) requires connecting your Identity Provider (IdP) to our auth service. Contact Giving Compass for the specific information needed to set up the SSO connection

Integration

Include Code

        <script src="https://code.givingcompass.org/gc-wc-planner/1.0.6/gc-wc-planner.umd.js"></script>

Versioning

SaaS Giving Planner follows the semantic versioning scheme (semver.org) for code releases. You can specify the exact version, the major/minor version, or just the major version to get updates automatically when they become available. Examples:

major version: https://code.givingcompass.org/gc-wc-planner/1/gc-wc-planner.umd.js
minor version: https://code.givingcompass.org/gc-wc-planner/1.0/gc-wc-planner.umd.js
patch version: https://code.givingcompass.org/gc-wc-planner/1.0.1/gc-wc-planner.umd.js

Include Tag

The following values are provided by Giving Compass after an SSO connection has been made with your IdP. See the Prerequisites section for details.

        <gc-wc-planner
        auth-client-id="AUTH_CLIENT"
        auth-domain="AUTH_DOMAIN"
        auth-api-id="AUTH_API">
</gc-wc-planner>

Key	Description
`auth-client-id` (required)	Client Id for auth connection. You will get this value from Giving Compass after the SSO connection is created.
`auth-domain` (required)	Auth domain to handle login. Requires whitelisting of callback domain. You will get this value from Giving Compass after the SSO connection is created.
`auth-api-id` (required)	API domain which will be authorized. You will get this value from Giving Compass after the SSO connection is created.

Example with customizations

The following is an example of an instance of the planner application with customized paramters

        <gc-wc-planner
        auth-client-id="AUTH_CLIENT"
        auth-domain="AUTH_DOMAIN"
        auth-api-id="AUTH_API"
        pie-chart-colors="#EE750B,#A1EE90"
        cta-color="55,155,255"
        disable-net-worth-planning="true">
</gc-wc-planner>

Customization Options - Styles

The following attributes can be added to the component code to customize styles to better fit in with your site.

Key	Description	Image
`cta-color` (optional)	RGB color value for all calls to action (buttons and links). Default: `242,108,33`
`heading-font` (optional)	Specify serif or sans-serif font for major headings. Default: `sans-serif`
`start-your-plan-cta-text` (optional)	A user first gets a giving benchmark with Giving Calculator. On the calculation results, the user must select to start a plan. This attribute sets the text for that button. Recommended: 35 characters or fewer. Default: `Start Your Plan`
`pie-chart-colors` (optional)	Comma-separated list of up to 2 hex colors used for the plan pie chart. They display at different opacities to make up the full pie chart. See default colors to the right. Default: `null`

Customization Options - Functional

The following attributes can be added to the component code to add further customization.

Key	Description
`nonprofit-source` (optional)	Select which nonprofit source to include in the user's personalized Take Action plan. - "nonprofits": 501(c)(3) nonprofits available from the IRS - "social_justice_nonprofits": a set of nonprofits vetted by Giving Compass - null: both
`nonprofit-donate-text` (optional)	Specify the call to action on nonprofit pages to donate. Default: `Donate`
`nonprofit-donate-url` (optional)	Customize the donation URL on nonprofit pages, if you have your own donation process with a standardized URL. The string EIN_VALUE will be replaced with the nonprofit's EIN. Example: https://mydomain.org/account/grant?taxid=EIN_VALUE This can also be a URL that is not specific to a single EIN, if your site processes donations, but a direct link to a specific org isn't available. Instead you can set all donate buttons to link to the page on your site to start the donation process. And the user will need to do manual steps to find the nonprofit again on your site. If no value is provided, only Social Justice Nonprofits will display a donate button, which links out to the nonprofit's own donation page. Default: `null`
`disable-net-worth-planning` (optional)	Hide the net worth and exact income question when editing a plan. The purpose is to show the user their planned giving as a percentage of their net worth or exact income. Default: `false`
`inactivity-ttl` (optional)	After 30 minutes of inactivity users sessions will expire. That time can be overriden by passing in a new time in seconds. Default: `1800`

Container Size

SaaS Giving Planner is mobile responsive and can fit into any container size on your site. We recommend allocating at least 1080px width for the container for a better desktop experience.

Possible collisions

The Giving Planner application uses the Vue framework wich is included in the code provided by Giving Compass. If the page hosting the Giving Planner application also contains a Vue application there might be an error when either of the applications parse the document.

CSS Styles from the host site might also effect the styles and layout of the Giving Planner application. This may be intentional to enforce a style, or it may be unintentional but it is possible.

Versions

Version	Description
1.1.0	Initial release