> ## Documentation Index
> Fetch the complete documentation index at: https://nyxel.cloud/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# HTML Direto

> Como instalar o Nyxel colando a tag no seu código fonte

A forma universal de instalar o Nyxel é adicionando o script no código HTML do seu site. O Nyxel gerencia dinamicamente quais vídeos mostrar baseado na página atual através dessa única Tag. Isso funciona para qualquer site feito do zero ou em frameworks como React, Next.js, Vue, etc.

## Passo a Passo

**1. Copie a Tag Nyxel**

Você receberá a sua Tag exclusiva com o seu ID:

```html theme={null}
<script crossOrigin="anonymous" type="text/javascript" src="https://api.nyxel.cloud/tag/SEU-ID-UNICO"></script>
```

**2. Adicione o código na tag \<head>**

Cole o código copiado dentro da seção `<head>` do arquivo HTML principal do seu site (normalmente `index.html` ou em layouts globais).

**Exemplo:**

```html {6} theme={null}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Meu Site Incrível</title>
    <script crossOrigin="anonymous" type="text/javascript" src="https://api.nyxel.cloud/tag/SEU-ID-UNICO"></script>
</head>
<body>
    <!-- O conteúdo do seu site -->
</body>
</html>
```

**3. Verifique a Instalação**

1. Salve o arquivo e publique o seu site.
2. Acesse o seu site.
3. O vídeo do Nyxel atribuído àquela rota aparecerá flutuando na tela, carregando de forma otimizada.

## Dicas para Frameworks Modernos

### Next.js (App Router)

No Next.js (versão 13 ou superior), você deve adicionar a tag no arquivo de layout principal, como o `app/layout.tsx` (ou `.jsx`). Recomendamos usar o componente `<Script>` nativo.

```tsx app/layout.tsx theme={null}
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="pt-BR">
      <head>
        <Script 
          src="https://api.nyxel.cloud/tag/SEU-ID-UNICO" 
          strategy="lazyOnload" 
          crossOrigin="anonymous"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}
```

> [!NOTE]
>
> Usando qualquer framework moderno, basta instalar a Tag no Layout base. Nossa tecnologia descobrirá em qual página o usuário está navegando e providenciará o vídeo correto de forma automática.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.