HTML Direto

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

Copie a Tag Nyxel

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

<script crossOrigin="anonymous" type="text/javascript" src="https://api.nyxel.tech/tag/SEU-ID-UNICO"></script>

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:

<!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.tech/tag/SEU-ID-UNICO"></script>
</head>
<body>
    <!-- O conteúdo do seu site -->
</body>
</html>

Verifique a Instalação

Salve o arquivo e publique o seu site.
Acesse o seu site.
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.

app/layout.tsx

import Script from 'next/script'

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

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.

Começando

Integrações

Usando IA

Passo a Passo

Dicas para Frameworks Modernos

Next.js (App Router)

​Passo a Passo

​Dicas para Frameworks Modernos

​Next.js (App Router)

Passo a Passo

Dicas para Frameworks Modernos

Next.js (App Router)