Home
Elements
Components

Buttons

Fundraise Up provides 5 effective button-based elements that help to direct site visitors towards your chosen campaign’s checkout. These elements are fully customizable and easy to integrate into your website. For information on how to configure settings for your Elements or add these Elements to your site, return to the Elements overview page.

Use the Donate Button for the donation call-to-action button in your website’s header navigation and in other areas across your website. The Donate Button includes a heart icon and subtle animations that catch the attention of website visitors and direct them toward a donation.

When users click the button, the Checkout modal of the campaign associated with the Donate Button will open. If the Checkout modal isn’t enabled, they’ll be taken to the Campaign Page.

Sticky Button

The Sticky Button is an overlay component, meaning that it is displayed outside of your website’s page layouts and positioned at the higher visual layer (z-index). This makes it very easy to add to your site: you can activate the Sticky Button as soon as the Fundraise Up installation code has been added to your website.

Similar to the Donate Button, Sticky Button includes subtle animations to catch the attention of website visitors. The key difference is that the Sticky Button is attached to the edge of the browser viewport, and remains in position at the side of the page as a website visitor scrolls up or down.

Clicking the Sticky Button will be open the Checkout modal of the campaign associated with the Donate Button. If the Checkout modal isn’t enabled, visitors will be taken to the Campaign Page instead.

To see a demo of the Sticky Button, create a test Element in the Dashboard.

Image Card

The Image Card element combines visuals with a call-to-action button, and is perfect for showcasing specific projects, success stories, or donation options.

You can include a custom image, title, description, and donation button for your Image Card. When site visitors hover their cursor over the chevron symbol next to the title, a slide-up animation reveals the longer description text.

Visitors who click the Image Card will be taken to the Checkout modal of the campaign associated with the Donate Button. If the Checkout modal isn’t enabled, they’ll be taken to the Campaign Page.

Button Group

The Button Group component is useful if you want to display multiple buttons with a variety of possible donation amounts. Depending on the size of the container where it’s placed, the buttons displayed as part of the Button Group will either be laid out in a single row or in a series of rows and columns.

Users who click the Button Group will be taken to the Checkout modal of the campaign associated with the Donate Button. If the Checkout modal isn’t enabled, they’ll be taken to the Campaign Page.

P2P Button

The P2P Button component can be added to your website to provide visitors with an easy way to start a P2P Fundraiser for the campaign the P2P Button is linked to. When this button is clicked, the P2P onboarding screen is launched. You can check the Allow to join teams box to give visitors the option to join an existing P2P Fundraiser when they click this button.

 

In this article