DocHub
DocHub/Partner Portal/Splash Screen Flow/Splash Screen Pipeline
Complete flow from upload through approval to app display

Splash Screen Pipeline

The splash screen feature allows influencers to upload a custom image that displays to users who signed up with their referral code.

Purpose

Give influencers brand presence in the app. When a user opens HypnoELP and has a referral code linked to their account, they see the influencer’s splash screen before the main content.

Upload Flow

  1. Influencer logs into Partner Portal (hypnoelp.com/influencers/)
  2. Clicks “Upload Splash Screen” on their dashboard
  3. Selects an image file (PNG or JPG)
  4. Client-side JavaScript compresses the image to ~100KB target using canvas
  5. Portal calls update-splash-screen edge function with the compressed image
  6. Image stored in splash-screens Supabase storage bucket
  7. splash_screen_status set to pending
  8. Influencer sees “Pending Approval” status on their dashboard

Image Requirements

Spec Value
Dimensions 1080 x 1920 px
Aspect ratio 9:16 (portrait)
Format PNG or JPG
Max size ~100KB (after compression)
No borders Must be edge-to-edge
No rounded corners Image fills entire screen

Approval Flow

  1. Admin opens Admin Website → “Approvals” tab
  2. Pending splash screens appear as cards with phone mockup previews
  3. Click to enlarge shows full preview with influencer details
  4. Admin clicks “Approve” or “Reject”

On Approve

  1. approve-splash-screen edge function fetches the image from storage
  2. Image converted to base64 string
  3. Self-contained HTML generated with the base64 image embedded inline
  4. HTML stored in influencers.splash_screen_html
  5. Status set to approved

On Reject

  1. Status set to rejected
  2. Rejection reason stored in splash_screen_rejected_reason
  3. Influencer sees the reason on their portal dashboard
  4. Influencer can upload a new image (restarts the flow)

App Integration

The HypnoELP app retrieves splash screens via a single GET endpoint:

GET https://foxuipkuotwhitlxssyc.supabase.co/functions/v1/get-splash-screen?code=REFERRAL_CODE
  • Returns raw HTML — ready to render in a WebView
  • HTML is self-contained (base64 image, no external dependencies)
  • Returns 404 if code not found or splash screen not approved
  • No authentication required

Variables

Variable Location Purpose
SUPABASE_URL Edge functions env Supabase project URL
SUPABASE_SERVICE_ROLE_KEY Edge functions env Admin DB access
RESEND_API_KEY Edge functions secrets Email sending

Status

Production. Complete pipeline working. Admin can approve/reject, app can fetch approved screens.