Install A Single Flow On A Website (Advanced)

In most cases, you'll want to install and/or utilize The Launcher on your website instead of installing a single Flow, as The Launcher allows your visitors and congregation to access all of your Flows in a single place.

However, you might find yourself in a situation where you want a single, specific Flow installed on your website and have it it show up on every page of your website in a similar manner to The Launcher. If you find yourself in that rare case, this guide is for you!

If you're just looking to add a Flow to The Launcher or share it in other ways, click here.

To get started with installing your single Flow on your website, click the Nucleus logo in the top left corner and select Flows. Click here for a quick link.

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

Difference Between Using The Launcher & Advanced Install

As stated above, in most cases, you'll want to share your Flows in your Launcher (which you can learn all about here). The reason for this is that adding Flows to your Launcher, and having your Launcher installed on your website allows people who visit your website access to a variety of next steps.

Whereas choosing to install only a single Flow limits the next steps someone can take when visiting your website and clicking the installed button.

But there might be instances where this limitation is what you want, for instance if you have a landing page that you're pointing people to from marketing materials, and you want people to be able to take a single next step.

So if you're looking for a guide on how to do this, keep reading below.

Note: You cannot install a single Flow on the same website where you have The Launcher already installed. The two codes will conflict with each other, resulting in a race condition where each code tries to load first. In some cases, one will load before the other. In other cases, both might not load at all.

Step 1: Design your Flow

While managing a Flow, click Share in the left sidebar. From there, select Advanced Install in the sub menu.

Even though the first two sections on this page revolve around the actual install of your Flow, it's probably best to review and adjust any design settings for your Flow first. To do this, scroll down to Design Settings.

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

If you already have a logo uploaded to your Launcher and are happy to use the same color as your Launcher with your Flow, feel free to select the Match My Launcher option.

Should you want to adjust these, go ahead and click Choose Custom.

For uploading a logo, you can drag and drop, or click to add an image and apply your logo. This logo will appear at the top of your Flow.

You’ll notice that there are two places to upload your logo: one for “light mode” and one for “dark mode”. If you choose a custom color for your Flow (see below), you’ll notice there are some options for your Flow to display a light version or dark version of the color you choose. This will affect which logo is displayed.

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.)

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.

In choosing a color for your Flow, 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 to your Flow.

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

Below this, you can choose how vibrant you would like your color to appear.

Under Palette Colors, you'll see a preview of 5 different colors that will be used in your Flow based on the hex code and vibrancy you've chosen.

Lastly, select between Auto, Always Dark, or Always Light for the color mode of your Flow.

Don't forget to save any changes you make!

Step 2: Customize your Flow Button

Once you've customized the design of your overall Flow, now it's time to adjust the look of the button that will appear in the bottom right or left corner of the website where you plan on installing your Flow.

First, you can adjust the color of the button. By default, this color will match the same color as you selected for your Flow. But if you'd like to customize this, click Choose Custom.

Here, you have all the same color options (minus choosing between light and dark mode) as you did for the Flow itself. (See above.)

Below this, you can choose between a pill or rounded shape for your button.

Then, you can choose what you want your button to say. This is the label for your button, and will appear when someone views your website. (Unlike The Launcher, the button for a Flow that's installed on a website allows you to showcase custom text to prompt people to click on it.)

Lastly, you can choose whether you want your button to appear in the bottom left or right corner of your website, or in the bottom center. And from there, you can customize how offset the button appears from the location you selected. 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.

This customization 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.

Note: This is an advanced concept, and for most people, you don’t need to (and probably shouldn’t) adjust this setting.

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. Your Flow 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.

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

Step 3: Manage your website URLs

If you're happy with the design options for your Flow, now it's time to make sure your Flow actually loads on your website.

Scroll back to the top of the page and add the URL(s) for any website where you are installing your Flow. (Adding a website URL tells Nucleus that this is a safe website for your Flow load on.)

To do this, click + Add URL.

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 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: Install your Flow on your Website

The last step is actually installing the Flow on your website. This is accomplished in exactly the same way as installing The Launcher on your website.

Simply click Copy to add the code to your device's digital clipboard.

Next, you'll want to login to your website's backend and paste the code directly into the header of your website.

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 Flow instead of code for The Launcher.

Install Your Launcher On Other Websites

After you’ve installed your Flow 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?

As stated above, this guide explores a rare case where you might need to install a Flow directly onto a website. In most cases, you'll just need to share your Flows in the ways outlined in the following guide:

But if you already know how to do that, click some of these guides to help you better manage your Flows:

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