Integrating Bonfire with TeamRaiser
Introduction
This step by step guide provides instructions on how to integrate Bonfire into TeamRaiser so that team captains can easily create t-shirt fundraisers that benefit their teams & share them with their team and donors.
The integration allows team captains to see a CTA inside of their TeamRaiser participant center. This helps them to navigate to the appropriate page on Bonfire while passing their team ID for seamless fundraiser setup. Once their t-shirt is created and published, their participants will see a new CTA to view or share the t-shirt fundraiser. Finally, when the t-shirt fundraiser ends, all funds will be synced to the team as unconfirmed gifts.
Here are the steps we’re about to take you through:
Set up the TeamRaiser integration
Please follow these steps within Luminate and then Bonfire, to set up the Bonfire + TeamRaiser integration:
Configure Luminate to prepare for Bonfire to connect
To set up TeamRaiser, we’ll need you to carry out a few tasks on your TeamRaiser account and provide some specific details. Make sure you can log into your TeamRaiser dashboard.
Here are the steps we're about to take you through:
Whitelist our IP address
Share your API key
Share your TeamRaiser URL
Create and share an administrative constituent
Whitelist Bonfire's IP address
To allow Bonfire to interact with your TeamRaiser account, you first need to whitelist our IP address. Follow these steps on your TeamRaiser environment:
1. Got to Setup → Site Options.
2. Select the Open API Configuration tab.
3. Select Edit server API configuration.
4. Add the following two IP addresses to your white list:
Share your API key
The next bit of information we need, is your “Luminate Online API Key”.
From the Open API Configuration tab, click Edit API Keys.
You can access the Open API Configuration tab by going Setup → Site Options.
TeamRaiser URL
When viewing the TeamRaiser dashboard, check your browser bar for your URL. We just need the first part of the URL, so in the following example, you would input:
https://events.millerwell.org
Create and share an administrative constituent
We need the details of an administrative constituent that has been added to the API Administrator group. You can either use and existing admin constituent, or create a new one.
We recommend creating a dedicated, non-personal, constituent for the Bonfire integration.
Consider giving the constituent a First Name and Last Name along the lines of “Bonfire Integration”.
How to create a new administrative constituent:
1. Go to Constituent360 → Constituents.
2. Select Add Administrator.
3. Fill our the required fields and click Save.
(Remember the username and password as you'll need to enter these on Bonfire).
How to add a constituent to the API Administrator group
1. With the consituent open, select the Groups tab.
2. Click Edit Group Membership.
3. Select API Administrator under Group Type and then again under API Administrators.
Congratulations! Everything should now be set up, and ready for you to add your TeamRaiser events.
If you’re seeing any errors, please go back and double-check that your details are correct and that Bonfire’s IP address has been whitelisted.
Connect TeamRaiser events to Bonfire
1. Once set up, open Bonfire. Go to your dashboard, select Organization → Integrations and follow the on-screen instructions.
3. Make sure to sync at least 1 TeamRaiser to Bonfire.
We recommend syncing an unused TeamRaiser initially for testing purposes.
Create a Bonfire event page
This step will soon be unnecessary, but currently Bonfire event pages for TeamRaisers are created manually within Bonfire’s admin portal. Simply contact your Bonfire account manager and ask for an event page to be created for this specific TeamRaiser. This will be used to test the integration and TeamRaiser widget, if you have more than one TeamRaiser, the remaining events will be created in step 4 before launch.
Implement the Bonfire widget within TeamRaiser
Bonfire's widget within the TeamRaiser Participant Centre is the most effective way to raise awareness of Bonfire's risk-free t-shirt fundraising solution. When building your widget, whether using our pre-prepared widget or building from scratch, please refer to the following guidelines.
1. Request API credentials by emailing p2p-api@bonfire.com.
Note that these credentials are not truly secret as it is a clientside API, and are meant instead for logging usage.
2. In the navigation bar, go to Fundraising → TeamRaiser and select the Participant Centers tab. Next, you will edit your participant center’s Javascript to add the widget functionality and styling. You may wish to make these changes in a new or duplicate participant center for testing purposes.
Select Edit to open your participant center settings. Select 2. Configure Options → Edit Custom Javascript. Add the JS code from the following link to the bottom of the code block.
Note that you will need to paste in the API credentials you requested earlier into the appropriate sections at the top of the code.
3. In the navigation bar, go to Fundraising → TeamRaiser and select Edit on the TeamRaiser Event.
Select 13. Customize Pages and find "Default Team Page", select Configure.
Scroll down to HTML Area and add the JS code from the following link to the bottom of the code block. Note that you will need to paste in the API credentials you requested earlier and Bonfire base URL into the appropriate sections at the top of the code.
In addition, you'll also need to specify where the widget should appear. You can do this by adding the appropriate css selector between the quotes after "cssSelectorToRender:".
For example: cssSelectorToRender: '.side-bar' .
4. In the sidebar, select 13. Customize Pages again and find "Default Personal Page", select Configure.
Scroll down to Page Footer (Not User Editable) and add the JS code from the following link to the bottom of the code block. Note that you will need to paste in the API credentials you requested earlier and Bonfire base URL into the appropriate sections at the top of the code.
In addition, you'll also need to specify where the widget should appear. You can do this by adding the appropriate css selector between the quotes after "cssSelectorToRender:".
For example: cssSelectorToRender: '.side-bar' .
Rollout to all applicable TeamRaisers
If you have been using a test TeamRaiser and participant center, be sure to switch it over and apply this participant center to all Team Raisers which you’d like to implement Bonfire.
Finally, if you have more than one TeamRaiser, please supply a list of TeamRaisers IDs and event dates to your Bonfire account manager and request that they publish event pages for each of them. (Again, this step will be obsolete in the near future.) Once the event pages are published, team captains will see the widget inside of their participant centers.
Congratulations!
You are ready to start fundraising.
Need help with your TeamRaiser integration?
Send an email to integrations@bonfire.com.
