Skip to main content

Call Sheet Best from Webflow

Sheet Best is a standard REST API. Any Webflow page that allows custom code can read or write to a Sheet Best connection — either with a small fetch snippet, or declaratively with sheet-best-templates, our HTML-attribute library.

Before you start​

  • A Sheet Best connection. See the quickstart.
  • A Webflow site where you can add custom code (in page settings or site-wide embeds).
  • An API key only if your connection is protected. See API key authentication.
caution

Anything you put in Webflow custom code runs in the browser. If you ship an X-Api-Key to the client, anyone can read it. Treat browser-side keys as public, and prefer unprotected read-only connections (or a server-side proxy) for sensitive sheets.

Option 1 — sheet-best-templates (recommended)​

sheet-best-templates lets you bind Sheet Best data to elements using HTML attributes, with no JavaScript. Add the script once, then mark up your Webflow elements.

<script src="https://cdn.sheet.best/sheet-best-templates.min.js"></script>

<div data-sb-url="https://api.sheetbest.com/sheets/<id>">
  <div data-sb-template>
    <h3 data-sb-bind="Name"></h3>
    <p data-sb-bind="Email"></p>
  </div>
</div>

See the templates gallery and the GitHub repo for the full attribute reference and ready-made examples.

Option 2 — fetch in custom code​

For full control, call the API directly with fetch from a page-level or site-wide custom code embed.

Reading rows (GET)​

<script>
  fetch('https://api.sheetbest.com/sheets/<id>')
    .then(r => r.json())
    .then(rows => {
      // rows is an array of objects keyed by your column headers
      console.log(rows);
    });
</script>

To filter, append a column/value to the URL — for example /Category/Books — or use querying for operators like __gt. See filtering for wildcards.

Writing rows (POST)​

A common pattern is to intercept a Webflow form submission and POST it to Sheet Best instead of (or in addition to) Webflow's own form handler.

<script>
  document.querySelector('#my-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(e.target));
    await fetch('https://api.sheetbest.com/sheets/<id>', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
  });
</script>

The body can be a single object or an array of objects. Field names must match your sheet's column headers.

Authenticating​

If your connection requires a key, add an X-Api-Key header to your fetch call:

fetch('https://api.sheetbest.com/sheets/<id>', {
  headers: { 'X-Api-Key': '<your-key>' },
});

Read the warning above before exposing a key in browser code. See API key authentication for the full picture.

Next steps​