Design Your Launcher

Adding action items to The Launcher is just one part of the story. Branding and the design of The Launcher is also a crucial step to ensure The Launcher is fully set up to share with your church - and ultimately the world wide web.

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

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 The Launcher, having your logo uploaded will be important.

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 The Launcher (see below), you’ll notice there are some options for The Launcher 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

Best Logo Practices

Type Of Image File

If you need to change the format of your current logo from a .jpg to a .png, you can quickly Google “convert jpg to png” and use any one of the search results. Or, if you need to remove the background from your logo, check out Adobe Express. It’s free and Adobe is a trusted company when it comes to all things visual.

Size Of Image File

While the file size of your logo can technically be as large as you’d like, we recommend using a compressed or smaller file size. If you’re working with a large file size, before uploading the logo to your Launcher, you can always compress it using TinyPNG.

Ratio & Dimensions Of Your Logo

For iPad/tablets and larger screens, the aspect ration of the logo is 20:9, whereas for smaller screens (e.g. a smartphone), the aspect ratio of the logo area is 14:6.

As for the actual dimensions of your logo, for square type of logos, we recommend 576 x 576 pixels. For a wide/landscape type of logo, we recommend 1280 x 576 pixels.

While it’s technically possible, we don’t recommend using a tall version of your logo, as it will not showcase well in The Launcher. This is because the container where your logo lives in your Launcher is no taller than 576 pixels.

Note: The Launcher will automatically resize the logo for you to fit within the logo container, but it's best to start with something close to the above aspect ratios or target pixel dimensions, and to further optimize your image so it's not a large file size.

Choose A Color For The Launcher

In choosing a color for The Launcher, 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 The Launcher.

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

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 color palette or logo.

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.

These changes automatically apply to both Light and Dark Mode which was really important. Even more important, it doesn't require you choosing individually the dozen or more colors that are used across the two modes in the Launcher. It all happens automagically!

Speaking of color modes, we recommend selecting Auto. This way The Launcher color mode will automatically reflect people’s personal device preferences for light and dark mode; however, you can lock it to either color mode if you prefer. 

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

Customize The Launcher Button

Customize The Button Color

By default, the color of The Launcher button matches the color found inside The Launcher. While our team believes this is the best look for your Launcher, you might want to use your creative liberties otherwise to match the color of other buttons on your site, for example. (And that’s okay! Just don’t show our product designer 😉)

To change the button color is simple! Just click Choose Custom, select a color or input your hex code, and then choose the intensity of vibrancy with the slider.

Customize The Button Placement

The Launcher button (and thus The Launcher) will load in one of the bottom corners of your website, but it’s up to you which side - left or right - that it loads on.

To choose which side The Launcher button loads on select right or left in the placement section. 

While the button will load in a particular corner, you can adjust how close to that corner 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. A positive value will move it away from the bottom/side, 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 corner, 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 The 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!).

Note: Unless you need to (for instances like having multiple widgets loading on your website), we recommend leaving these fields completely blank. The Launcher by Nucleus 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.

Customize The Button Icon

While we’re personally partial to seeing our Nucleus “N” logo on every Launcher button, we’ve also provided a few other standard options that might be helpful for visitors on your website to identify the button.

Simply click on one of the standard icons to use for The Launcher button.

Alternatively, you can upload your own logo to The Launcher button. This is a great option for anyone wanting their own church logo instead of one of the standard options.

To do this, click Custom. Then either drag and drop the icon you wish to use into the Dashboard, or click + Add Image to open your device's file browser to select an icon that way.

You can upload any png, jpg, or even svg, as long as it has a maximum file size of 1MB. (Remember, it's just a small icon. It doesn't have to be the largest resolution version of your logo 😄)

Our recommended pixel size for this is between 60 x 60 and 250 x 250. (And you might be able to infer from those dimensions, we also recommend having an overall image dimension that is square, even if your actual logo is not a square.)

Feel free to try both the option to Constrain custom icon to fit, though we recommend that this option toggled on is best for most people.

Don't forget to save any changes you make!

Preview The Launcher

If at anytime you want to preview your Launcher to see the changes you made, you can do that by clicking Preview in the top right hand corner. 

If you don't see the preview button, just scroll up to the top of the page.

What Next?

If you haven’t yet added action items to your Launcher, we recommend doing that next. You can follow this guide for instructions on how to do that:

If you’ve already added action items to your Launcher, the next step is to install it on your website. (How exciting! 😎) You can follow these guides for instructions on how to do that:

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