O botão oficial "Entrar com Plicflix"

O botão pronto para o login com o plicflix no seu site ou app. Basta colar uma tag: ele já vem com o visual oficial e faz o login sozinho (OAuth 2.0 + PKCE, veja OAUTH). O botão é igual em todo jogo, e é por isso que o jogador o reconhece e confia.

Para ver todas as variações ao vivo e copiar o código já preenchido com o seu jogo, use a página Botão oficial deste portal.

Para IAs: siga a seção 1. Se o jogo tem servidor, use href (seção 2.1). Se não tem, use cliente e volta (seção 2.2). A seção 4 dá cada atributo. Não redesenhe o botão. Para um visual próprio, use estilo="proprio" (seção 5).

1. Em dois passos

<!-- 1. o SDK — copie o arquivo para o seu site SEM mudar (https://developers.plicflix.com/sdk/plicflix.js),
        ou carregue da CDN: https://sdk.plicflix.com/plicflix.js -->
<script src="/plicflix.js" defer></script>

<!-- 2. o botão, onde ele deve aparecer -->
<plicflix-entrar href="/api/plicflix/oauth"></plicflix-entrar>

O SDK define o elemento <plicflix-entrar> (o plicflix.js 2.5 ou mais novo). Como é um elemento HTML comum, funciona em qualquer site: HTML puro, React, Vue, Svelte, Angular ou o que o seu motor gerar.

2. Os dois jeitos de fazer o login

2.1 Com servidor (recomendado): href

<plicflix-entrar href="/api/plicflix/oauth"></plicflix-entrar>

O botão vira um link para a sua rota. Ela gera o PKCE e manda o jogador para o plicflix. Na volta, o seu servidor troca o código com a chave pk_ e abre a sessão. As duas rotas prontas, em Node e Go, estão em OAUTH, seção 4.

2.2 Sem servidor: cliente e volta

<plicflix-entrar cliente="seu-slug" volta="https://seujogo.com/"></plicflix-entrar>

<!-- na página de volta -->
<script type="module">
  const r = await Plicflix.voltouDoPlicflix();   // { jogador: { id: "pf_…", nome }, jogo, assinante }
  if (r) iniciarJogo(r.jogador);
</script>

• No clique: o próprio botão gera o PKCE e vai ao plicflix.
• volta: precisa estar cadastrado (developers → o jogo → Integração).
• Limite: o resultado de um cliente público serve para mostrar o nome e guardar o progresso local, nunca para proteger moedas, ranking ou compras (OAUTH, seção 5).

3. Os estilos

<plicflix-entrar href="/api/plicflix/oauth"></plicflix-entrar>
<plicflix-entrar href="/api/plicflix/oauth" estilo="solido"></plicflix-entrar>
<plicflix-entrar href="/api/plicflix/oauth" estilo="simples"></plicflix-entrar>

4. Os atributos

Pelo JavaScript, o mesmo elemento sai com Plicflix.botaoEntrar("#onde", { href, estilo, tema, tamanho, forma, largura, texto, idioma, cliente, volta }), que devolve o elemento.

O evento do clique (sem href): antes de sair para o plicflix, o elemento dispara plicflix-entrar, que pode ser cancelado. Com preventDefault(), o seu código cuida do clique, por exemplo para salvar algo antes.

5. O seu próprio botão

<plicflix-entrar href="/api/plicflix/oauth" estilo="proprio" rotulo="Entrar com Plicflix">
  <span class="meu-botao">
    <img src="https://sdk.plicflix.com/marca/plicflix-icone.webp" alt="" width="22" height="22">
    Jogar com a minha conta Plicflix
  </span>
</plicflix-entrar>

O que estiver dentro do elemento aparece do jeito que você estilizou, com o CSS do seu site. O elemento só faz o login, e o botão continua acessível pelo teclado e por leitores de tela.

Ajuste fino dos estilos oficiais: o elemento expõe as partes botao, texto, logo e icone para o seu CSS:

plicflix-entrar::part(botao) { border-radius: 0; }      /* cantos retos */
plicflix-entrar::part(texto) { letter-spacing: .08em; }

Os arquivos da marca, para o seu botão:

6. As regras da marca

• Use o botão pronto sempre que der. Ajuste só o que as opções oferecem.
• No seu próprio botão:
  • o nome é sempre "Plicflix";
  • o logo e o ícone vão sem mudanças: sem esticar, recolorir ou cortar;
  • o texto diz claramente que o login é com o plicflix.
• Dê espaço: deixe pelo menos 12 px livres em volta. No login, ponha o botão junto das outras formas de entrar, com um "ou" no meio.
• Só para o plicflix: o botão leva sempre ao login do plicflix. Não use para outra ação.
• Tema certo: em fundo escuro, destaque ou solido. Em fundo claro, simples ou destaque com tema="claro".

7. Detalhes técnicos

• Estilo isolado (shadow DOM): o CSS do seu site não quebra o botão, e o do botão não vaza no site.
• CSP:
  • o estilo entra por adoptedStyleSheets, que não precisa de style-src 'unsafe-inline';
  • o logo vem de https://sdk.plicflix.com. Libere essa origem no img-src, ou use marca com uma cópia sua. Se o logo não carregar, o nome aparece escrito no lugar;
  • o script é o seu /plicflix.js (script-src 'self') ou a CDN.
• Acessibilidade:
  • é um <button> (ou um <a>, com href) de verdade, com aria-label na língua;
  • tem o foco visível;
  • respeita "reduzir movimento" (sem o reflexo).
• Peso: o elemento está dentro do plicflix.js, sem nenhum arquivo a mais. Só o logo é baixado, uns 35 KB.

Exemplo completo com todos os estilos: sdk/exemplos/botao/index.html (no pacote do SDK).