Pixo Template Editor

by pixoeditor

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Pixo Template Creator</title>
    <script src="https://pixoeditor.com/editor/scripts/bridge.m.js"></script>
    <meta charset="UTF-8" />
  </head>

  <body>
    <button id="open_template_editor">
      Click to open Pixo Template Editor
    </button>
  </body>
</html>

CSS

body { 
  height: 450px;
  max-height: 100vh;
}

JavaScript

window.open_template_editor.onclick = () => {
  new window.Pixo.Bridge({
    apikey: "26uqyj79pdgk",
    type: "modal",
    onSave: (data) => {
      // we will use the localStorage to store
      // the template, however you should save the
      // JSON somewhere to your back-end
      localStorage.setItem(
        "template",
        JSON.stringify({ template: data.toJSON() })
      );
      document.body.appendChild(
        document.createTextNode("Template saved to localStorage")
      );
    }
  }).edit("https://via.placeholder.com/640x480.jpg");
};