Skip to main content

LoudCrowd Mobile SDK Installation Guide

LoudCrowd provides SDKs that bring LoudCrowd’s full suite of eCommerce and affiliate features to your iOS and Android mobile apps, including: Creator Storefronts, Shoppable Video, ShopWith, affiliate deep links and attribution.

C
Written by Customer Success
Updated in the last 15 minutes

Summary

LoudCrowd's Mobile SDKs lets you:

  • Embed Creator Storefronts, ShopWith Widget and Shoppable Video experiences in your native mobile app (rendered via WebView components styled to your brand). Default components are WebView-based for parity and speed, with a thin native bridge for cart/navigation and analytics.

  • Offer creators a secure OTP login and in‑app tools to manage their Storefronts and generate affiliate deep links.

  • Route users to mobile app or web automatically based on your rules.

  • Capture creator affiliate attribution for commissions payouts, and click analytics of user behavior to track buyer journeys, with consent management.

Included Features

  1. Creator Storefront — a page showing a creator’s media (video/images) and selected products.

  2. Creator List — a grid/list of creators linking to storefronts.

  3. Creator OTP Auth & Creator Mode — one‑time‑password login to access creator tools.

  4. Creator Mode & Widget — Logged‑in creators can inline‑edit their Storefront page and access floating controls on product pages to add to Storefront and create affiliate deep links.

  5. ShopWith Widget — floating chat‑style PDP overlay for creator recommendations and media.

  6. Affiliate Deep Links & Smart Routing — Generate links to app or web view of any ecomm landing page (Storefront, Homepage, Product, Collection pages), passing attribution parameters. Send users to app or web based on device and your rules.

  7. Attribution Web Events — track lc_anon_id across sessions and purchases to tie outcomes to affiliate links.

Pre-requisites

  1. App Requirements

    Your mobile apps must meet these requirements in order to be compatible with LoudCrowd SDKs:

    • iOS: iOS 15+, Xcode 15+, Swift 5.9+, ATS enabled.

    • Android: minSdk 23+, Kotlin, AndroidX, Compose or View-based apps.

    • Network access to your LoudCrowd domain(s) and media CDN (TLS 1.2+).

  2. Create a ShopID Your eCommerce Platform in the LoudCrowd Brand App

The You'll be given a ShopID

Installation

How to install LoudCrowd SDK, select and style WebViews for eCommerce experiences.

iOS Initialization

Xcode → File ▸ Add Package Dependencies… → add your LoudCrowd SDK repo URL.

In AppDelegate or app entry, initialize:

import LoudCrowdSDK

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
LoudCrowd.initialize(
apiKey: "<YOUR_API_KEY>",
brandId: "<BRAND_ID>",
options: Options(
theme: .auto,
consentManager: MyConsentManager(),
analyticsAdapter: SegmentAdapter(writeKey: "<SEGMENT_WRITE_KEY>")
 )
)
return true
 }
}

Mount the ShopWith widget on your PDP view controller:

ShopWithWidget.present(on: self, sku: product.sku, creatorId: attribution.creatorId)

Implement the commerce bridge (cart/nav):

LoudCrowd.commerceDelegate = MyCommerce()
struct MyCommerce: CommerceDelegate {
func addToCart(sku: String, qty: Int, variantId: String?) { Cart.shared.add(sku: sku, qty: qty, variantId: variantId) }
func openProduct(sku: String) { Navigator.toPDP(sku: sku) }
}

Android Initialization

// settings.gradle or project build: mavenCentral()
dependencies { implementation("com.loudcrowd:mobile-sdk:1.0.0") }

Initialize in Application:

class App : Application() {
override fun onCreate() {
super.onCreate()
LoudCrowd.initialize(
apiKey = "<YOUR_API_KEY>",
brandId = "<BRAND_ID>",
options = Options(
theme = Theme.Auto,
consentManager = MyConsentManager(),
analyticsAdapter = SegmentAdapter("<SEGMENT_WRITE_KEY>")
 )
 )
LoudCrowd.commerceDelegate = object : CommerceDelegate {
override fun addToCart(sku: String, qty: Int, variantId: String?) { cart.add(sku, qty, variantId) }
override fun openProduct(sku: String) { navigator.toPDP(sku) }
}
}
}

Configuration (Programmatic or JSON)

You can configure the SDK via code or supply a JSON file bundled in the app.

JSON example (loudcrowd.config.json)

{"shopId": "YOUR_SHOP_ID",
"routing": {
"defaultTarget": "auto",
"appDomains": ["app.yourbrand.com"],
"webFallback": "https://www.yourbrand.com",
"preferApp": true
 },
"affiliate": {
"baseUrl": "https://shop.yourbrand.com/link",
"appendParams": ["lc_anon_id", "creatorId", "sku"]
 },
"consent": { "functional": true, "analytics": false, "personalization": false, "marketing": false, "attribution": true },
"theme": { "primary": "#0F62FE", "radius": 12 },
"features": { "creatorList": false, "ugcVideoCarousel": false }
}

Load JSON at init (both platforms provide a Config.fromBundle("loudcrowd.config.json")).

WebViews for eCommerce Experiences

The LoudCrowd Mobile SDK leverages WebView technology 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)

There are a few short implementation steps that vary depending on the programming language and platform of your mobile apps. You will receive your specific instructions during your LoudCrowd program onboarding by filling out your technical onboarding questionnaire.

Theming & Styling

WebView components inherit your brand’s CSS variables -- refer to our CSS libraries below. Additional theme tokens are provided at init (primary, radius, fontScale).

Style customizations supported per experience:

ShopWith Widget (PDP overlay)

  • Purpose: shoppers view creator recommendations and media while browsing a product.

  • Mount: call ShopWithWidget.present(on: viewController/activity, sku, creatorId?).

  • Behavior: loads in a WebView with brand styling; supports expand/collapse and media playback.

  • Events: pdp_widget_impression, pdp_widget_interaction, pdp_widget_add_to_cart.

Creator Storefront - Feed & Hero

  • Purpose: full Storefront page for a creator (media + selected products).

  • Mount:

CreatorStorefrontFeed(creatorId: "<ID>")
.onProductTap { sku in Navigator.toPDP(sku: sku) }

CreatorStorefrontFeed(creatorId = "<ID>", onProductTap = { sku -> navigator.toPDP(sku) })

  • Offline: previously viewed content cached.

Creator Widget (PDP Buttons)

  • Purpose: logged‑in creators can add the current product to their Storefront and generate affiliate links.

  • Visibility: appears when SDK detects a valid creator session.

  • Actions: addToStorefront, createAffiliateLink(sku).

Creator List (Optional)

  • Purpose: surface discoverable creators; links to Storefronts.

  • Mount: CreatorList(brandId, layout: .grid | .list).

Video Carousel (Optional)

  • Purpose: showcase creator videos inline on homepage, product and collection pages.

  • Mount: UGCVideoCarousel(source: .creator(creatorId) | .sku(sku)).

Authentication (OTP) For Creator Tools

  • Flow: creator enters email → requestOTP(email/phone) → creator enters code (loudcrowd://verify?token=...) → verifyOTP → Creator session stored securely (Keychain / EncryptedSharedPrefs).

  • Deep Links: add associated domains / intent filters for loudcrowd:// and your universal links.

  • Security: rate limit OTP, HMAC signed requests, device attestation optional.

Sample (iOS)

LoudCrowdAuth.requestOTP(.email("creator@brand.com"))
// later
LoudCrowdAuth.verifyOTP(code: code) { result in /* show Creator Mode */ }

Sample (Android)

LoudCrowdAuth.requestOtp(Email("creator@brand.com"))
LoudCrowdAuth.verifyOtp(code) { session -> /* enable Creator Mode */ }

Commerce Bridge (Optional)

Implement two methods in your app so the SDK can interoperate with your cart/navigation.

  • addToCart(sku, qty, variantId?) (required)

  • openProduct(sku) (optional)

Catalog, pricing, availability, and PDP content continue to come from your eCommerce systems connected to LoudCrowd; the SDK does not replace or provide this data itself.

Deep Linking, Smart Routing & Affiliate Links

Routing

The SDK supports some basic routing rule configuration or routing can instead be determined by your chosen deep link technology.

LoudCrowd SDK configurations are set in the LoudCrowd Brand App:

  • defer to deep link technology: routing is not determined by LoudCrowd SDK

  • auto (default): try mobile app deep link first; if the app isn’t installed, fall back to web.

  • app: prompt user to open or install app.

  • web: force web route, even if app is installed.

Affiliate Link Generation

Create links that carry attribution for the creator, sku, and the anonymous device/session.

SDK helper

let url = LoudCrowdLinks.createAffiliateLink(
sku: sku,
creatorId: creator.id,
target: .auto // .app or .web
)

// Example: https://shop.yourbrand.com/link?sku=123&creatorId=abc&lc_anon_id=...&utm_source=loudcrowd

Included params

Configure your website/app to honor these params on app load and during checkout for proper deep linking and attribution tracking.

  • lc_anon_id (UUID for session & purchase tracking)

  • creatorId, storefrontId

  • sku (or productId)

  • collection (Storefront Collection ID)

  • media (Storefront Media ID)

  • optional utm_* for your analytics

Attribution & Analytics

lc_anon_id (anonymous token)

  • Generated on first launch; persisted in secure storage.

  • Attached to SDK events and appended to affiliate links.

  • Use it to connect app events ↔ web checkout for purchase attribution.

iOS (pseudo)

if let existing = Keychain.get("lc_anon_id") { use(existing) } else { Keychain.set("lc_anon_id", UUID().uuidString) }

Analytics Consent

Consent categories: functional, analytics, personalization, attribution, marketing.

The SDK gates non‑functional events until consent is granted (or drops them per your policy).

Accessibility

VoiceOver/TalkBack labels; Dynamic Type; contrast‑safe palettes; keyboard navigation for interactive controls.

Security

  • TLS 1.3 + certificate pinning for SDK API calls.

  • HMAC request signing with rotating keys.

  • Secure token storage (Keychain / EncryptedSharedPrefs).

  • App attestation (App Attest / Play Integrity) optional.

  • No third‑party tracking

Error Handling

  • Graceful offline fallback with cached content.

  • Clear inline error states; user‑friendly retry.

  • Automatic retry for transient failures; circuit breaker for persistent errors.

Troubleshooting

  • Enable verbose logs in debug builds: Options(enableLogging: true) / Options(enableLogging = true).

  • Validate routing: LoudCrowd.debug.routes().

  • Confirm consent state: LoudCrowd.debug.consent().

  • Check commerce delegate wiring: test addToCart from the sample app.

Related Articles
Install the LoudCrowd SDK on your eCommerce Site
Implementation Overview: Custom eCommerce
Creator Storefront & Affiliate Link Structure
Loudcrowd WebView Components
Loudcrowd SDK Commerce Bridge
Did this answer your question?