Welcome to PostNitro.ai Embed SDK

The PostNitro Embed SDK allows you to seamlessly integrate our carousel maker directly into your web application. Whether you’re building a content management system, marketing platform, or social media tool, our SDK provides a powerful, user-friendly interface for creating stunning carousel posts.

Why Use the PostNitro Embed SDK?

The PostNitro Embed SDK gives you complete control over the carousel creation experience within your application. Your users can create, edit, and export carousels without ever leaving your platform.

Perfect for Web Applications

Content Management Systems: Let users create carousels for their content
Marketing Platforms: Provide visual carousel creation tools
Social Media Tools: Allow users to design posts before publishing
Educational Platforms: Enable students to create educational content
E-commerce Platforms: Let merchants create product showcase carousels

Key Benefits

Seamless Integration: Embed the carousel maker directly into your website
Full Control: Customize the experience to match your brand
Real-time Preview: Users see their changes instantly
Multiple Export Formats: PNG, PDF, and MP4 support
Brand Integration: Apply your brand colors, fonts, and templates
User Management: Handle user authentication and data persistence

How It Works

1. SDK Integration Workflow

2. User Experience Flow

SDK Capabilities

Core Features

Create New Carousels: Start from scratch with templates
Edit Existing Carousels: Modify saved carousels
Real-time Preview: See changes as you make them
Multiple Export Formats: PNG, PDF, and MP4
Brand Integration: Apply your brand identity
Template Support: Use pre-designed templates

Customization Options

Default Headshot: Set default branding for new users
API Key Management: Secure authentication
Callback Handling: Custom data processing
Error Handling: Robust error management

Export Data Structure

interface ExportData {
    id: string;           // Unique identifier for the content
    name: string;         // User-defined content name
    size: string;         // Aspect ratio (e.g., "16:9", "1:1", "9:16")
    type: string;         // Export format: "pdf", "png", or "mp4"
    data: Blob | Blob[];  // File data - single Blob for PDF/MP4, Blob array for PNG
}

Getting Started

Create your account at PostNitro.ai
Set up your brand profile and templates
Get your API key from account settings

2. Install the SDK

Using Package Manager (Recommended)

# Using npm
npm install @postnitro/embed
 
# Using yarn
yarn add @postnitro/embed
 
# Using pnpm
pnpm add @postnitro/embed

Using CDN (Traditional)

<script src="https://cdn.jsdelivr.net/npm/@postnitro/embed/dist/index.umd.js"></script>

3. Initialize the SDK

Module Import (Modern Frameworks)

import { createEditor } from "@postnitro/embed";
 
const editor = createEditor({
    apiKey: "your-api-key",
    defaultHeadshot: {
        name: 'Your Brand',
        logo: 'https://your-brand.com/logo.png',
        handle: 'Your Brand Handle',
    }
});

Script Import (Traditional)

const editor = window.postnitroEmbed.createEditor({
    apiKey: "your-api-key",
    defaultHeadshot: {
        name: 'Your Brand',
        logo: 'https://your-brand.com/logo.png',
        handle: 'Your Brand Handle',
    }
});

4. Start Creating Carousels

Create a New Carousel

editor.createDesign((data: ExportData) => {
    console.log('Carousel created:', data);
    
    // Handle the exported data
    if (data.type === 'png') {
        // Handle PNG images (array of Blobs)
        data.data.forEach((blob, index) => {
            const url = URL.createObjectURL(blob);
            // Save or display the image
        });
    } else if (data.type === 'pdf') {
        // Handle PDF (single Blob)
        const url = URL.createObjectURL(data.data as Blob);
        // Save or display the PDF
    }
});

Edit an Existing Carousel

editor.editDesign('your-carousel-id', (data: ExportData) => {
    console.log('Carousel updated:', data);
    
    // Handle the updated data
    // Similar to createDesign handling
});

Integration Examples

React/Next.js Integration

'use client'
 
import { createEditor, ExportData } from "@postnitro/embed";
import { useState } from "react";
 
export default function CarouselCreator() {
    const [editor] = useState(() => createEditor({
        apiKey: process.env.NEXT_PUBLIC_POSTNITRO_API_KEY,
        defaultHeadshot: {
            name: 'My App',
            logo: '/logo.png',
            handle: 'Create amazing content',
        }
    }));
 
    const handleCreateCarousel = () => {
        editor.createDesign((data: ExportData) => {
            // Handle the carousel data
            console.log('New carousel:', data);
            
            // Save to your database
            saveCarouselToDatabase(data);
        });
    };
 
    const handleEditCarousel = (carouselId: string) => {
        editor.editDesign(carouselId, (data: ExportData) => {
            // Handle the updated carousel data
            console.log('Updated carousel:', data);
            
            // Update in your database
            updateCarouselInDatabase(carouselId, data);
        });
    };
 
    return (
        <div className="carousel-creator">
            <button onClick={handleCreateCarousel}>
                Create New Carousel
            </button>
            <button onClick={() => handleEditCarousel('existing-id')}>
                Edit Carousel
            </button>
        </div>
    );
}

Vanilla JavaScript Integration

<!DOCTYPE html>
<html>
<head>
    <title>Carousel Creator</title>
</head>
<body>
    <button id="createBtn">Create Carousel</button>
    <button id="editBtn">Edit Carousel</button>
 
    <script src="https://cdn.jsdelivr.net/npm/@postnitro/embed/dist/index.umd.js"></script>
    <script>
        const editor = window.postnitroEmbed.createEditor({
            apiKey: "your-api-key",
            defaultHeadshot: {
                name: 'My Website',
                logo: '/logo.png',
                handle: 'Create content',
            }
        });
 
        document.getElementById('createBtn').addEventListener('click', () => {
            editor.createDesign((data) => {
                console.log('Carousel created:', data);
                
                // Handle the data based on type
                if (data.type === 'png') {
                    // Handle multiple PNG images
                    data.data.forEach((blob, index) => {
                        const url = URL.createObjectURL(blob);
                        // Create download link or display image
                        const link = document.createElement('a');
                        link.href = url;
                        link.download = `${data.name}-slide-${index + 1}.png`;
                        link.click();
                    });
                }
            });
        });
 
        document.getElementById('editBtn').addEventListener('click', () => {
            editor.editDesign('your-carousel-id', (data) => {
                console.log('Carousel updated:', data);
                // Handle updated data
            });
        });
    </script>
</body>
</html>

Vue.js Integration

<template>
    <div class="carousel-creator">
        <button @click="createCarousel">Create Carousel</button>
        <button @click="editCarousel">Edit Carousel</button>
    </div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import { createEditor } from '@postnitro/embed';
 
const editor = ref(null);
 
onMounted(() => {
    editor.value = createEditor({
        apiKey: import.meta.env.VITE_POSTNITRO_API_KEY,
        defaultHeadshot: {
            name: 'Vue App',
            logo: '/logo.png',
            handle: 'Vue-powered content',
        }
    });
});
 
const createCarousel = () => {
    editor.value?.createDesign((data) => {
        console.log('Carousel created:', data);
        // Handle the data
    });
};
 
const editCarousel = () => {
    editor.value?.editDesign('your-carousel-id', (data) => {
        console.log('Carousel updated:', data);
        // Handle the data
    });
};
</script>

Best Practices

1. Error Handling

try {
    editor.createDesign((data) => {
        // Handle success
    });
} catch (error) {
    console.error('Failed to create carousel:', error);
    // Handle error appropriately
}

2. Data Management

Always validate the ExportData before processing
Handle different export types appropriately
Clean up object URLs to prevent memory leaks
Store carousel IDs for future editing

3. User Experience

Show loading states while the carousel maker is opening
Provide clear feedback when carousels are saved
Handle network errors gracefully
Offer multiple export format options

4. Security

Never expose your API key in client-side code
Use environment variables for sensitive data
Validate all user inputs
Implement proper authentication

Configuration Options

Editor Configuration

interface EditorConfig {
    apiKey: string;                    // Required: Your PostNitro API key
    defaultHeadshot?: {                // Optional: Default branding
        name: string;
        logo: string;
        handle: string;
    };
    // Additional configuration options may be available
}

Export Data Handling

// Handle PNG exports (multiple images)
if (data.type === 'png' && Array.isArray(data.data)) {
    data.data.forEach((blob, index) => {
        const url = URL.createObjectURL(blob);
        // Process each slide image
    });
}
 
// Handle PDF exports (single document)
if (data.type === 'pdf') {
    const url = URL.createObjectURL(data.data as Blob);
    // Process the PDF document
}
 
// Handle MP4 exports (video)
if (data.type === 'mp4') {
    const url = URL.createObjectURL(data.data as Blob);
    // Process the video file
}

Troubleshooting

Common Issues

SDK Not Loading

Check your internet connection
Verify the CDN URL is correct
Ensure the script is loaded before initialization

API Key Errors

Verify your API key is correct
Check if your account is active
Ensure you have sufficient credits

Export Issues

Check if the carousel data is valid
Verify the export format is supported
Handle large file sizes appropriately

Getting Help

Email Support: support@postnitro.ai
Live Chat: Available on postnitro.ai
Documentation: Check our detailed guides for specific issues

Ready to Get Started?

Sign up at PostNitro.ai
Get your API key from your account settings
Install the SDK using your preferred method
Initialize the editor in your application
Start creating amazing carousel content

Transform your web application with powerful carousel creation capabilities. Start integrating today! 🚀

Post Output Installation