Embed Shuffll's iFrame in Your App

Shuffll's iFrame integration allows you to embed a video creation wizard directly into your application, offering a seamless, user-friendly interface for effortless video creation.

With this integration, users can generate, enhance, and publish videos without ever leaving your platform.

Customizing the Shuffll iFrame

Shuffll’s iFrame is fully customizable, allowing you to match it to your platform’s branding and UI design.

✅ Adjust colors, fonts, and themes to align with your product.
✅ Modify layouts to fit different screen sizes and UI structures.
✅ Enable or disable specific features based on your user experience needs.

iframe.setOptions({
    apiKey: 'YOUR_API_KEY',
    projectId: 'YOUR_PROJECT_ID',
    projectName: 'YOUR_PROJECT_NAME',
    theme: {
        primaryColor: "#FF5733",
        secondaryColor: "#333333",
        backgroundColor: "#F4F4F4",
        font: "Arial, sans-serif"
    }
})

With these options, you can seamlessly integrate Shuffll while maintaining a consistent brand identity.

How to Embed Shuffll's iFrame

Follow these steps to integrate the Shuffll iFrame into your application:

1️⃣ Include the Shuffll iFrame in Your HTML

<!DOCTYPE html>
<html>
    <head>  
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Shuffll iFrame Example</title>
    </head>
    <body>
        <h1>Shuffll iFrame Example</h1> 
        <div id="shuffll-iframe-container"></div>
        <script src="https://app.shuffll.com/iframe.js"></script>
    </body>
</html>

2️⃣ Initialize the Shuffll iFrame

const iframeContainer = document.getElementById('shuffll-iframe-container');
const iframe = new ShuffllIframe(iframeContainer);
iframe.init();

3️⃣ Customize the Shuffll iFrame

iframe.setOptions({
    apiKey: 'YOUR_API_KEY',
    projectId: 'YOUR_PROJECT_ID',
    projectName: 'YOUR_PROJECT_NAME',
    theme: {
        primaryColor: "#FF5733",
        secondaryColor: "#333333",
        backgroundColor: "#F4F4F4",
        font: "Arial, sans-serif"
    }
})

4️⃣ Display the Shuffll iFrame

<div id="shuffll-iframe-container"></div>

Demo: Embedding Shuffll iFrame

See how easy it is to integrate and use the Shuffll iFrame in your platform:

Shuffll iFrame Demo

💡 Need Help?

Click to Expand

📧 Contact Us:contact@shuffll.com

📖 Read the API Docs:Shuffll API

💬 Join the Community (Coming Soon!)

🔥 Why Use the Shuffll iFrame?

Seamless User Experience – Let users create and manage videos directly inside your platform.
No Development Required – Skip complex API calls and integrations.
Customizable Design – Match it to your app’s branding effortlessly.
Faster Time to Market – Start offering AI-powered video creation instantly.

🔹 What’s New in This Update?

✔ ** Design Customization Options** – Customize colors, fonts, and layout to match your branding.
✔ ** Embedded Video Tutorial** – Show users exactly how the iFrame works (../images/iframe.gif).
✔ ** Actionable Next Steps** – Direct users to API docs and Webhook automation.

Would you like any refinements? 🚀🎬