Summary
The LoudCrowd Mobile SDK leverages WebView to integrate custom e-commerce components for creator and buyer experiences within your native mobile apps. These include:
Storefronts
Creator Lists
Shoppable Video
ShopWith Widget
Creator Widget
One-time Password (OTP)
Rendering a Loudcrowd Component
Below are minimal patterns to render Loudcrowd components on your mobile application. It assumes you’ve completed Installation and initialized the package at app launch.
iOS (SwiftUI)
import LoudcrowdKit
struct StorefrontScreen: View {
var body: some View {
LCCreatorStorefrontView(creatorId: "cr_123")
}
}
Android (Jetpack Compose)
@Composable
fun StorefrontScreen() {
LCCreatorStorefrontView(creatorId = "cr_123")
}
Other views follow the same pattern: LCCreatorListView(...), LCShoppableVideoView(...), LCOTPView(onVerified: ...).
ShopWith Component
This is a floating, chat‑style PDP overlay that surfaces creator recommendations and media. Works across iOS and Android via a persistent WebView overlay.
iOS (SwiftUI / UIKit)
// Start once per UIWindowScene (e.g., when scene becomes active)
LCShopWithWidgetManager.shared.start(on: windowScene)
// On PDP screens
Loudcrowd.shared
.set("route", "Product")
.set("productId", sku)
Android (Compose / View)
// Start once (Activity/Fragment)
ShopWithOverlay.start(activity)
// On PDP screens
Loudcrowd.set("route", "Product")
Loudcrowd.set("productId", sku)
Required & optional context
Provide via the shared session (will broadcast to the overlay automatically):
Required
route: must be "Product" to show the entry point
productId: your PDP SKU/ID (string)
Recommended
variantId (string)
The Creator Widget practically works the same way, the main difference being the Creator Widget will unlock certain functions for authenticated creators. In this case, the ShopWith Widget will be hidden in favor of the Creator Widget.
Theming & Styling
The same CSS interface provided for the web components also apply to the mobile WebView components -- refer to our CSS documentation below.
Style customizations supported per experience:
Once the CSS is configured, it will be applied to any components that you have implemented in your application.
Components overview
Storefronts
iOS: LCCreatorStorefrontView(creatorId: "cr_123")
Android: LCCreatorStorefrontView(creatorId = "cr_123")
Creator Lists
iOS: LCCreatorListView(query: .init(tag: nil, limit: 50))
Android: LCCreatorListView(query = CreatorListQuery(tag = null, limit = 50))
Shoppable Video
iOS: LCShoppableVideoView(videoId: "vid_123")
Android: LCShoppableVideoView(videoId = "vid_123")
ShopWith Widget
iOS: LCShopWithWidgetManager.shared.start(on: windowScene)
Android: ShopWithOverlay.start(activity)
Creator Widget
iOS: LCreatorWidgetManager.shared.start(on: windowScene)
Android: CreatorWidgetOverlay.start(activity)
One-time Password (OTP)
iOS: LCOTPView(onVerified: { token in })
Android: LCOTPView(onVerified = { token -> })