Effortless Carousel Integration: A Quick Guide

Are you seeking to enhance your website by letting your admins or even users create dynamic carousels, but feeling overwhelmed by the coding process? Fear not! With just a few lines of code, you can seamlessly integrate a full-fledged carousel editor into your website. In this tutorial, I’ll guide you through the straightforward steps to achieve this using PostNitro Embed.

Importing the Library

The first step is to import the PostNitro Embed library into your HTML file. Simply add the following script tag to your HTML file:

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

Test It Here

Carousel Editor

Obtaining an API Key

To utilize PostNitro Embed, you’ll need to obtain an API key. Here’s how you can do it:

1. Log in to your PostNitro account.
2. Click on your profile icon in the top right corner and select “Embed”.
3. Navigate to the “Embed” section.
4. Add the domains where you’ll be using PostNitro Embed by clicking “Add Whitelist Domains”. This ensures that the editor will only function on the whitelisted domains with the generated API key.
5. Click “Generate API Key”.
6. Copy the generated API key.

Integrating the Editor

Now that you have your API key, it’s time to integrate the carousel editor into your site. Replace YOUR--API--KEY with your actual API key in the following code snippet:

Create an element with the

id="createCarouselBtn"

Then add the following JS script with the script opening and closing tags for the carousel integration:

const editor = window.postnitroEmbed.createEditor({
        apiKey: "YOUR--API--KEY",
    });

    const createCarouselBtn = document.getElementById("createCarouselBtn");

    createCarouselBtn.addEventListener("click", () => {
        editor.createDesign((data) => {
            console.log("New carousel created:", data);
            handlePdfDownload(data);
        });
    });

    // Function to handle PDF download
    function handlePdfDownload(data) {
        // Assuming data contains the PDF blob
        const pdfBlob = data.pdf;

        // Function to convert Blob to a URL
        function blobToUrl(blob) {
            return URL.createObjectURL(blob);
        }

        // Get the URL for the PDF blob data
        const pdfUrl = blobToUrl(pdfBlob);

        // Create a link to download the PDF
        const downloadLink = document.createElement('a');
        downloadLink.href = pdfUrl;
        downloadLink.download = data.name + ".pdf"; // Use carousel name as filename
        downloadLink.click();
    }

Final Words

And there you have it! By following these simple steps, you can effortlessly add a fully functional carousel editor to your website. Now you and your users can easily create and manage dynamic carousels without any hassle. So why wait? Give your website the visual appeal and extra function it deserves with this easy-to-implement carousel integration solution!