Integrating Fundraise Up with a Website Powered by React
Fundraise Up can be seamlessly integrated into websites powered by React, a popular JavaScript library for building user interfaces.
Installing Fundraise Up in a React Application
To use Fundraise Up in a React application, follow these steps:
- In your React project, navigate to the
publicdirectory. - Inside the
publicdirectory, open theindex.htmlfile. - Paste the Fundraise Up installation code inside the
<head>section of theindex.htmlfile. This ensures that the installation code runs in the head of the resulting web pages.
Using Fundraise Up Elements as React Components
Once the installation code is in place, you can treat each Fundraise Up Element as its own component within your React application. By following React's best practices for creating and managing components, you can easily integrate Fundraise Up Elements into your website's structure and design.
Considerations for React Single Page Applications
When using Fundraise Up in a React Single Page Application (SPA), it's important to keep in mind that SPAs do not reload the page. As a result, the functionality of some URL-based element display and limitation features may be affected.
In an SPA, the URL detected for a user visiting the application is always tied to the first page they visited. This can impact the behavior of Fundraise Up Elements that rely on URL-based targeting or limitations such as Overlay Elements and Sticky Buttons.