# 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.
```javascript
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
```html
Shuffll iFrame Example
Shuffll iFrame Example
```
2️⃣ Initialize the Shuffll iFrame
```javascript
const iframeContainer = document.getElementById('shuffll-iframe-container');
const iframe = new ShuffllIframe(iframeContainer);
iframe.init();
```
3️⃣ Customize the Shuffll iFrame
```javascript
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
```html
```
## Demo: Embedding Shuffll iFrame
See how easy it is to **integrate and use the Shuffll iFrame** in your platform:
## 💡 Need Help?
details
summary
strong
Click to Expand
p
📧
strong
Contact Us:
a
contact@shuffll.com
p
📖
strong
Read the API Docs:
a
Shuffll API
p
💬
strong
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? 🚀🎬