feedbackfin
v1.0.3
Um pequeno widget para coletar feedback em qualquer lugar do seu site. É isso.
Site • Discord • Twitter
Experimente o widget ↗
Carregue o widget na sua página:
< script src =" https://unpkg.com/feedbackfin@^1 " defer > </ script >Configure um URL da webhook (leia as instruções na próxima seção) e configure isso no script. Opcionalmente, adicione qualquer informação do usuário que você deseja passar do site:
< script >
window . feedbackfin = { config : { } , ... window . feedbackfin } ;
window . feedbackfin . config . url = "https://rowy-hooks.run.app/wh/..." ;
window . feedbackfin . config . user = { name : "..." , email : "..." } ;
</ script >Defina um botão para abrir o widget:
< button data-feedbackfin-button > Feedback </ button > Este é o URL para enviar o feedback. O widget fará uma solicitação de postagem para este URL com os dados de feedback como um órgão JSON.
Gere um URL de webhook facilmente usando a plataforma de baixo código de Rowy e gerencie dados de feedback em uma planilha colaborativa-UI. Opcionalmente, você pode automatizar ainda mais sobre o feedback recebido com o editor de código interno de Rowy (por exemplo: notificar no Slack/Discord, acompanhamento por e-mail etc).
Instruções de vídeo de ponta a ponta no site ↗
As opções são definidas na window.feedbackfin.config objeto:
urlO URL para enviar o feedback. O widget fará uma solicitação de postagem para este URL com os dados como um órgão JSON. Consulte a configuração de um URL da webhook acima.
user Um objeto cujo conteúdo será enviado como parte do formulário. NOTA: feedbackType , message e timestamp são campos reservados e serão substituídos pelos valores do formulário.
Tipicamente:
window . feedbackfin . config . user = {
name : "..." ,
email : "..." ,
} ;disableErrorAlert Opcionalmente, desativa os alertas de exibição se nenhum URL estiver definido ou a solicitação falhar. Padrão: disableErrorAlert: false
Quando o script é carregado, ele procura quaisquer elementos com o atributo data-feedbackfin-button e abre o widget quando algum desses elementos é clicado.
< button data-feedbackfin-button > Feedback </ button > O objeto window.feedbackfin expõe os métodos open , close e submit , para que eles também possam ser chamados diretamente.
< button onclick =" window.feedbackfin.open(event) " > Feedback </ button > O widget usa event.target para calcular sua posição usando a interface do usuário flutuante.
O widget está anexado pouco antes da tag </body> de fechamento quando está aberta e respeita font-family da sua página. Os estilos estão anexados imediatamente antes da tag <head> de abertura, para que suas personalizações tenham precedência.
Você pode personalizar a aparência do widget:
Substituindo as variáveis CSS.
Por exemplo, você pode alterar a cor do botão primário usando:
: root {
--feedbackfin-primary-color : # 007aff ;
--feedbackfin-primary-color-text : # fff ;
} Substituindo as regras do CSS. Os nomes da classe são prefixados com feedbackfin__ .
O modo escuro é ativado quando:
O usuário define o tema do sistema para escuro
ou seja, @media (prefers-color-scheme: dark) é verdadeiro, ou
Qualquer elemento pai possui um atributo data-theme cujo valor contém dark .
Exemplo: <body data-theme="dark">
As cores do modo escuro são definidas usando variáveis CSS. Você pode substituí -los com:
@media ( prefers-color-scheme : dark) {
: root {
...;
}
}
[ data-theme *= "dark" ] {
...;
}Este widget é criado usando elementos de formulário HTML padrão com os rótulos apropriados.
O foco está preso no widget quando está aberto usando foco. Tenha cuidado ao aninhar esse widget dentro de outro elemento com uma armadilha de foco.
Contribua para feedback Fin com problemas e puxe solicitações no repositório do GitHub.
