Skip to main content
Customise Loading Screen, Spinner and More

Learn how to customise every aspect of the loader, including the background image and the loading spinner

Jens Bäckvall avatar
Written by Jens Bäckvall
Updated over a week ago

You can customise every aspect of the loading screen in the custom branding modal.

Start by opening custom branding by clicking on the paint brush icon in the storyboard.

Once opened you can see all the customising possibilities in the 4 tabs and you can see a preview of your changes in the preview on the right.

You can change the following things:

  1. Loading Screen

    1. Background color: Choose the bg colour for the entire loading screen.

    2. Main text color: Choose the text colour for all text on the screen.

    3. Background image URL: Add a url for the background image that you want to use instead of the background colour. You can add any url, but remember to use images that you have the rights to if you are creating a commercial Hololink. See the template below for placing text and contents in your background image.

    4. Initial Loading Text: The text shown on the screen while loading. If you leave this blank, no text will be shown.

    5. Loading spinner URL: Add a url for your custom loading spinner.

    6. Loading spinner size: The size of your custom loading spinner in pixels.

  2. Splash Screen

    1. Main Background color: Choose the bg colour for the entire screen that is shown after loading is completed

    2. Main text color: Choose the text colour for all text on the screen.

    3. Splash background image URL: Add a url for the background image that you want to use instead of the background colour. It is often a good idea to use the same image that is used for the Loading screen, for consistency. See the template below for placing text and contents in your background image.

    4. Tap to Start Text: This is where you customise the initial text if you want to change the default "Tap screen to launch your AR experience".

  3. Target image locator

    1. Target image locator: This is where you can toggle whether you want to show the Tap text and the target image as an overlay or if you want to hide them.

  4. Page Title

    1. Page title text: This is where you change the title of your page. This is the title that you see on the tab in most web browsers.

    2. Link to custom favicon: This is where you can add a url pointing to the favicon you want to be shown next to the page title on the tab in most web browsers.

    3. Terms & Conditions text: This is where you can change the initial part of the terms & conditions text shown at the bottom of the viewer screen.

    4. Terms & Conditions link text: This is where you change the part of the terms & conditions text that can be clicked to access the terms & conditions.

    5. Terms & Conditions link: This is where you can add a link to your own terms and conditions. If this is not changed, Hololink's own terms and conditions are the default.

Implementing changes in all of the above will make your Hololink 100% your own.

Clicking "Reload Preview" will show your changes as they will be seen on a generic mobile screen size.

Background image template

We have created a template for placing text and content on a background image. As all mobile screens don't have the same size and ratio, this will help you guarantee that your image is shown in full on all screens. Simply place your texts, buttons etc within the "Approximate Safe Area".

A cool way of making your background image stand out is to create it as an animated gif, perhaps adding your own loading spinner or loading bar as an animation instead of using the standard features.

The template can be downloaded as a .png file here.

And as a photoshop (.psd) file her.

The Hololink watermark is automatically removed from published Hololinks.

Did this answer your question?