Simple Example

Here's an example of how to integrate the Postnitro Embed library into your web application:

<!DOCTYPE html>
<html>
  <head>
    <title>Postnitro Embed Example</title>
  </head>
  <body>
    <button id="createCarouselBtn">Create Carousel</button>
    <button id="editCarouselBtn">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",
      });
 
      const createCarouselBtn = document.getElementById("createCarouselBtn");
      const editCarouselBtn = document.getElementById("editCarouselBtn");
 
      createCarouselBtn.addEventListener("click", () => {
        editor.createDesign((data) => {
          console.log("New carousel created:", data);
          // Save or display the carousel data as needed
        });
      });
 
      editCarouselBtn.addEventListener("click", () => {
        const carouselId = "your-carousel-id";
        editor.editDesign(carouselId, (data) => {
          console.log("Carousel edited:", data);
          // Update the existing carousel with the new data
        });
      });
    </script>
  </body>
</html>

In this example, we're using the script import method and initializing the editor with an API key. We then attach click event listeners to two buttons: one for creating a new carousel and another for editing an existing carousel.

When the buttons are clicked, the respective createDesign or editDesign method is called, and the export data is logged to the console.

Feel free to customize this example to fit your specific use case and integrate it into your application.

Advanced Example (Next.js/React)

Here's an example of how to integrate the Postnitro Embed library into a Next.js/React application:

'use client'
 
import {createEditor, ExportData} from "@postnitro/embed";
 
export default function Example() {
    const editor = createEditor({
        apiKey: "your-api-key",
    });
 
    const handleCreateCarousel = () => {
        editor.createDesign((data: ExportData) => {
            console.log("New carousel created:", data);
            // Save or display the carousel data as needed
        });
    };
 
 
    const handleEditCarousel = () => {
        const carouselId = "your-carousel-id";
        editor.editDesign(carouselId, (data: ExportData) => {
            console.log("Carousel edited:", data);
            // Update the existing carousel with the new data
        });
    };
 
    return (
        <div>
            <button onClick={handleCreateCarousel}>Create Carousel</button>
            <button onClick={handleEditCarousel}>Edit Carousel</button>
        </div>
    );
}

In this example, we're using the ES module import method and initializing the editor with an API key. We then define two functions to handle creating and editing carousels, and attach them to button click event listeners.

When the buttons are clicked, the respective createDesign or editDesign method is called, and the export data is logged to the console.

Creating/Updating Carousels