Integrating Fundraise Up with a Website Powered by Angular
Fundraise Up can be seamlessly integrated into websites powered by Angular, a popular JavaScript framework for building web applications.
Installing Fundraise Up in an Angular Application
To use Fundraise Up in an Angular application, follow these steps:
- In your Angular project, navigate to the
srcdirectory. - Inside the
srcdirectory, 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 Angular Components
Once the installation code is in place, you can treat each Fundraise Up Element as its own component within your Angular application. By following Angular's best practices for creating and managing components, you can easily integrate Fundraise Up Elements into your website's structure and design.
Considerations for Angular Single Page Applications
When using Fundraise Up in an Angular 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 donor 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.