Adicionando nosso script

Existem duas maneiras de adicionar o cside ao seu site. Escolha o método que se adapta à sua configuração:

Método	Melhor para
Ferramenta CLI	Sites estáticos (SSG), integração sem código
Script manual	Aplicações SSR, configurações personalizadas

Opção 1: Ferramenta CLI (recomendada para sites estáticos)

Nenhum script manual necessário

O CLI injeta automaticamente o script do cside e prefixa todos os seus scripts de terceiros. Se você usar o CLI, pule para a ativação do domínio. Não é necessário adicionar uma tag de script manualmente.

O CLI funciona com qualquer framework que gere arquivos HTML estáticos, incluindo:

Astro (modo estático)
Next.js (exportação estática)
Gatsby
Nuxt (modo estático)
SvelteKit (adaptador estático)
Eleventy (11ty)
Hugo
VitePress / VuePress
Docusaurus

Qualquer outro framework que gere arquivos HTML estáticos também funcionará. O CLI detecta automaticamente as pastas de saída .next e dist, ou você pode especificar um diretório personalizado com --dir.

Instalar o CLI

npm install @cside.dev/cli

Ou execute diretamente sem instalar:

npx @cside.dev/cli@latest example.com

Adicionar ao seu processo de build

Adicione o CLI ao seu script de build no package.json:

{
  "scripts": {
    "build": "your-build-command && npx @cside.dev/cli@latest example.com"
  }
}

Substitua example.com

Substitua example.com pelo seu domínio real configurado no cside.

O que o CLI faz

Quando você executa o CLI, ele automaticamente:

Injeta o script do cside em todos os arquivos HTML
Prefixa URLs de scripts de terceiros com a infraestrutura de borda do cside
Adiciona referrerpolicy="origin" às tags de script para verificação de licença

Opções comuns

# Processar um diretório específico
npx @cside.dev/cli example.com --dir ./out

# Excluir scripts específicos do prefixamento
npx @cside.dev/cli example.com --excluded-scripts "https://example.com/skip.js"

Consulte o guia de Integração CLI para todas as opções.

Opção 2: Instalação manual do script

Use este método para aplicações SSR ou se você precisar de mais controle sobre a integração.

O script manual é executado no motor JavaScript do navegador, tornando-o compatível com qualquer framework ou plataforma, independentemente da sua stack tecnológica.

Você pode facilmente adicionar nossa tag de script ao <head> do documento. Certifique-se de que a tag <script> seja o primeiro elemento de script adicionado à página.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://proxy.csidetm.com/script.js" referrerpolicy="origin"></script>
    ...
  </head>
  <body>
  ...
  </body>
</html>

Se você está usando Next.js, pode utilizar nosso pacote npm @cside.dev/next. Basta instalá-lo assim:

Instale nosso Script

# Com NPM
npm install @cside.dev/next

# Com Yarn
yarn add @cside.dev/next

# Com PNPM
pnpm add @cside.dev/next

Adicione nosso Script

Após a instalação, basta adicionar o seguinte ao seu arquivo _document no seu projeto NextJS.

// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CSideScript } from '@cside.dev/next';

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <CSideScript /> {/* <- Aqui */}
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

ou se você está usando o App Router:

// layout.tsx
import { CSideScript } from '@cside.dev/next';

export default function Layout({ children }) {
  return (
    <>
      <CSideScript /> {/* <- Aqui */}
      {children}
    </>
  );
}

Vá ao Webflow

Primeiro, vá ao Painel do Webflow e navegue até o menu de 3 pontos e selecione “Settings”. Em seguida, navegue até “Custom code”.

Adicione o Script do cside

Após navegar até a seção “Custom code”, basta adicionar o seguinte ao topo da sua seção “Head Code”.

<!-- cside script -->
<script src="https://proxy.csidetm.com/script.js" referrerpolicy="origin"></script>
<!-- the rest of your head code/scripts -->

Salve, Publique e Pronto!

Basta clicar em “Save” e pronto! Agora você pode ver o tráfego de scripts do seu site sendo roteado pelo Gatekeeper e monitorado em tempo real no nosso painel.

Próximos passos

Depois de adicionar o cside ao seu site (via CLI ou script manual), você verá o tráfego de scripts em tempo real no painel.

Ative seu domínio: Abra o painel, vá até Domains na barra lateral esquerda e clique no botão de ativação ao lado do seu domínio.