Install Fundraise Up in an Angular application

Install Fundraise Up

Add your organization’s installation code once in the global document head:

1. In Fundraise Up Dashboard, go to Settings > Installation.
2. Copy your organization’s installation code.
3. In your Angular project, open src/index.html.
4. Paste the installation code as the last script in the <head> section.
5. Build and deploy the application.

Keep the installation code loaded for the entire application session. Do not add another copy to individual components or routes, and do not remove or reinitialize it when the route changes.

Learn more about installing Fundraise Up →

Add Elements to Angular templates

Fundraise Up provides an HTML snippet for each Element. Add this snippet directly to the Angular component template where you want the Element to appear:

1. In Fundraise Up Dashboard, create or open an Element.
2. Copy the Element’s HTML code.
3. Open the Angular component’s .html template.
4. Paste the HTML code where the Element should appear.
5. Keep the generated markup unchanged, including style="display: none".
6. Build and test the application.

You can create an Angular wrapper component when the same Element must appear in several templates, but a wrapper is not required.

Learn more about Fundraise Up Elements →

Client-side navigation

Angular Router changes routes without reloading the document. Fundraise Up monitors standard client-side route changes and keeps the installation runtime active throughout the single-page application session.

Keep one copy of the installation code in src/index.html. Do not add or remove the script when users move between routes. Elements rendered in route components update as Angular changes the active view.

Test URL-based display rules for Overlay Elements and Sticky Buttons across the routes where they should appear.