Splash Screen Configurations
  • 09 Nov 2024
  • 7 Minutes to read
  • Contributors
  • Dark
    Light
  • PDF

Splash Screen Configurations

  • Dark
    Light
  • PDF

Article summary

Overview

Splash screens are essential for engaging users right from the start of their interaction with your application. They serve various purposes, such as promoting offers, collecting newsletter sign-ups, or encouraging app downloads. This guide provides detailed instructions on configuring different types of splash screens and their respective settings.

Introduction

This user guide is designed to walk users through the process of setting up and managing splash screens within the AppCMS platform. By following the steps outlined, users can effectively create engaging splash screens that enhance user experience and drive engagement.

Prerequisites

  • AppCMS Access: Ensure you have valid login credentials to access the AppCMS tools.

  • Familiarity with AppCMS: Basic understanding of how to navigate the AppCMS platform and its features.

  • Marketing Material Ready: Prepare promotional content, images, and videos to use in your splash screens.

Types of Splash Screens

This section details the five types of splash screens available in the AppCMS platform, each serving a unique purpose:

  1. Splash Promotional Offer: Displays promotional offers aimed at attracting user interest.

  2. Splash Newsletter: Promotes newsletter sign-ups for users to receive updates and content.

  3. Splash Newsletter and Sign Up: Combines the newsletter sign-up with account creation.

  4. Splash Download App: Encourages users to download the app with a clear visual prompt.

  5. Splash Schedule: Informs users about special offers and events to encourage participation.

Configuration Steps

Splash Promotional Offer

Steps to Configure:

  1. Login to AppCMS: Access the platform using your credentials.

  2. Navigate to Template Builder:

    • Click on AppCMS.

    • Select Template Builder.

    • Click on Edit Template.

    • Go to Global Settings and select Splash Config.

    • Choose Splash Promotional Offer.

  3. Activate the Splash Screen:

    • Set as Active: Tick this box to make the promotional offer visible.

  4. Configure Offer Details:

    • Select Plan Type: Choose the relevant plan type for the promotional offer.

    • Select Plan Details: Specify the specific details of the selected plan.

    • Select Discount Type: Choose the type of discount being offered.

    • Select Promo Code: Input any promotional code that applies to the offer.

    • CTA Button Link: A link for the Call to Action button will be generated automatically.

    • Select Offer Type: Choose the type of offer you want to present (e.g., special discount).

    • Offer Price: This will reflect the price based on the selection in the Monetization section.

    • Select Offer Discount Price: Input the amount of the discount being offered.

    • Select Offer Tax: Specify any taxes applicable to the offer.

    • Strike Through Price: This field will automatically reflect the original price of the product.

  5. Add Text Elements:

    • Heading (required): Short title for the offer (e.g., "New Year, New Price").

    • Sub-Heading (required): Additional details about the offer (e.g., "Watch 200+ live games").

    • CTA Button Text (required): Text displayed on the Call to Action button (e.g., "Claim Offer").

  6. Add Media:

    • Splash Media URL (required): Enter a link to the media (image or video) that will be displayed.

    • Splash Image Position: Choose the position of the image (e.g., Left).

  7. Configure Colors:

    • Main Container Background Color: The background color for the splash screen container.

    • Heading Color: Color for the heading text.

    • Subtitle Color: Color for the subtitle text.

    • Offer Text Color: Color for the offer description text.

    • Offer Discount Color: Color for the discount information.

    • Offer Box Background Color: Background color of the offer box.

    • Offer Type Color: Color for the type of offer displayed.

    • Strike Through Price Color: Color for the original price shown with a strikethrough.

    • Offer Price Color: Color for the current offer price.

    • CTA Button Text Color: Color for the text on the Call to Action button.

    • CTA Button Background Color: Background color for the Call to Action button.

  8. Animate Entry:

    • Animate Entry: Choose the animation effect for how the splash screen appears (e.g., Fade).

  9. User Access:

    • User Access: Set to All to allow all users to view the splash screen.

  10. Save and Publish:

    • Save: Click to apply changes, then click Publish All in the top right corner.

Disable Option

  • To make the splash screen inactive, select Disable All and save changes.

Splash Newsletter

Steps to Configure:

  1. Set as Active:

    • Set as Active: Tick the box to activate the newsletter splash screen.

  2. Configure Background and Text:

    • Main Container Background Color: Select the background color for the splash screen.

    • Heading (required): E.g., "Rock The Red" — the main title of the newsletter.

    • Heading Color: Set the color for the heading text.

    • Sub-Heading (required): E.g., "The latest games and stories delivered right to your inbox" — additional information.

    • Sub-Heading Color: Choose a color for the sub-heading text.

  3. Input Fields:

    • Input Placeholder Text (required): E.g., "Email address" — the placeholder text in the input field.

    • Input Border Color: Configure the border color of the input field.

    • Input Helper Text (required): E.g., "By signing up for the ABC newsletter, you agree to our Terms and Policies" — guidance for users.

    • Input Helper Text Color: Set the color for the helper text.

  4. CTA Configuration:

    • CTA Button Text (required): E.g., "Sign up for the ABC Newsletter now" — text on the button prompting action.

    • CTA Button Text Color: Choose the color for the button text.

    • CTA Button Link: E.g., /mystics — the link the button directs users to.

    • CTA Button Background Color: Set the background color for the button.

  5. Add Media:

    • Splash Media URL (required): Provide a link to an image or video that will be displayed.

    • Splash Image Position: Set to Left to position the media accordingly.

  6. Animate Entry:

    • Animate Entry: Choose Fade for the entry animation.

  7. User Access:

    • User Access: Set to All to allow all users to view the splash screen.

Splash Newsletter and Sign Up

Steps to Configure:

  1. Set as Active:

    • Set as Active: Activate the splash screen.

  2. Configure Background and Text:

    • Main Container Background Color: Choose the background color.

    • Heading (required): E.g., "Rock the Red" — main title of the sign-up.

    • Heading Color: Set the color for the heading text.

    • Sub-Heading (required): E.g., “The latest games and stories delivered right to your inbox" — additional information.

    • Sub-Heading Color: Choose a color for the sub-heading.

  3. Input Fields:

    • Input Placeholder Text (required): E.g., "Email address" — the placeholder text in the input field.

    • Input Border Color: Choose the border color for the input field.

  4. CTA Configuration:

    • CTA Button Text (required): E.g., "Sign Up Now" — text on the button prompting action.

    • CTA Button Text Color: Set the color for the button text.

    • CTA Button Link: E.g., /mystics — the link the button directs users to.

    • CTA Button Background Color: Set the background color for the button.

  5. Helper Text:

    • CTA Button Helper Text: E.g., "By signing up, you are creating an account and agree to the ABC Terms of Service" — guidance for users.

    • Button Helper Text Color: Set the color for the helper text.

  6. Add Media:

    • Splash Media URL (required): Provide a link to an image or video.

    • Splash Image Position: Set to Left.

  7. Checkbox Configuration:

    • Checkbox Text (required): E.g., "I agree to create an ABC Account" — text for the checkbox confirming agreement.

    • Checkbox Text Color: Choose a color for the checkbox text.

  8. Animate Entry:

    • Animate Entry: Choose Fade for the entry animation.

  9. User Access:

    • User Access: Set to All to allow all users to view the splash screen.

Splash Download App

Steps to Configure:

  1. Set as Active:

    • Set as Active: Activate the splash screen.

  2. Add Media:

    • Splash Media URL (required): Provide the media URL for the download app image.

  3. Animate Entry:

    • Animate Entry: Choose Fade for the entry animation.

  4. User Access:

    • User Access: Set to All to allow all users to view the splash screen.

Splash Schedule

Steps to Configure:

  1. Set as Active:

    • Set as Active: Activate the splash screen.

  2. Configure Background and Text:

    • Main Container Background Color: Choose the background color for the splash screen.

    • Heading (required): E.g., "Subscribe Now!" — main title.

    • Heading Color: Set the heading color.

    • Sub-Heading (required): E.g., "Become an ABC+ Member today and you will get 2 FREE tickets to a select ABC game during the 2024-25 season." — detailed offer information.

    • Sub-Heading Color: Choose a color for the sub-heading.

  3. CTA Configuration:

    • CTA Button Text (required): E.g., "Get Your Free Tickets Now" — text on the button prompting action.

    • CTA Button Text Color: Set the color for the button text.

    • CTA Button Link: E.g., https://uat.abc.com/article/abc-sports-network-debut-alternate-broadcasts-wx-yz-games — the link the button directs users to.

    • CTA Button Background Color: Set the background color for the button.

  4. Add Media:

    • Splash Media URL (required): Provide a link to an image or video.

  5. Save and Publish:

    • Click Save, then Publish All to make the splash screen active.

Uploading Images

To upload images:

  1. Click on Content.

  2. Select Image.

  3. After uploading, a URL will be created for the image, which can be used in splash screens.

Important Notes
  • Only one splash screen can be active at a time; selecting another will disable the previous one.

  • If a user clicks to close the splash screen, it will not reappear until cookies or cache are cleared.

  • Regularly update the content of splash screens to maintain user engagement.


FAQ

Q1. What should I do if I want to change the splash screen after publishing?

Ans: You can edit the splash screen settings anytime. Just follow the configuration steps, make your changes, and republish.

Q2. Can multiple splash screens be active simultaneously?

Ans: No, only one splash screen can be active at a time. Selecting a new splash screen will disable the currently active one.

Q3. How can I test the splash screen functionality?

Ans: After publishing, test the splash screen by logging out and back in, or by clearing your browser's cache.

Q4. What formats are supported for media URLs?

Ans: Both image and video formats are supported for splash screens.

Q5. What happens if a user closes the splash screen?

If a user closes the splash screen, it will not reappear until the cache or cookies are cleared.

Glossary

Term

Definition

Splash Screen

An introductory screen that presents promotional content or information.

CTA (Call to Action)

A prompt for users to take a specific action, such as signing up or downloading.

Monetization Plan

A structured plan detailing pricing and offers that can be applied in the app.

Media URL

A link to an image or video used in the splash screen.

User Access

Determines who can view the splash screen (e.g., all users or specific groups).

Contact Support

If you need further assistance or have any questions, our support team is here to help:

1. Contact Information

2. Support Hours

  • B2C (Business to Consumer): Monday to Friday

  • B2B (Business to Business): 24/7 support available



Was this article helpful?