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 Screenbutton>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 Notificationsbutton>Trigger App Tracking Transparency Prompt (iOS/Android):
button onclick="nativeFunctions.triggerTransparencyTracker()">Allow Trackingbutton>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
Vendrux has prepared a template to get you started, you can download it clicking here.