Skip to Content
Swift SDKComponents

Components

The Vio SDK provides SwiftUI components for live sports engagement. Most come from VioCastingUI (sports-specific overlays) and VioEngagementUI (engagement cards and overlays).

Engagement Overlays (VioEngagementUI)

Full-screen overlays triggered automatically by WebSocket events.

VioEngagementPollOverlay

Full-screen poll overlay.

import VioEngagementUI
 
VioEngagementPollOverlay(
    question: "Hvem scorer neste mål?",
    subtitle: nil,
    options: [
        VioEngagementPollOverlayOption(id: "1", text: "FC Barcelona"),
        VioEngagementPollOverlayOption(id: "2", text: "PSG"),
    ],
    duration: 30,
    isChatExpanded: false,
    onVote: { optionId in
        Task {
            guard let context = CampaignManager.shared.currentBroadcastContext else { return }
            try? await EngagementManager.shared.voteInPoll(
                pollId: poll.id,
                optionId: optionId,
                broadcastContext: context
            )
        }
    },
    onDismiss: { }
)

VioEngagementContestOverlay

Full-screen contest entry overlay.

VioEngagementContestOverlay(
    title: "Kampens spiller",
    subtitle: "Stem på den beste spilleren",
    imageUrl: "https://...",
    sponsorLogoUrl: CampaignManager.shared.currentCampaign?.sponsor?.logoUrl,
    onParticipate: {
        Task {
            guard let context = CampaignManager.shared.currentBroadcastContext else { return }
            try? await EngagementManager.shared.participateInContest(
                contestId: contest.id,
                broadcastContext: context
            )
        }
    },
    onDismiss: { }
)

VioEngagementProductOverlay

Product grid overlay shown at sponsor slot minutes.

VioEngagementProductOverlay(
    products: products,
    isVisible: showProducts,
    onDismiss: { showProducts = false },
    onAddToCart: { product in Task { await cartManager.addProduct(product) } }
)

Live Casting Components (VioCastingUI)

For full sports casting experiences. Import VioCastingUI.

VCastingActiveView

The main overlay view for a live casting session. Combines match header, timeline, polls, contests, chat, and products.

import VioCastingUI
import VioCore
 
VCastingActiveView(
    match: match,
    sessionContext: VioSessionContext(
        broadcastContext: BroadcastContext(broadcastId: "real-madrid-vs-barcelona-2025-01-24"),
        userId: "user_123"
    )
)
.environmentObject(cartManager)

MatchHeaderView

Live match score, team logos, and match status. Score updates automatically every 30 seconds.

MatchHeaderView(match: match)

TimelinePollCard

Poll card for the timeline feed.

TimelinePollCard(
    poll: poll,
    sponsorAssets: sponsorAssets,
    onVote: { optionId in /* handle */ }
)

ContestCard

Contest participation card.

ContestCard(
    contest: contest,
    sponsorAssets: sponsorAssets,
    onParticipate: { /* handle */ }
)

SponsorBanner

Sponsor logo and branding. Assets come from backend automatically.

SponsorBanner()

VCastingProductCardWrapper / VCastingProductModal

Shoppable product card and its detail modal.

VCastingProductCardWrapper(
    product: product,
    onTap: { showModal = true }
)
 
VCastingProductModal(
    product: product,
    isPresented: $showModal,
    onAddToCart: { Task { await cartManager.addProduct(product) } }
)

AllContentFeed

Main content feed showing all timeline events.

AllContentFeed(match: match)

MatchStatsView / MatchLineupView

MatchLineupView is backend-driven — pass the broadcastId and the lineup is delivered automatically via WebSocket (lineup_show event) 10 minutes before kickoff. No manual data fetching required.

MatchStatsView(match: match)
 
// Backend-driven — lineup arrives via WebSocket
MatchLineupView(broadcastId: "real-madrid-vs-mancity-2026-03-11")

TweetCard / AnnouncementCard

Social and commentary cards for the timeline.

TweetCard(tweet: tweet, sponsorAssets: sponsorAssets)
AnnouncementCard(announcement: announcement)

Product Components (VioUI)

ProductService

import VioUI
 
let products = try await ProductService.shared.loadProducts(
    productIds: [408841, 408895],
    currency: "NOK",
    country: "NO"
)

CartManager + VioFloatingCartIndicator + VioCheckoutOverlay

@StateObject private var cartManager = CartManager()
 
.overlay { VioFloatingCartIndicator().environmentObject(cartManager) }
.sheet(isPresented: $cartManager.isCheckoutPresented) {
    VioCheckoutOverlay()
        .environmentObject(cartManager)
        .environmentObject(checkoutDraft)
}

VPaymentSheet

Apple Pay sheet component. Handles the full payment flow: Apple Pay authorization, Stripe tokenization, and order submission. Merchant ID merchant.live.vio is pre-configured via the Dashboard.

import VioUI
 
VPaymentSheet(
    cart: cartManager.cart,
    onSuccess: { order in
        // Order confirmed — show confirmation UI
        print("Order \(order.id) confirmed")
    },
    onCancel: {
        // User dismissed — nothing to do
    }
)

TV→iPhone handoff: On tvOS, VPaymentSheet initiates an APNs-based handoff — the Apple Pay sheet appears on the user’s paired iPhone. No additional configuration needed in the SDK.

Design System (VioDesignSystem)

import VioDesignSystem
 
Text("LIVE")
    .foregroundColor(VioColors.primary.toColor())
 
VStack(spacing: VioSpacing.md) {
    VioButton(title: "Stem nå", style: .primary) { }
}

Next Steps

Last updated on
Core ConceptsGuides