Cancel Flow Splash Screen guide

What is a Splash Screen?

The Splash Screen is an optional step during cancellation that lets you present custom content before customers enter your Cancel Flow. You can use it to showcase subscriber benefits, display promotional videos, or communicate key value propositions that might prevent cancellation.

When does the Splash Screen step happen during cancellation?

The splash screen appears immediately when a customer begins the cancellation process, before they select a reason or see any treatment offers. It gives you one focused moment to remind customers why staying subscribed matters.

This step supports:

• Custom titles and subtitles

• Video or image content via media URL

• Rich text descriptions with formatting options

• A Continue button that lets customers proceed to the next step

• An action you can configure as an alternative to cancellation

Because the splash screen appears at the start of the flow, it's your opportunity to set a positive, solution-oriented tone before customers move deeper into cancellation.

When to use the splash screen

Use the splash screen when you want to:

• Highlight subscriber benefits that customers might overlook, like exclusive perks, discounts, or early product access

• Feature video content from your founder, brand ambassador, or product team that creates emotional connection

• Reinforce brand value before customers make a final decision

• Guide customers to alternative actions like skipping an order or changing frequency instead of canceling outright

The splash screen works best when the content is visual, concise, and speaks directly to why staying subscribed delivers ongoing value.

How to add and configure a splash screen

Step 1: Add the splash screen step to your flow

1. In the lefthand menu of your Skio Dashboard, go to Cancel Flow > Flow Builder.

2. Click and drag the Splash Screen node in the flow builder sidebar to your workspace.

Step 2: Configure the splash screen content

1. Click Edit splash screen in the node.

2. Enter a Title that clearly communicates the theme of your message (e.g., "Benefits of Product" or "Why Stay Subscribed").

3. Add an optional Subtitle for additional context (e.g., "There's a lot you're missing").

4. If you want to include a video or image, paste the URL in the Media URL field. For best results, use a 16:9 aspect ratio for videos.

5. In the Description field, write or format your message using the rich text editor. This is where you'll explain the value of staying subscribed or direct customers to take an alternative action.

6. Under Action, specify what happens when customers proceed. The default action is skip next order, but you can customize this to match your flow logic.
   /snippet

7. Click Save splash screen.

The splash screen will now appear as the first step in your cancel flow.

Example splash screen setup

Title: Wait—don't make the cat sad!

Subtitle: We worked so hard on these perks for you

Description:

Okay but seriously, here's what you'll miss:

10% off every order (that adds up fast) 
Free shipping (because who likes paying for that?) 
Early access to new drops before anyone else Surprise gifts throughout the year

Not ready for your next order? Just skip it or change your frequency—you don't have to cancel to take a break.

Tap below to adjust your subscription and keep all these perks.

<style>
  :root {
    --pp-text: #111111;
    --pp-bg: #ffffff;
    --pp-cream: #FAF7F2;
    --pp-border: #111111;
    --pp-divider: #E8E4DF; /* soft neutral line */
  }
 
  #__next div[backgroundcolor="#ffffff"] {
    border: 1px solid var(--pp-border);
  }
 
  .cancel-dialog {
    display: flex;
    flex-direction: column;
    gap: 1.75rem; /* increased spacing between cards */
    color: var(--pp-text);
    font-size: 13px;
    width: 100%;
    max-width: 640px;
    margin: 0 auto 2.5rem auto; /* more breathing room below */
    padding: 0 10px;
  }
 
  .cancel-card {
    border-radius: 8px;
    border: 1px solid var(--pp-border);
    background: var(--pp-cream);
    padding: 1.5rem; /* was 1rem → now more open */
  }
 
  .cancel-card__title {
    display: block;
    font-size: 15px;
    font-weight: 600 !important;
    margin: 0 0 1rem 0 !important; /* more space under header */
    color: var(--pp-text);
  }
 
  /* Bullet list */
  .benefits-list {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 0;
  }
 
  .benefits-list__item {
    margin-bottom: 0.65rem;
    line-height: 1.5; /* slightly more relaxed */
  }
 
  /* ---- Subtle Divider Line ---- */
  .cancel-card + .cancel-card::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: var(--pp-divider);
    margin: 1.25rem 0; /* space above/below divider */
  }
 
  /* Savings Card (text only) */
  .savings-card {
    text-align: center;
    border: 1px solid var(--pp-border);
    background: var(--pp-bg);
    padding: 2rem 1.25rem; /* luxurious spacing */
  }
 
  .savings-content p { margin: 0.25rem 0; }
 
  .savings-amount {
    font-size: 28px; /* slightly bigger, calmer visual weight */
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--pp-text);
    margin: 0.5rem 0; /* give it room */
  }
</style>
 
<div class="cancel-dialog">
  <div class="cancel-card">
    <span class="cancel-card__title">Don't lose out on</span>
    <ul class="benefits-list">
      <li class="benefits-list__item">Free shipping</li>
      <li class="benefits-list__item">Access to exclusive content</li>
      <li class="benefits-list__item">Reserved inventory</li>
    </ul>
  </div>
 
  <div class="cancel-card savings-card">
    <div class="savings-content">
      <p>You've saved</p>
      <p class="savings-amount">{{ savedBySubscribing }}</p>
      <p>by subscribing</p>
    </div>
  </div>
</div>

Splash Screen best practices

• Emphasize specific subscriber benefits: Be specific about what customers will lose if they cancel—compounded savings, member-only perks, free shipping, or early access to new products. Use dynamic visuals like animated graphics to represent benefits visually (e.g., a rising graph for escalating rewards or a calendar showing early access days).

• Keep video content short and authentic: If you're using video, keep it under 60 seconds. Feature your founder or a brand figure in a setting that reflects your brand personality. Open with warmth, acknowledge that needs change, and guide customers toward flexibility options like skipping or delaying instead of canceling. Thank subscribers for their loyalty and emphasize that you're here to adapt with them.

• Make alternative actions clear: State your call-to-action directly and make it easy to tap. For example: "Not ready for your next order? Simply tap here to skip your delivery right from this screen!" Simplify how customers can adjust their subscription without canceling.

• Use empathetic, personal language: Emphasize flexibility and reassure subscribers that managing their subscription is effortless. Use authentic, understanding language rather than transactional messaging. For example: "Life is always changing, and so can your subscription. Let's fine-tune your plan to perfection."

• Align visuals with your brand identity: Ensure your video or image uses consistent colors, fonts, and imagery that match your brand values. Film in settings that reflect your brand ethos—peaceful environments for wellness brands, vibrant studios for creative brands.

Use a 16:9 aspect ratio for video content to optimize mobile display.

Action best practices