Install Fundraise Up in a React application
To use Fundraise Up in a React application, install your organization’s installation code once in the global document head and keep it loaded across the application.
Install Fundraise Up
- In Fundraise Up Dashboard, go to Settings > Installation.
- Copy your organization’s installation code.
- In your React project, find the file or framework configuration that controls the global
<head>. In a legacy Create React App project, this file ispublic/index.html. - Paste the installation code as the last script in the
<head>. - Ensure that the code loads on every route and remains loaded during client-side navigation.
Do not add or remove the installation code when React components mount or unmount. Do not install it using a script manager such as Google Tag Manager.
Use Elements in React components
After installing the code globally, you can place generated Element markup inside your own React components.
Add the markup for an embedded Element to the component where you want the Element to appear. Overlay Elements are configured through their display rules in Dashboard and do not require markup in a React component.
Do not add another copy of the Fundraise Up installation code to individual components.
Single-page application behavior
React single-page applications (SPAs) change routes without reloading the document. Fundraise Up monitors standard client-side route changes and updates global Elements after navigation.
URL-based visibility rules for Overlay Elements and Sticky Buttons use the active route rather than remaining tied to the first page visited.
Keep the Fundraise Up installation code loaded once for the entire application. Do not remove, re-add, or manually reinitialize it when the route changes.