Skip to main content

Integrating Mypixia Widget in HTML Pages

This document explains how to embed the Mypixia widget into your HTML pages. The widget can be integrated using a simple script tag, making it compatible with various backend technologies and UI frameworks.

Basic HTML Integration​

To embed the Mypixia widget, include the following code snippet in your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Designer</title>
    <script src="https://cdn.mypixia.com/index.umd.js"></script>
    <style>
        .container {
            margin-left: 150px;
            margin-right: 150px;
        }
        button {
            padding: 8px 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <button id="getDesignBtn">Get design</button>
        <br><br>
        <hr>
        <div id="mypixia-container"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize the Mypixia designer
            initMypixia();

            // Add event listener for the Get Design button
            document.getElementById('getDesignBtn').addEventListener('click', handleGetDesign);

            function initMypixia() {
                const container = document.getElementById('mypixia-container');

                if (typeof Mypixia !== 'undefined' && container) {
                    Mypixia.render(container, {
                        canvasId: "my-canva",
                        theme: {
                            primaryColor: "#000000",
                            primaryColorLight: "#cf7e52",
                            secondaryColor: "#cf7e52",
                            tertiaryColor: "#FFFFFF"
                        },
                        apiKey: 'YOUR_API_KEY',
                        apiEndpoint: 'GET_FROM_EMAIL+OR_ACCOUNT_SETTINGS',
                        isPlainColor: "Y",
                        product: {
                            name: "Premium Crew Neck T-Shirt",
                            category: "Tshirts",
                            description: "Men's crew neck t-shirts",
                            plainColor: "Y",
                            mainImage: "https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.png",
                            colorSettings: ["#FF0000", "#0000FF", "#008000", "#000000", "#FFFFFF", "#808080", "#FFFF00"],
                            sections: [
                                {
                                    sectionName: "Sleeve-left",
                                    sectionImage: "https://static.mypixia.com/prod/products/27b8c138-af4e-4ea0-833d-88b10fbd3cf7.png"
                                },
                                {
                                    sectionName: "Back",
                                    sectionImage: "https://static.mypixia.com/prod/products/d4c53776-7b7d-41c5-a6b5-2bf5876cd26e.png"
                                }
                            ]
                        },
                        enabledModules: ['STICKERS', 'SHAPES', 'ICONS', 'TXT', 'IMAGE', 'QRCODE', 'BARCODE'],
                        actionButtons: {
                            share: true, // Share Design
                            download: false // Download button
                        },
                        additionalActionButton: {
                            btnLabel: "Your Custom Action Button",
                            btnAction: () => {
                                console.log("handle you custom Button clicked");

                                // Example, grab the image that is being edited
                                const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
                                if (designObj) {
                                    designObj.getPNG().then(pngFiles => {
                                        console.log('PNG Data:', pngFiles);
                                    });
                                }
                            },
                            btnColor: '#008000' // Defaults to primary theme color
                        }
                    });
                } else {
                    console.error('Mypixia not loaded yet or container not found');
                }
            }

            function handleGetDesign() {
                // Default to DOM
                const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
                if (designObj) {
                    designObj.getPNG().then(pngFiles => {
                        console.log('PNG Data:', pngFiles);
                        // Handle File submission here
                    });

                    // Uncomment below to use other export formats as needed
                    // designObj.getJPEG().then(jpegFiles => {
                    //     console.log('JPEG Data:', jpegFiles);
                    //     // Handle JPEG data here
                    // });
                    //
                    // designObj.getWEBP().then(webpFiles => {
                    //     console.log('Webp Data:', webpFiles);
                    //     // Handle webp files here
                    // });
                    //
                    // designObj.getSVG().then(svgFiles => {
                    //     console.log('SVG Data:', svgFiles);
                    //     // Handle svg files here
                    // });
                } else {
                    console.error('Canvas instance not found or getDesignFormats method not available');
                }
            }
        });
    </script>
</body>
</html>

See complete list of properties and data type HERE

Explanation:

  • <div id="mypixia--widget-container>: This is the placeholder where the widget will be rendered. Ensure it has a defined width and height.
  • script src="https://cdn.mypixia.com/index.umd.js" This line includes the Mypixia widget script from the CDN.
  • Initialization script: The script block initializes the Mypixia.render(document.getElementById('mypixia-widget-container'), {...props...} with the necessary configuration, such as the container ID and product details.

Principle​

The basic principle remains the same:

  1. Retrieve the API key from an environment variable or a secure configuration.
  2. Inject the API key into the apiKey attribute of the Mypixia object when rendering the HTML.

Security Considerations​

  • Never hardcode your API key directly in your HTML or JavaScript code.
  • Use environment variables to store your API key and retrieve it at runtime.
  • For production environments, consider passing the API key from your server to the client.
  • Implement appropriate security measures to protect your API key from unauthorized access.

By following these guidelines, you can easily integrate the Mypixia widget into your HTML pages and leverage its powerful design capabilities.