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 webView = WKWebView()
        webView.configuration.allowsInlineMediaPlayback = true
        webView.configuration.mediaTypesRequiringUserActionForPlayback = []

        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
                    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:

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.