Complete Setup
Full integration of Vio live engagement in a streaming app. Copy and adapt as needed.
1. Package Dependencies
// Package.swift
dependencies: [
.package(url: "https://github.com/vio-live/VioSwiftSDK.git", from: "0.2.0-beta")
],
targets: [
.target(
name: "YourApp",
dependencies: [
.product(name: "VioCore", package: "VioSwiftSDK"),
.product(name: "VioEngagementSystem", package: "VioSwiftSDK"),
.product(name: "VioEngagementUI", package: "VioSwiftSDK"),
.product(name: "VioCastingUI", package: "VioSwiftSDK"),
.product(name: "VioUI", package: "VioSwiftSDK"),
]
)
]2. App Entry Point
import SwiftUI
import VioCore
import VioUI
@main
struct MyStreamingApp: App {
@StateObject private var cartManager = CartManager()
@StateObject private var checkoutDraft = CheckoutDraft()
init() {
VioSDK.configure(apiKey: "YOUR_VIO_API_KEY")
}
var body: some Scene {
WindowGroup {
ContentView()
.environmentObject(cartManager)
.environmentObject(checkoutDraft)
}
}
}3. Stream View with Engagement Overlay
import SwiftUI
import VioCore
import VioEngagementSystem
import VioEngagementUI
struct StreamView: View {
let contentId: String // e.g. "real-madrid-vs-barcelona-2025-01-24"
@StateObject private var engagement = EngagementManager.shared
@StateObject private var campaign = CampaignManager.shared
@EnvironmentObject private var cartManager: CartManager
@State private var activePoll: Poll?
@State private var activeContest: Contest?
var body: some View {
ZStack {
// Your video player
VideoPlayerView()
// Engagement overlay
if campaign.isCampaignActive {
engagementOverlay
}
}
.task {
await VioSDK.setContent(
id: contentId,
userId: currentUser.id, // optional — enables per-user analytics
country: currentUser.country // optional — market availability
)
}
.onDisappear {
VioSDK.disconnect()
}
}
@ViewBuilder
private var engagementOverlay: some View {
if let poll = activePoll {
VioEngagementPollOverlay(
question: poll.question,
subtitle: nil,
options: poll.options.map {
VioEngagementPollOverlayOption(id: $0.id, text: $0.text)
},
duration: 30,
isChatExpanded: false,
onVote: { optionId in
Task {
guard let context = CampaignManager.shared.currentBroadcastContext else { return }
try? await engagement.voteInPoll(
pollId: poll.id,
optionId: optionId,
broadcastContext: context
)
activePoll = nil
}
},
onDismiss: { activePoll = nil }
)
}
if let contest = activeContest {
VioEngagementContestOverlay(
title: contest.title,
subtitle: contest.description,
imageUrl: contest.imageUrl,
sponsorLogoUrl: campaign.currentCampaign?.sponsor?.logoUrl,
onParticipate: {
Task {
guard let context = CampaignManager.shared.currentBroadcastContext else { return }
try? await engagement.participateInContest(
contestId: contest.id,
broadcastContext: context
)
activeContest = nil
}
},
onDismiss: { activeContest = nil }
)
}
}
}4. Connecting to the Dashboard
For each stream:
- Create a Broadcast in the Dashboard —
externalIdmust match yourcontentId - Use the Sportmonks match picker to link a real fixture (auto-fills logos and teams)
- Add Polls with trigger minutes (e.g. min 1, 35, 70)
- Add a Contest with prize text and image
- Add Sponsor Slots with product IDs at key minutes
- Set the broadcast status to Live when the stream starts
No code changes needed once configured — the SDK discovers everything at runtime.
Implementation Checklist
- Add VioSwiftSDK via SPM (
VioCore,VioEngagementSystem,VioEngagementUI,VioCastingUI,VioUI) - Call
VioSDK.configure(apiKey:)in App init - Call
VioSDK.setContent(id:)when stream opens - Show overlays from
EngagementManager.getActivePolls/getActiveContests(for:) - Call
VioSDK.disconnect()when stream closes - Configure broadcast + polls + contest in Dashboard before going live
Last updated on