Design & Install Your GivingFlow (Advanced)

If you’re like most churches, adding your GivingFlow to The Launcher as the primary way of installing (and sharing) with your church is the best option. This allows any visitor on your website to find your GivingFlow inside your Launcher, alongside all your other next steps, on every single page of your website!

If that’s you and you think you’ve landed on the wrong guide, click here to go to our guide to Customize & Publish Your GivingFlow (Recommended).

But in the rare case that you are not interested in anything but Nucleus Giving, and you do NOT want to take advantage of The Launcher, Nucleus Prayer, or any other products we offer, this guide might be for you. (Consider it our gift to you 😉)

In this guide, we'll cover the following topics. Click on any one to jump ahead.

Difference Between Using The Launcher & Advanced Install

As discussed above, using the Advanced Install option is for people who have no interest in anything but Nucleus Giving. Taking this route means that, instead of The Launcher button appearing on your website, a simple button to open your GivingFlow will instead load directly on your site.

This option can also be helpful if you have a separate landing page that you’re using to promote a specific fund for people to donate to. To lessen the amount of clicks it takes to arrive at the GivingFlow located in The Launcher, people can simply click once to open the GivingFlow.

Again, this option will not be for most churches. So just be aware the following instructions are to install ONLY the GivingFlow directly to your website.

Step 1: Design Your GivingFlow

By default, all design options will match the logo and colors chosen for your Launcher automatically. 

But if you’re going to install your GivingFlow directly to your website, you’ll want to adjust your GivingFlow design settings, specifically your logo and colors.

To begin, while in Giving, select GivingFlow under the Manage dropdown menu. This will take you to the Design tab. Click here for a quick link.

Upload Your Logos

Having a good and consistent logo is key to helping people identify your church wherever they see your logo. For that reason, if people are coming from somewhere off your website to your GivingFlow, having your logo uploaded will be important.

To upload your logo, select the Choose Custom option under Choose A Logo. From here you can drag and drop or click to add an image and apply your logo to your Launcher. 

You’ll notice that there are two places to upload your logo: one for “light mode” and one for “dark mode”. While choosing a color for your GivingFlow (see below), you’ll notice there are some options for your GivingFlow to display a light version or dark version of the color you choose.

For light mode, it’s best to upload a dark version of your logo. (e.g. a black version.)

For dark mode, it’s best to upload a light version of your logo. (e.g. a white version.)

Once you've done that, make sure to save your changes and you're all set

Note: To learn best logo practices, such as the type of image file to upload, the size of image file, the ratio & dimensions of your logo, click here. This will take you to our guide on designing the Launcher, but the logo practices will also apply here.

Choose A Color For Your GivingFlow

In choosing a color for your GivingFlow, you can select between some standard colors or input a specific hex code.

Hex codes are a format for identifying colors and allow you to input a specific color related to your church branding. For example, if you've ever had a logo created for your church, you likely selected certain colors you wished to be used as part of your churches branding. All of those colors have a specific hex code that can be applied, such as here for your GivingFlow. 

If you already have a hex code, simply type it in the hex code section and your color will automatically be generated. 

To get as close to the color you want for The Launcher, use the Vibrancy Slider below. With one simple slider, you can affect all the colors in your Launcher, and tune them to your desired intensity. This makes it really easy to more accurately complement (or contrast with!) your church's existing brand colors.

By design, the color selector will pull the main hue from the color you input and will give you a light and dark option that'll look great! So it won't be the exact color of the hex code you selected, but rather a custom calibrated set of five slightly vibrant tints that'll look good and keep your content legible. And, if you don’t like the colors that are generated, we always recommend using the greyscale color option which will look amazing with any website color palette or church logo.

When choosing a color mode, we recommend selecting auto. This way your GivingFlow color mode will automatically reflect people’s personal device preferences for light and dark mode; however, you can force lock it to either color mode if you really prefer.

Once you've made those adjustments, don't forget to Save changes and you'll be all set.

Step 2: Customize & Modify GivingFlow Default Options

If you haven't taken a look at our Customize & Publish Your GivingFlow (Recommended) guide, now is the time to do so 😎 In fact, you'll want to go through Steps 1-5 in that article and then come back to this part before moving on. That's because we explore all the other tabs in the Create submenu, like arranging your funds or modifying your "Thank You" message!

So check out that guide there, stopping at Step 6, and then come back here. You'll be glad you did!

Step 3: Manage Your Website URLs

Once you’re happy with your design and customization choices from the previous steps, the next step is to add/manage your website URLs.

To do this, click on Share in the left sidebar. Then, select Advanced Install. Click here for a quick link.

Adding a website URL tells Nucleus that this is a safe website for your GivingFlow load on.

To do this, click the + Add URL button.

Note: Remember to not just add the naked/root domain. You must include the appropriate http:// or https://. To avoid any mistake, it’s best to just go to your church’s website homepage and copy and paste exactly what appears in the address bar of your browser.

You can add as many URLs as you’d like. This is helpful in instances where you might have more than one website or landing page for an event.

If you ever want to delete a URL from your install section, simply click Delete beside the URL you wish to remove in the status section.

Any changes you make should automatically save once you've made them.

Step 4: Customize Your GivingFlow Button

Before copying the installation code, you have the option to customize the GivingFlow button. You don’t have to touch any of these controls, but let’s quickly explore what’s available so you know what your options are. (Just scroll down below the installation code.)

Customize The Button Color

By default, the color of the GivingFlow button matches the color you chose when designing your GivingFlow here. While we think this looks great (to have the button and inside of your GivingFlow match), you might want to use your creative liberties otherwise to perhaps match the color of other buttons on your site (or use a contrasting color to really draw more attention).

To change the button color, click Choose Custom and select a color or input your hex code.

Customize The Shape Of Your Button

A special customization option available when installing your GivingFlow directly to a website is the ability to change the shape of your button. Select between Circle, Pill, or Rounded.

Choose Your Icon

Selecting an icon will help to prompt people to give, and also provide context for what the button itself is for. Choose between one of our four curated icons, or upload your own by hitting Custom!

The Give text is selected by default but feel free to select one of the other options if you would prefer something different.

Note: If you're wondering what the second icon is, this is the RebelGive logo from our sister giving platform. Call us nostalgic, but we still think it's pretty iconic 💁

Customize The Button Placement

The GivingFlow button (and thus the GivingFlow) will load on the bottom of your screen, but it’s up to you where it loads.

To choose the location where the button will appear, select Left, Center, or Right.

While the button will load in a particular corner, you can adjust how close to that corner (or the true center) the button loads on. This is an advanced concept, and for most people, you don’t need to (and probably shouldn’t) adjust this setting.

That being said, if you need to customize the placement, this is done by adding a value to the Bottom and Side Offset. For the corners, a positive value will move it away from the bottom/side, while a negative value will move it closer.

Specifically for the center, a positive value in the Side Offset will move the button to the right, while a negative value will move it to the left. For the Bottom Offset, it works the same way with the Right and Left options: a positive value will move it away from the bottom, while a negative value will move it closer.

This can be super helpful if you have other widgets that load on your website (such as an instant chat bubble), so you can have them both load in the same area, but not load on top of each other.

The Z-index is a bit of a different element, though it can also be adjusted with positive/negative values. Your website consists of several layers. Each layer has a particular Z-index, letting your browser know which elements to load in front of the other. Adding a positive value will load your Launcher button further in front of other elements, while negative values will load it behind other elements (which has the potential of hiding your button - so proceed with caution!).

Note: Unless you need to (for instances like having multiple widgets loading on your website), we recommend leaving these fields completely blank. The GivingFlow button is already set by default behind the scenes to load very high in priority so it doesn’t get covered up by other elements. However, if your website has custom settings or other configurations, you can adjust the Z-index as needed.

If you make any adjustments, don’t forget to click the Save Changes button.

Step 5: Install Your GivingFlow On Your Website

The final step is to paste the installation code into your website.

You’ll find the installation code between your website URLs and your button customization options. When you’re ready to install the code into your website, simply click the Copy button.

Note: If you don’t see your installation code there, this is likely because your processing account is not yet active. To learn how to successfully activate your processing account, click here.

To learn where/how to paste the installation code on your specific website, we have entire articles dedicated to this below. While they are specifically related to installing The Launcher on your website, the same principles apply. It’s just a different installation code you’re pasting for your GivingFlow instead of code specifically for The Launcher.

Select the appropriate guide for your below to get started:

After you’ve installed your GivingFlow on your website, you can see what it looks like for yourself 😎 If you need to make any adjustments to the colors, logos, or button placement, simply follow the instructions throughout this guide, save those changes, and reload your webpage to see those changes in action.

What next?

Once your GivingFlow is installed on your website, people can begin donating to your church! Before they do, why don’t you take some time to learn more about how to best manage your giving transactions:

Or you can learn unique ways to share your GivingFlow other than just passing around your church’s website:

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.