pikasso

Bananatag Email Designer umd and react module

Usage no npm install needed!

<script type="module">
  import pikasso from 'https://cdn.skypack.dev/pikasso';
</script>

README

pikasso

HTML5 drag and drop email builder built by Bananatag.

Please NOTE this plugin is not yet available for commercial use. Please contact Bananatag (https://bananatag.com/contact/) to see when the commercial licenses are available to purchase.

  • available as React Component and UMD build for browser

install:

$ npm install pikasso --save

Add to your project:

As a react component

import React, { Component } from 'react';
import Pikasso from 'pikasso';

export default class App extends Component {
    render() {
        return (
            <Pikasso
                authorization="Bearer TEST_AUTH"
                controls={['save']}
                handlers={{
                    onMount: () => console.log('Ready!'),
                    onNotification: msg => console.log({ msg }),
                    onError: error => console.log({ error }),
                    onSave: html =>  console.log({ html }),
                }}
                blocks={[]}
                containerStyle={{ top: 100 }}
            />
        );
    }
}

UMD Browser Installation

<html>
    <head>
        <script src="https://npmcdn.com/pikasso@3.0.28/build/umd.min.js">
        </script>
    </head>
    <body>
        <div id="pikassoContainer"></div>
        <script>
            window.onload = () => {
                const pikasso = new window.Pikasso({
                    containerID: 'pikassoContainer',
                    authorization: 'Bearer TEST_AUTH',
                    controls: ['save'],
                    handlers: {
                        onMount: () => console.log('Ready!'),
                        onNotification: msg => console.log({ msg }),
                        onError: error => console.log({ error }),
                        onSave: html => console.log({ html })
                    },
                    blocks: [],
                    containerStyle: { top: 100 }
                });

                pikasso.init();
                //pikasso.destroy(); to remove iframe element and clear up timers
            }
        </script>
    </body>
</html>