Pular para o conteúdo principal

Usar o Sheet Best no Webflow

O Sheet Best é uma API REST padrão. Qualquer página do Webflow que aceite código personalizado pode ler ou gravar em uma conexão do Sheet Best, com um pequeno trecho de fetch ou de forma declarativa com sheet-best-templates, nossa biblioteca de atributos HTML.

Antes de começar​

  • Uma conexão do Sheet Best. Consulte o guia rápido.
  • Um site do Webflow em que você possa adicionar código personalizado (nas configurações da página ou em incorporações para todo o site).
  • Uma chave de API somente se a conexão estiver protegida. Consulte autenticação com chave de API.
cuidado

O código personalizado do Webflow é executado no navegador. Se você enviar uma chave X-Api-Key ao cliente, qualquer pessoa poderá lê-la. Trate as chaves no navegador como públicas e, para planilhas sensíveis, prefira conexões sem proteção e somente leitura ou um proxy no servidor.

Opção 1 — sheet-best-templates (recomendada)​

sheet-best-templates permite vincular dados do Sheet Best a elementos por atributos HTML, sem JavaScript. Adicione o script uma vez e depois os atributos aos elementos do 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>

Consulte a galeria de templates e o repositório no GitHub para ver a referência completa dos atributos e exemplos prontos.

Opção 2 — fetch em código personalizado​

Para ter controle total, chame a API diretamente com fetch em código personalizado da página ou de todo o site.

Ler linhas (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, adicione uma coluna e um valor à URL, por exemplo /Category/Books, ou use consultas com operadores como __gt. Veja os curingas em filtragem.

Gravar linhas (POST)​

Um padrão comum é interceptar o envio de um formulário do Webflow e enviá-lo por POST ao Sheet Best, no lugar do processador de formulários do Webflow ou além dele.

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

O corpo pode ser um objeto ou um array de objetos. Os nomes dos campos devem corresponder aos cabeçalhos das colunas da planilha.

Autenticar​

Se a conexão exigir uma chave, adicione um cabeçalho X-Api-Key à chamada fetch:

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

Leia o aviso acima antes de expor uma chave no navegador. Consulte autenticação com chave de API para conhecer os detalhes.

Próximos passos​