Game Direct Embed

Embed an individual game directly in your web application or mobile app.

Overview

The Game Direct Embed allows you to integrate one of our game formats directly into your application. This is ideal when you want to feature a specific game type independently. The embed will automatically load today's game of the selected type.

Implementation Strategies

Web Applications: Use an iframe embed with proper permissions for clipboard access, sharing functionality, and analytics tracking.

Mobile Applications: Use a WebView component that navigates directly to the game URL, providing a seamless native app experience while leveraging our web-based games.

Setup

Obtain PARTNER_ID

You'll need a PARTNER_ID before integrating Lil Snack into your application. The PARTNER_ID is a unique identifier that directs Lil Snack to your specific instance of daily games. To obtain a PARTNER_ID, please contact hello@lilsnack.com.

Select GAME_TYPE

Additionally, you'll need a GAME_TYPE ID that corresponds to one of our Lil Snack game types. Supported game types have the following IDs:

• What The: prompt
• Swap: swap
• Downwords: path
• Stacked: stack
• Putt Putt Problems: bucket
• Liar's Quest: liars
• Quoted: quote
• Venn: venn

Implementation

The game URL format is:

https://staging.lilsnack.com/embed-game-direct?partner=PARTNER_ID&gt=GAME_TYPE

Replace PARTNER_ID with your provided PARTNER_ID and GAME_TYPE with the game type you want to display.

Web Applications

For web applications, use an iframe to embed the game directly on your page. The iframe should include proper permissions for full functionality.

HTML/JSX

<iframe
  id="lil-snack-game-direct-embed"
  src="https://staging.lilsnack.com/embed-game-direct?partner=PARTNER_ID&gt=GAME_TYPE"
  style={{
    width: "380px",
    height: "660px",
    border: "none",
    borderRadius: 8,
  }}
  loading="lazy"
  scrolling="no"
  allowFullScreen
  allow="clipboard-read; clipboard-write; web-share; storage-access"
></iframe>

Iframe Permissions Explained

The allow attribute includes the following permissions to ensure full game functionality:

• clipboard-read & clipboard-write - Enable copying game results and scores to the clipboard for easy sharing
• web-share - Enables native share sheets on mobile devices for sharing game results
• storage-access - Enables access to cookies and localStorage for game state saving and analytics tracking

These permissions ensure that players can share their results, save their progress, and that analytics data is properly collected.

Adjust the iframe dimensions based on your site's layout needs. For responsive designs, consider using percentage-based widths and CSS media queries.

Mobile Applications

For mobile applications, use a WebView component to load the game URL directly. This provides a native app experience while leveraging our web-based games.

iOS (Swift/SwiftUI)

import SwiftUI
import WebKit

struct LilSnackGameView: UIViewRepresentable {
    let partnerId: String
    let gameType: String

    func makeUIView(context: Context) -> WKWebView {
        let config = WKWebViewConfiguration()
        config.allowsInlineMediaPlayback = true
        config.mediaTypesRequiringUserActionForPlayback = []

        // Use the default persistent data store (required for player streak/stats)
        config.websiteDataStore = WKWebsiteDataStore.default()

        let webView = WKWebView(frame: .zero, configuration: config)
        return webView
    }

    func updateUIView(_ webView: WKWebView, context: Context) {
        let urlString = "https://staging.lilsnack.com/embed-game-direct?partner=\(partnerId)&gt=\(gameType)"
        if let url = URL(string: urlString) {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }
}

// Usage
LilSnackGameView(partnerId: "YOUR_PARTNER_ID", gameType: "prompt")

Android (Kotlin)

import android.webkit.WebView
import android.webkit.WebViewClient
import android.webkit.WebSettings
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.viewinterop.AndroidView

@Composable
fun LilSnackGameView(partnerId: String, gameType: String) {
    AndroidView(
        modifier = Modifier.fillMaxSize(),
        factory = { context ->
            WebView(context).apply {
                webViewClient = WebViewClient()
                settings.apply {
                    javaScriptEnabled = true
                    domStorageEnabled = true  // Required for player streak/stats
                    allowFileAccess = true
                    allowContentAccess = true
                    mediaPlaybackRequiresUserGesture = false
                }

                val url = "https://staging.lilsnack.com/embed-game-direct?partner=$partnerId&gt=$gameType"
                loadUrl(url)
            }
        }
    )
}

// Usage
LilSnackGameView(partnerId = "YOUR_PARTNER_ID", gameType = "prompt")

React Native

import React from "react";
import { WebView } from "react-native-webview";
import { StyleSheet, View } from "react-native";

const LilSnackGameView = ({ partnerId, gameType }) => {
  const gameUrl = `https://staging.lilsnack.com/embed-game-direct?partner=${partnerId}&gt=${gameType}`;

  return (
    <View style={styles.container}>
      <WebView
        source={{ uri: gameUrl }}
        style={styles.webview}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        allowsInlineMediaPlayback={true}
        mediaPlaybackRequiresUserAction={false}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    flex: 1,
  },
});

export default LilSnackGameView;

An example web embed will look something like this:

Data Persistence

Lil Snack games use local storage to track player streaks and statistics. To ensure this data persists between sessions, your WebView must be configured for persistent storage.

iOS (WKWebView)

Use the default (persistent) data store, not an ephemeral one:

// Use the default persistent data store
let config = WKWebViewConfiguration()
config.websiteDataStore = WKWebsiteDataStore.default()  // Persistent
let webView = WKWebView(frame: .zero, configuration: config)

warning

Avoid using .nonPersistent() as this will cause player data to be lost when the app closes:

// Do NOT use this configuration
config.websiteDataStore = .nonPersistent()  // Player data will not persist

Android (WebView)

Ensure DOM storage is enabled:

webView.settings.domStorageEnabled = true  // Required for localStorage

Avoid setting the WebView to private/incognito mode if you want player data to persist.

What Gets Stored

The following player data is stored locally:

• Current streak - consecutive days played
• Max streak - highest streak achieved
• Total games played - lifetime count
• Total wins - lifetime win count
• Last played game - prevents duplicate plays

What Can Cause Data Loss

Player statistics will be reset if:

• The user clears the app's data or cache from device settings
• The user uninstalls and reinstalls the app
• The WebView is configured with ephemeral/non-persistent storage

info

This is expected behavior for client-side storage. Players should understand that clearing app data will reset their game statistics.

Deploy

Once successfully integrated, we will deploy your PARTNER_ID to production. At that time, you'll need to update your implementation to use the production URL.

URL Migration

Update your base URL from:

https://staging.lilsnack.com/embed-game-direct?partner=PARTNER_ID&gt=GAME_TYPE

To:

https://lilsnack.com/embed-game-direct?partner=PARTNER_ID&gt=GAME_TYPE

Implementation Updates

Web Applications: Update the src attribute in your iframe to use the production URL.

Mobile Applications: Update the URL string in your WebView implementation to point to the production endpoint.

warning

The production lilsnack.com URL will only work with approved Lil Snack partners. Do not switch to production URLs until your PARTNER_ID has been deployed to production.

Troubleshooting

Player Data Not Saving

If players report losing their streak after closing the app:

1. iOS: Verify you're not using WKWebsiteDataStore.nonPersistent() - use .default() instead
2. Android: Ensure domStorageEnabled = true in your WebView settings
3. All platforms: Note that clearing app data/cache from device settings will reset player statistics - this is expected behavior