appkit

Funil de ativação

Quantos usuários do seu sistema concluíram cada passo. Os números vêm dos eventos reais gravados pelo SDK.

Usuários alcançados
Passos publicados
Conclusão do 1º passo

Conclusão por passo

Cada barra é a porcentagem dos usuários alcançados que concluíram aquele passo.

Carregando…

Primeiros passos

A lista que aparece dentro do seu sistema, para o seu usuário. Edite à esquerda e veja o resultado na projeção à direita — é o próprio SDK desenhando, ao vivo.

"Primeira vez" é decidida no primeiro acesso do usuário ao seu sistema com o AppKit instalado (SDK 3.0.7+).

Começar do zero? (opcional)

Se preferir uma base pronta, informe o endereço do seu sistema e geramos uma sugestão inicial de passos para você revisar. Isto substitui os passos atuais — e só depois de você confirmar.

app.seusistema.com.brProjeção
Assim seu usuário vê — prévia ao vivo, desenhada pelo próprio SDK

Telas vazias

Incrível: toda tela sem nada — lista sem itens, busca sem resultado, painel recém-criado — vira um convite à primeira ação. E você precisa disso: sem deploy, ajuste aqui e pronto, aparece no seu sistema.

Não precisa mexer no seu código

Você aponta para um lugar que já existe na sua tela — uma classe ou id do seu próprio CSS — e o AppKit desenha por cima. Sem HTML novo, sem novo deploy: esse é justamente o valor de uma tela vazia inteligente.

O prompt pede ao seu Claude / Cursor / Copilot que encontre o seletor certo de cada tela vazia e te devolva pronto para colar aqui — você não precisa saber de CSS.

app.seusistema.com.brProjeção
Assim seu usuário vê — prévia ao vivo, desenhada pelo próprio SDK

Avisos

Uma faixa no topo do seu sistema para anunciar novidades, manutenção ou mudanças — e tirar do ar quando quiser, sem deploy. Cada aviso liga e desliga por conta própria.

app.seusistema.com.brProjeção
Assim seu usuário vê — prévia ao vivo, desenhada pelo próprio SDK

Instalação

Uma linha no HTML do seu sistema. Funciona em React, Vue, Angular, Rails, WordPress ou HTML puro.

Sua chave pública

Pode ficar visível no navegador — ela só permite ler a sua configuração e enviar eventos.

Cor da sua marca

Vale para todas as experiências dentro do seu sistema — checklist, telas vazias e avisos. As projeções refletem a cor na hora.

#1ED760

Instalar pelo npm (recomendado)

Para React, Vue, Next ou qualquer bundler: instale o pacote e inicialize com a sua chave — publicar continua 100% pelo painel, sem novo deploy.

npm i @tecaless/appkit-sdk
 

Cole antes de </body>

 

O prompt já vem com a sua chave e explica ao agente onde colar, como identificar o usuário logado e como testar — para o vibecoder não errar.

Sobre o data-user: use o identificador estável do usuário logado (o id do banco — não o nome, não o e-mail). É ele que liga o progresso do checklist àquele usuário; se o valor mudar, o progresso recomeça do zero.

Marcar um passo como concluído pelo código (opcional)

Se um passo depende de uma ação que não muda de página, chame o SDK no momento exato.

AppKit.track('fatura_emitida');
AppKit.complete('ID_DO_PASSO');

Testar agora

Abre um sistema de demonstração já com a sua chave, para você ver exatamente o que o seu usuário verá.

Abrir demonstração

Conta e segurança

Estado da sua conta e controles de emergência.

Desligar o AppKit em todos os usuários

Freio de emergência. O widget some do seu sistema em até 30 segundos, sem deploy. Seu sistema continua funcionando normalmente.

Versões publicadas

Publicar cria uma versão nova. Voltar atrás é só apontar para uma anterior.

Carregando…

Dados da conta