🥞
Glif Docs/Guide
  • Getting Started
    • 👋What is Glif?
    • 💡What can I do with a glif?
      • 🏃Run a glif
      • 🔌Build a glif
      • 🔀Remix a glif
      • 🗣️Comment on a glif
      • 🔳Embed a glif
    • ⚒️How do I build a glif?
      • 📽️Video tutorial: Building a simple image generator
      • 🟰Using variables
    • ⚙️Profile Settings
    • 🪙Credits and Payments
    • ❓FAQs
  • Blocks
    • 🙋Inputs
      • ✍️Text Input Block
      • 🖼️Image Input Block
      • 📋Multipick Block
    • 🪄Generators
      • 📃Text Block
      • 🖼️Image Block
      • ➡️Image to Text Block
        • Florence2Sam2Segmenter
    • 🧰Tools
      • 🔀Text Combiner Block
      • 🔬JSON Extractor Block
    • 💅Styling
      • 🎨HTML Block
      • 🖼️Canvas Block
    • 🧑‍🔬Advanced/Experimental
      • 🎙️Audio Input Block
      • ↔️Glif Block
      • 🌐Web Fetcher Block
      • 🔊Audio Spell
      • 🧱ComfyUI Block
      • 📡Audio to Text Block
      • 🎥Video Input Block
      • 🔧JSON Repair Block
  • Apps
    • 🎨Glif It! Browser Extension
  • Glif University
    • 🎥Video Tutorials
      • 🐲How To: D&D Character Sheet Generator
      • 🧠How To: Expanding Brain Meme Generator
      • 🦑How To: Occult Memelord Generator
      • 🥸How To: InstantID Portrait Restyle Glif
      • 🕺How To: Style and Pose a Character with InstantID + Controlnet
      • 😱How To: Create a Simple Cartoon Portrait Animation Glif (LivePortrait + Custom Blocks)
      • 👗How to Create a Clothing Restyler App (IP Adapter, ControlNet + GPT Vision)
      • 🤡How to Create a 4+ Panel Storyboard/Comic (Flux Schnell)
      • 🎂How to Create a Recipe Generator with Accompanying Pictures
      • How to Use JasperAI Depth Controlnet on Flux Dev
      • 🦸‍♂️How to Make a Consistent Comic Panel Generator
    • 🧑‍🏫Prompt Engineering 101
    • 🖼️ControlNet
    • 📚AI Glossary
  • API - for Developers
    • ⚡Running glifs via the API
    • 🤖Using AI Assistants to build with the Glif API
    • 📙Reading & writing data via the API
    • 🗾Glif Graph JSON Schema
    • 📫Embed player & custom webpages
    • 📫Sample code
    • ❓What can I make with the Glif API?
      • Browser Extensions
      • Discord Bots
      • Games
      • Social Media Bots
      • Experimental Projects
  • Policies
    • 👨‍👩‍👧‍👦Community Guidelines
  • Programs
    • 🖼️Loradex Trainer Program
  • Community Resources
    • 🧑‍🤝‍🧑Resources Created by Glif Community Members
  • Contact Us
    • 📣Send us your feedback
    • 🚔Information for law enforcement
Powered by GitBook
On this page
  1. API - for Developers

Embed player & custom webpages

PreviousGlif Graph JSON SchemaNextSample code

Last updated 4 months ago

Using iframe message passing. Your page can recieve "glif ran" events from our embeddable player.

Here is the demo:

way you can receive results from the embed player. For security reasons, you can only listen to the demo and can't send to it. If you want to run glifs, register a key and . Additionally, check out + for writing more advanced examples.

Simple example

You can copy a glif embed code from the glif page in the "share" menu top right.

Here's a working webpage that runs one of my personal favorite glifs, by .

<div id="glif_1718829227200">
  <iframe
    id="glifIframe"
    src="https://glif.app/@Carlos/glifs/clllbhk40000rmj0f7rk3qzfp/embed?mode=last_10_runs&ar=landscape"
    style="width: 100%; height: 100%; border: 0"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>
<style>
  #glif_1718829227200 {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
</style>

Here is the core iframe communication part. Your page recieves events from the glif iframe using postMessage API

<!doctype html>

<script>
window.addEventListener("message", handleMessage, false);

function handleMessage(event) {
  const allowedDomains = ["https://glif.app"];
  if (!allowedDomains.includes(event.origin)) {
    console.warn("ignoring message from untrusted origin");
    return;
  }

  const message = event.data;
  if (message.type === "glifRunStarted") {
    // handle a glif run starting (e.g. show a loading indicator)
  } else if (message.type === "glifRunCompleted") {
    // handle a glif run completing (e.g. show the final image)
  } else {
    // currently only sends those 2 messages so nothing else here yet!
  }
}
</script>

Here is a simpler webpage:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Glif Embed Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            text-align: center;
        }
        #glifUrl {
            width: 70%;
            padding: 10px;
            margin-right: 10px;
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }
        #output {
            margin-top: 20px;
        }
        #outputImage {
            max-width: 100%;
            margin-top: 10px;
        }
        #outputUrl {
            width: 100%;
            height: 50px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>Glif Embed Demo</h1>

    <div>
        <input type="text" id="glifUrl" placeholder="Enter Glif URL">
        <button onclick="loadGlif()">Run Glif</button>
    </div>

    <div id="output">
        <img id="outputImage" style="display: none;">
        <textarea id="outputUrl" readonly></textarea>
    </div>

    <script>
        function loadGlif() {
            const glifUrl = document.getElementById('glifUrl').value;
            const iframe = document.createElement('iframe');
            iframe.style.display = 'none';
            iframe.src = glifUrl + '/embed?mode=last_10_runs&ar=landscape';
            document.body.appendChild(iframe);

            window.addEventListener('message', handleMessage);
        }

        function handleMessage(event) {
            if (event.origin !== 'https://glif.app') return;

            const message = event.data;
            if (message.type === 'glifRunCompleted' && message.outputFull?.type === 'IMAGE') {
                const imageUrl = message.outputFull.value;
                document.getElementById('outputImage').src = imageUrl;
                document.getElementById('outputImage').style.display = 'block';
                document.getElementById('outputUrl').value = imageUrl;
            }
        }
    </script>
</body>
</html>

A more complex example is

If you need help us please contact us in in our Discord server.

📫
https://glif.app/embed-test.html
run glifs via API
Val.town
Web Fetcher Block
Here is a detailed tutorial on how to do that, with screenshots
Farthest Sider Cartoon Generator
@Carlos
Glif Iframe Embed Demo app
#api-support