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.

The default splash screen provided by Mattercraft

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).
  • Providing a location for important legal requirements, such as a link to a privacy policy.
  • 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.

Customizing the default splash screen

To edit this splash screen, follow these steps:

  1. Open the index.html file
  2. 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
  3. Save and preview your project to ensure that the updated splash screen appears as expected

Best Practices

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.html with one of your own, make sure that your new index.html references the index.ts script 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.
zapcode branded_zapcode i