B Bubbl Docs

iOS Modal Styling

Bubbl iOS gives you payloads and tracking helpers. You control the full modal experience.

  • Drive presentation from NotificationManager.shared.latest or .publisher
  • Use one modal component for notification + survey variants
  • Keep all analytics in modal actions (trackCTAEngagement, trackMediaView, trackSurveyEvent)

Example shell (SwiftUI)

.sheet(item: $notificationManager.latest) { details in
  NotificationModalView(details: details)
}

Styling patterns from the sample app

Container and typography

  • NavigationStack inside modal for clear close behavior
  • Headline with .font(.title2) and body with standard text style
  • Rounded content sections with consistent spacing

Media rendering

  • Image: AsyncImage(...).scaledToFit()
  • Video: VideoPlayer for direct URLs
  • YouTube: WKWebView embed
  • Audio: custom compact audio control row

Survey rendering

  • Each question inside a card-style container
  • Explicit selected states for options
  • Disabled submit until required answers are present
  • Post-submit success/failure feedback with alert/toast

Example survey card styling

VStack(alignment: .leading, spacing: 12) {
  Text(question.question)
    .font(.headline)

  // question-specific input
}
.padding()
.background(Color(UIColor.secondarySystemGroupedBackground))
.cornerRadius(12)

Example CTA button styling

Button(details.ctaLabel ?? "Open") {
  // open url + track CTA
}
.buttonStyle(.borderedProminent)

Design guidance

  • Keep modal max width readable on iPad
  • Preserve safe-area spacing for close and CTA controls
  • Use consistent visual language between survey and non-survey content
  • Track dismissals explicitly for analytics completeness