Giving Compass Widget Playground
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.
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:
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.
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.
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.
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
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:
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>
Client Id for auth connection. You will get this value from Giving Compass after the SSO connection is created.
Auth domain to handle login. Requires whitelisting of callback domain. You will get this value from Giving Compass after the SSO connection is created.
API domain which will be authorized. You will get this value from Giving Compass after the SSO connection is created.
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>
The following attributes can be added to the component code to customize styles to better fit in with your site.
RGB color value for all calls to action (buttons and links).
Specify serif or sans-serif font for major headings.
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
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.
Specify the call to action on nonprofit pages to donate.
Customize the donation URL on nonprofit pages. The string <EIN_VALUE> will be replaced with the nonprofit's EIN.
The following attributes can be added to the component code to add further customization.
Select which nonprofit source to include in the user's personalized Take Action plan.
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.
After 30 minutes of inactivity users sessions will expire. That time can be overriden by passing in a new time in seconds.
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.
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.