<script src="https://cdn.jsdelivr.net/npm/pizzly-js@v0.2.3/dist/index.umd.min.js"></script>
<main>
  <button onclick="createNewSpreadsheet()"><img width="18" height="18" src="https://cdn.glitch.com/34c68bfe-d0b3-427c-b5a7-0dc0980ab438%2Fgoogle-sheets.svg?v=1592381742810" />
    <span>Create a new spreadsheet</span></button>
</main>
html,
body {
  font-family: -apple-system, BlinkMacSystemFont, segoe ui, roboto, oxygen,
    ubuntu, cantarell, fira sans, droid sans, helvetica neue, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #5a4296;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  max-width: 650px;
  margin: 1rem auto;
}

button {
  font-weight: bold;
  font-size: 1.1rem;
  padding: 0.9rem 20px;
  cursor: pointer;
  border-radius: 3px;
  box-sizing: border-box;
  display: inline-block;
}

button {
  background: #eef9ef;
  border: 1px solid #43a047;
  color: #2e7d32;
  margin-right: 1rem;
}

button img {
  float: left;
  margin-right: 0.5rem;
}


// Initializing Pizzly JS with a demo instance
const demoKey = "pope8Qy8qfYyppnHRMgLMpQ8MuEUKDGeyhfGCj";
const demoInstance = "https://pushtogsheet.herokuapp.com/";
const pizzly = new Pizzly(demoKey, demoInstance);

let userAuthId;

// Connecting a user
function connect() {
  return pizzly
    .connect("google-sheets")
    .then((data) => {
      userAuthId = data.authId;
    })
    .catch((error) => console.error("It failed!", error));
}

// Create a spreadsheet
async function createNewSpreadsheet() {
  // Connect first
  await connect();
  // Then create new spreadsheet
  pizzly
    .integration("google-sheets")
    .auth(userAuthId)
    .post("/spreadsheets")
    .then((response) => response.json())
    .then((data) => {
    
      // Successfully created spreadshet!
      const url = data.spreadsheetUrl;
      if (url) {
        document.querySelector('main').innerHTML = 
          'Spreadsheet created! Check it out: <a target="_blank" href="' + url + '">' + url + '</a>';
      }
    });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.