Full Embed

Embed the full Lil Snack experience on your site.

Full Embed Capabilities

Default

Below are the default capabilities for the full Lil Snack embed.

• Four playable games that cycle daily
• Support for ALL Lil Snack game formats:
  • What The
  • Swap
  • Stacked
  • DownWords
  • Putt Putt Problems
  • Liars Quest
  • Quoted
  • Range
  • More games to come!
• Independent game scheduling, unique to partner
• Local tracking of played games
• Social Share Prompt
• Custom Header
• Custom Post Play Redirect

Custom

Below are the custom capabilities which can be enabled dependent on the partner and their implementation. These features are also dependent on bridging the partner's user account to the Lil Snack backend (without requiring an additional Lil Snack authentication).

• Streaks
• Token Collection
• Leaderboards
• Item Collecting
• Time Based Events

Setup

Obtain PARTNER_ID

You'll need access to a PARTNER_ID prior to integrating Lil Snack on your website. The PARTNER_ID is a unique identifier that lets Lil Snack where to point to your unique instance of Lil Snack daily games. To obtain an PARTNER_ID, please reach out to hello@lilsnack.co.

For initial testing, you can use the following example PARTNER_ID. Note, this is static (games don't change) and should not be used in production.

PARTNER_ID = "example";

Embed iFrame

To embed your unique partner Lil Snack experience, embed the following iFrame on your destination page. Replace PARTNER_ID with your provided PARTNER_ID.

iFrame

<iframe
  id="lil-snack-embed"
  src="https://staging.lilsnack.co/embed-full?partner=PARTNER_ID"
  style={{
    width: "380px",
    height: "660px",
    border: "none",
    borderRadius: 8,
  }}
  loading="lazy"
  scrolling="no"
  allowFullScreen
></iframe>

An example embed will look something like this:

Implement Fullscreen

When a user clicks to play, the Lil Snack embed should become fullscreen for the best play experience. Likely each partner's implementation or interpretation of fullscreen will be unique. We've provided two handy events for enabling and disabling fullscreen.

• lil-snack-fullscreen - Listen to this event. Upon event invocation, enable fullscreen
• lil-snack-inline - Listen to this event. Upon event invocation, disable fullscreen

Implement Set Size

The Lil Snack game container height can change based on the content within. For example, if we are running a 5th bonus game, the container will get taller. We provide an event that lets partners get the exact height of the content. With this, partners are able to update the height of the embeded iFrame.

• lil-snack-set-size - Listen to this event. Upon event invocation, adjust the iFrame height with the provided height parameter

Example

Below is a React example implementing full screen, inline and set height by responding to the events.

import styles from '../styles/Home.module.css';
import { useEffect } from 'react';

export default function Home() {

  useEffect(() => {
      const embedDomain = "lilsnack.co";

      const fullscreen = () => {
          document.body.classList.add("lil-snack-fullscreen");
      };
      const inline = () => {
          document.body.classList.remove("lil-snack-fullscreen");
      };
      const handleFullscreenMessage = (event) => {
          if (event.origin.includes(embedDomain) && event.data.messageType === "lil-snack-fullscreen") {
              fullscreen();
          }
      };
      const handleInlineMessage = (event) => {
          if (event.origin.includes(embedDomain) && event.data.messageType === "lil-snack-inline") {
              inline();
          }
      };

      const handleSetSizeMessage = (event) => {
          if (event.origin.includes(embedDomain) && event.data.messageType === "lil-snack-set-size") {
              const iframe = document.getElementById('lil-snack-embed');
              if (iframe) {
                  iframe.style.height = `${event.data.height}px`;
              }
          }
      };

      window.addEventListener("message", handleFullscreenMessage);
      window.addEventListener("message", handleInlineMessage);
      window.addEventListener("message", handleSetSizeMessage);

      // Cleanup listeners on component unmount
      return () => {
          window.removeEventListener("message", handleFullscreenMessage);
          window.removeEventListener("message", handleInlineMessage);
          window.removeEventListener("message", handleSetSizeMessage);
      };
  }, []);

  return (
    <div className={styles.container}>

      <main>
        <>
          <iframe
              id="lil-snack-embed"
              src="https://staging.lilsnack.co/embed-full?partner=PARTNER_ID"
              style={{
                  width: "380px",
                  height: "660px",
                  border: "none",
                  borderRadius: 8,
              }}
              loading="lazy"
              scrolling="no"
              allowFullScreen
          ></iframe>
          <style jsx global>{`
              .lil-snack-fullscreen,
              .lil-snack-fullscreen #__next {
                  position: static;
                  transform: none;
                  overflow: hidden;
              }
              .lil-snack-fullscreen #lil-snack-embed {
                  position: fixed;
                  top: 0;
                  left: 0;
                  z-index: 9999;
                  width: 100% !important;
                  height: 100% !important;
              }
          `}</style>
        </>
      </main>
    </div>
  );
}

Deploy

Once successfully integrated, we will deploy your PARTNER_ID to production. Once this happens, you'll simply switch your embed iFrame's URL from:

  https://staging.lilsnack.co/embed-full?partner=PARTNER_ID

To:

  https://lilsnack.co/embed-full?partner=PARTNER_ID

warning

The production lilsnack.co URL will only work and should only be used with approved Lil Snack partners.