Saltar al contenido principal

Usar Sheet Best desde Webflow

Sheet Best es una API REST estándar. Cualquier página de Webflow que admita código personalizado puede leer o escribir en una conexión de Sheet Best, mediante un pequeño fragmento de fetch o de forma declarativa con sheet-best-templates, nuestra biblioteca de atributos HTML.

Antes de empezar​

  • Una conexión de Sheet Best. Consulta la guía rápida.
  • Un sitio de Webflow donde puedas añadir código personalizado (en la configuración de la página o mediante código insertado en todo el sitio).
  • Una clave de API solo si tu conexión está protegida. Consulta autenticación con clave de API.
precaución

El código personalizado de Webflow se ejecuta en el navegador. Si envías una clave X-Api-Key al cliente, cualquiera puede leerla. Trata las claves del navegador como públicas y, para hojas sensibles, prioriza conexiones sin protección de solo lectura o un proxy en el servidor.

Opción 1 — sheet-best-templates (recomendada)​

sheet-best-templates permite vincular datos de Sheet Best a elementos mediante atributos HTML, sin JavaScript. Añade el script una vez y después los atributos a tus elementos de Webflow.

<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>

Consulta la galería de plantillas y el repositorio de GitHub para ver la referencia completa de atributos y ejemplos listos para usar.

Opción 2 — fetch en código personalizado​

Para tener control total, llama directamente a la API con fetch desde código personalizado de la página o de todo el sitio.

Leer filas (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>

Para filtrar, añade una columna y un valor a la URL, por ejemplo /Category/Books, o usa consultas con operadores como __gt. Consulta los comodines en filtrado.

Escribir filas (POST)​

Un patrón habitual es interceptar el envío de un formulario de Webflow y enviarlo por POST a Sheet Best, en lugar del controlador de formularios de Webflow o además de este.

<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>

El cuerpo puede ser un objeto o un array de objetos. Los nombres de los campos deben coincidir con las cabeceras de las columnas de la hoja.

Autenticarse​

Si tu conexión requiere una clave, añade una cabecera X-Api-Key a la llamada fetch:

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

Lee la advertencia anterior antes de exponer una clave en el navegador. Consulta autenticación con clave de API para conocer los detalles.

Próximos pasos​