Creatopy
  • Creatopy's technical documentation
  • App Integration
    • Iframe embedding
  • Zapier
    • 📔Getting started with Zapier integration
    • 🧩Setting up Zapier with Creatopy
      • 1. Setting up the first zap
      • 1.1 Setting up the action in your first zap (generate 1 creative)
      • 1.2 Setting up the action in your first zap (generate multiple creatives)
      • 2.1 Setting up your second zap (Creatopy trigger)
      • 2.2 Setting up your second zap (webhook trigger)
      • 3. Verify your generated creatives in Creatopy
    • 💡Zapier use cases
      • Generate design variations through a spreadsheet
      • Generate creatives from an e-commerce platform
      • Send newly generated creatives to cloud storage
      • Post newly generated creative on a social media platform
      • Send newly generated creatives to an email inbox
Powered by GitBook
On this page
  1. App Integration

Iframe embedding

The editor is embeddable in iframe too, using /tokenAuth?token=<token>method. The only difference is that you use app-proxy.creatopy.com subdomain instead app.creatopy.com

<iframe
      title="Creatopy"
      src="https://app-proxy.creatopy.com/tokenAuth?token=<token>"
      style="width: 100%; border: none; min-height: 800px"
    >
</iframe>

To ensure consistent integration, the iframe sends two messages to the parent window. One when the session starts and another when it ends, triggered by clicking the "End session" button.

You can catch the messages using the next script:


    window.addEventListener("message", (event) => {
      // Optionally, check the origin of the message for security purposes
      if (event.origin !== "https://app-proxy.creatopy.com") return;

      // Handle the message
      console.log("Message received from iframe:", event.data);
    });
  
Session started
{
    "type": "sessionStarted",
    "sessionId": "xxx", // id of the session that just started
    "initToken": "<token>" // the JWT sent to authenticate the current session /token-auth/{token}
}    
Session ended
{
    "type": "sessionEnded",
    "sessionId": "xxx", // id of the session that just finished
}    

Last updated 1 month ago