Splash Screen with Logo Image

Splash Screen with Logo Image


SL 1.webp


1. Icon-Based Startup Screen

If you have selected the “ Logo Image ” option for your app, here are the steps you have to follow:

  • Tap on Click to upload to add your App Icon.

  • Your app icon should be 1024 × 1024 pixels in size.

  • Select the icon size S-64, M-120, L-180, and XL-260.

The custom Use App icon is a feature that allows your app icon to appear automatically as the splash screen. You just need to click on it and the app icon will appear as the splash screen.

SL 2.webp


2. Brand Name - Only Accessible to Pro Users

  • You have to toggle on this field to enter the name of your brand.

  • Select the text color, position, and background color. The position support includes the top, center, and bottom.

brand name.png


SL 3.png


3. Splash Background Color

When you turn on the Enable Gradient toggle you will have access to additional settings.

Step 11 (1).png


splash bg color .png


  • Color Choose the two colors to create a perfect gradient effect.

  • Gradient Pick a colour according to matching your brand colour, selecting from the given different gradient effects. Customize your own gradient effect by tapping on the “+” icon.

  • If you click on the “+” icon, you will see Type and Stops options.

Step 13.png


Step 14.png


1. Type

  • You have to select the type of gradient effect. It includes Linear, Radial, and Diagonal.

  • You can also adjust the direction of the gradient effect by clicking on the “Degrees” option. It includes 90, 180, 270, and 360.

Step 15.png


2. Stops

  • You can control how the two colors will be distributed in the gradient. You can control them using the % of the colors and how much effect they will have on the screen.

Step 16.png


3. Advanced Splash Configuration - Click on Advanced Settings

SL 4.png


Select the splash appearance for the screen:

Hide Splash When

1. On Page Load Progress

The splash screen stays until the page finishes loading fully.

Settings for On Page Load Progress

- Load Threshold

Choose how much content loads before the splash screen closes.

- Minimum Display Time

Control how long the splash screen will be visible on the screen.

- Fade Out Animation

Control how the splash screen disappears so it fades out smoothly instead of closing suddenly. You can choose between 200 ms and 500 ms using the toggle. In addition, the setting is available only with the pro plan.

on page load progress.png


2. After Fixed Duration

You can remove your splash screen after a fixed duration.

Settings for After Fixed Duration

- Duration

Set the duration for the splash screen visibility (1 to 5 seconds)


- Fade Out Animation

Set a smooth fade-out for the splash screen with 200 ms, 300ms, or 500 ms options using toggle.

fixed duration.png


3. On JavaScript Trigger - Only for Pro Members

It will stay visible until JavaScript is triggered.

Settings for On JavaScript Trigger

- JS Trigger Configuration

Set up a custom JavaScript function on your website so it runs when your site is ready. Click View Docs to open the Developer Documentation (opens in a new tab).

- Fallback Timeout

Set the splash screen duration when JS is not triggered (5, 8, 10, or 15 seconds).

- Fade Out Animation

Use the toggle to choose the fade-out duration for the splash screen: 200 ms or 500 ms.

Click on Save to apply these settings.

on js trigger.png


Tap on Save & Rebuild to update these settings in your app and download again.

SL 5.webp