Skip to main content

Events

The Lil Snack full embed calls the following events via postMessage. Partners can listen to these events and respond to them.

All Events​

lil-snack-fullscreen​

Called when we intend for Lil Snack to go fullscreen (during play)

lil-snack-inline​

Called when we intend for Lil Snack to leave fullscreen

lil-snack-set-size​

Called when the embed initializes with the height of the contents. This allows you to adjust the iFrame's height to the exact content size. Params:

  • height - The size of the embed contents

lil-snack-played-game​

Called when an individual game is played. Params:

  • dayId - Unique identifier for the day
  • gameId - Unique identifier for the game
  • dayNum - Sequential integer tracking the day number in the context to all days run. Used to calculate streak
  • firstWin - Did the user win the game and do it in their first time (ignoring retrys)
  • win - Did the user when the game inclusive of retrys

Event Example​

Below is an example of how to listen to and act on a Lil Snack event.

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

      const handlePlayedGameMessage = (event) => {
        if (event.origin.includes(embedDomain) && event.data.messageType === "lil-snack-played-game") {
          console.log( event.data.dayId );
          console.log( event.data.gameId );
          console.log( event.data.dayNum );
          console.log( event.data.firstWin );
          console.log( event.data.win );
        }
      };

      window.addEventListener("message", handlePlayedGameMessage);

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