The Welcome Screen is a customizable initial screen that appears when a user opens your app for the first time. This feature provides an important opportunity to create a positive first impression, gather necessary permissions, and guide users into your application experience.

Configuration

To set up the Welcome Screen, you'll need to modify your configuration JSON in the Canvas Dashboard under the "Advanced" section. The welcome screen parameters must be placed within the "General" object in the configuration JSON:‍


"General": {  
  // other parameters...  
  "Welcome_Screen_URL": "https://mobiloudsupport.github.io/welcome-screen/",
  // other parameters...
}

The Welcome_Screen_URL parameter should point to the HTML page you've created for your welcome screen. This can be hosted on any web server accessible to your users.

Creating Your Welcome Screen

Your welcome screen can be a simple HTML page with any design elements you choose. The only requirement is to include a dismissal element with this specific onclick attribute:‍

<button onclick="mlConfirmButton.performClick()">Close Welcome Screen</button>

‍When this element is clicked, the welcome screen will be dismissed and will not appear again on subsequent app launches.

Important System Prompts

The welcome screen is the ideal place to request crucial permissions and present required system notifications:

Request Push Notification Permission:

<button onclick="nativeFunctions.triggerPushPrompt()">Enable Push Notifications</button>

Trigger App Tracking Transparency Prompt (iOS/Android):

<button onclick="nativeFunctions.triggerTransparencyTracker()">Allow Tracking</button>

Benefits of Using a Welcome Screen

1. Improved Permission Acceptance Rates

When permissions like push notifications or tracking are requested without context, users often decline them. A welcome screen allows you to explain the benefits before triggering the system prompt, significantly increasing opt-in rates.

2. Enhanced User Onboarding

The welcome screen provides an opportunity to highlight your app's key features and value proposition before users enter the main experience.

3. Legal Compliance

Many regions require explicit consent for tracking and data collection. The welcome screen offers a clean implementation point for these requirements.

4. Reduced Bounce Rates

First impressions matter - a well-designed welcome screen helps set expectations and orient new users, reducing the likelihood they'll immediately close the app.

5. Branding Opportunity

The welcome screen can reinforce your brand identity with custom visuals, messaging, and tone before users see the standard interface.

Best Practices

• Keep the welcome screen simple and focused - aim for 1-3 key messages
• Clearly explain the benefits of enabling notifications and permissions
• Use compelling visuals that reflect your brand
• Consider a progress indicator if you have multiple welcome screens
• Test different designs to optimize permission acceptance rates

Template

MobiLoud has prepared a template to get you started, you can download it clicking here.

‍