@postnitro/embed

v1.0.7

Published

6 months ago

Add a full-fledged integrated postnitro editor to your website.

Downloads

112

0High
0Medium
0Low

postnitro

postnitro embed typescript

Postnitro Embed

Add a full-fledged integrated Postnitro carousel maker to your website with ease.

Postnitro Embed is a small javascript library that allows you to seamlessly integrate a carousel maker into your web application. With its user-friendly API, you can enable your users to create and edit carousels directly from your website.

Installation

To install the Postnitro Embed package, run the following command:

pnpm add @postnitro/embed

Usage

Importing the Library

You can import the library in two ways:

As a Module (Recommended for React, Next.js, and other modern frameworks)

import {createEditor} from "@postnitro/embed";

As a Script (Traditional Way)

Add the following script tag to your HTML file:

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

Obtaining an API Key

Before you can use the Postnitro Embed, you'll need to obtain an API key.

Follow these steps:

Log in to your Postnitro account.
Click on profile icon in the top right corner and select "Embed".
Navigate to the "Embed" section.
Add the domains where you'll be using the Postnitro Embed by clicking "Add Whitelist Domains". This ensures that the editor will only work on the whitelisted domains with the generated API key.
Click "Generate API Key".
Copy the generated API key.

Initialization

Before using the Postnitro Embed functionality, you need to initialize the editor instance.

Module Initialization

const editor = createEditor({
    apiKey: "your-api-key",
});

Script Initialization

When using the script, the editor is available as a global variable:

const editor = window.postnitroEmbed.createEditor({
    apiKey: "your-api-key",
});

Replace your-api-key with your actual API key provided by Postnitro.

Create a new carousel

To create a new carousel, call the createDesign method and provide a callback function to handle the export data:

editor?.createDesign((data: ExportData) => {
    console.log(data);
    // You can perform additional operations with the data, such as saving or displaying the carousel
});

Edit an existing carousel

To edit an existing carousel, call the editDesign method and provide the carousel ID and a callback function to handle the export data:

editor?.editDesign('your-carousel-id', (data: ExportData) => {
    console.log(data);
    // You can perform additional operations with the data, such as updating the existing carousel
});

Replace 'your-carousel-id' with the actual ID of the carousel you want to edit.

Understanding the ExportData type

The callback function receives an ExportData object, which contains the following properties:

interface ExportData {
    id: string; // Unique identifier for the carousel
    name: string; // Name of the carousel
    size: string; // Size of the carousel in aspect ratio (e.g., "16:9")
    pdf: Blob; // PDF file of the carousel
    images: Blob[]; // Array of image files for the carousel
}

You can use the provided data to save, display, or perform any other operations with the carousel.

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.