Customizing the splash screen
In Mattercraft, you have complete control over your project's splash screen, allowing you to create a memorable first impression for your users.
By default, Mattercraft provides a splash screen that appears when your project loads. However, you can easily update or replace it with your own custom design to match your brand or project's theme.
Why splash screens are necessary
Splash pages are important for a number of reasons, both technical and related to user experience. These include:
- Ensuring that the user interacts with the page (by tapping on a Launch button) before any audio or video is played (this is a technical requirement mandated by web browsers).
- Giving the user necessary context ahead of permission prompts (e.g. for camera access).
Updating the splash screen
The default splash screen in Mattercraft can be found in the
index.html file within your project files.
To edit this splash screen, follow these steps:
- Open the
- Customize the content and styling of the splash screen to your liking. You can change the text, add images, or apply CSS styles to create a visually appealing splash screen that reflects your project's identity
- Save and preview your project to ensure that the updated splash screen appears as expected
We always recommend updating the existing
index.html file in your Mattercraft project, as this is setup perfectly for web experiences. However, you may replace this entirely if you'd like.
If you decide to replace the default
index.htmlwith one of your own, make sure that your new
index.tsscript file in your project. Failing to do so will hinder the project from functioning correctly.
To make the most out of your updated splash screen, we’d suggest using the following best practices:
- Permissions: If your project includes an AR camera, you must request the necessary camera permissions from the user when the launch button is tapped. For other web experiences, make sure you have the relevant permissions in place for any additional features used in your project (360 requires gyro data, for example).
- Launch Button: To comply with browser requirements, include a launch button that initiates the project's start. This button ensures that users actively trigger the permissions request.
- Loading Animation: Adding a loading animation or spinner to your splash screen is a valuable addition. It provides users with a visual cue that the content is loading and assures them that the project is working as expected.
- Cookie Consent: In some regions, it's necessary to provide information about the cookies your project logs. Consider including cookie consent within your splash screen and make use of the "Cookie Consent" node available in Mattercraft's Hierarchy.