feedbackfin
v1.0.3
Un pequeño widget para recopilar comentarios en cualquier lugar de su sitio web. Eso es todo.
Sitio web • Discordia • Twitter
Prueba el widget ↗
Cargue el widget en su página:
< script src =" https://unpkg.com/feedbackfin@^1 " defer > </ script >Configure una URL de Webhook (lea las instrucciones en la siguiente sección) y configúrelo en el script. Opcionalmente, agregue cualquier información de usuario que desee transmitir desde el sitio web:
< script >
window . feedbackfin = { config : { } , ... window . feedbackfin } ;
window . feedbackfin . config . url = "https://rowy-hooks.run.app/wh/..." ;
window . feedbackfin . config . user = { name : "..." , email : "..." } ;
</ script >Establezca un botón para abrir el widget:
< button data-feedbackfin-button > Feedback </ button > Esta es la URL para enviar los comentarios. El widget hará una solicitud de publicación a esta URL con los datos de retroalimentación como un cuerpo JSON.
Genere una URL de webhook fácilmente utilizando la plataforma de bajo código de Rowy y administre los datos de retroalimentación en una hoja de cálculo colaborativa-UI. Opcionalmente, puede automatizar aún más sobre los comentarios entrantes con el código de código incorporado de Rowy (por ejemplo: notificar en el equipo Slack/Discord, seguimiento por correo electrónico, etc.).
Instrucciones de video de extremo a extremo en el sitio web ↗
Las opciones se configuran en la window.feedbackfin.config Object:
urlLa URL para enviar los comentarios a. El widget hará una solicitud de publicación a esta URL con los datos como un cuerpo JSON. Consulte Configuración de una URL de webhook arriba.
user Un objeto cuyo contenido se presentará como parte del formulario. NOTA: feedbackType , message y timestamp se reservan campos y se sobrescribirán por los valores de formulario.
Típicamente:
window . feedbackfin . config . user = {
name : "..." ,
email : "..." ,
} ;disableErrorAlert Opcionalmente, deshabilite la visualización de alertas si no se establece URL o la solicitud falla. Predeterminado: disableErrorAlert: false
Cuando se carga el script, busca cualquier elemento con el atributo data-feedbackfin-button y abre el widget cuando se hace clic en cualquiera de esos elementos.
< button data-feedbackfin-button > Feedback </ button > El objeto window.feedbackfin expone los métodos de open , close y submit , por lo que también se les puede llamar directamente.
< button onclick =" window.feedbackfin.open(event) " > Feedback </ button > El widget usa event.target para calcular su posición utilizando UI flotante.
El widget se adjunta justo antes de la etiqueta de cierre </body> cuando está abierto y respeta font-family de su página. Los estilos se adjuntan justo antes de la etiqueta de apertura <head> para que sus personalizaciones tengan prioridad.
Puede personalizar la apariencia del widget por:
Anulación de las variables CSS.
Por ejemplo, puede cambiar el color del botón principal usando:
: root {
--feedbackfin-primary-color : # 007aff ;
--feedbackfin-primary-color-text : # fff ;
} Anular las reglas de CSS. Los nombres de clases tienen prefijo con feedbackfin__ .
El modo oscuro se activa cuando ya sea:
el usuario establece su tema del sistema en oscuro
es decir, @media (prefers-color-scheme: dark) es verdadero o
Cualquier elemento principal tiene un atributo data-theme cuyo valor contiene dark .
Ejemplo: <body data-theme="dark">
Los colores del modo oscuro se establecen utilizando variables CSS. Puedes anularlos con:
@media ( prefers-color-scheme : dark) {
: root {
...;
}
}
[ data-theme *= "dark" ] {
...;
}Este widget se construye utilizando elementos de forma HTML estándar con las etiquetas apropiadas.
El enfoque está atrapado dentro del widget cuando está abierto usando la trampa de enfoque. Tenga cuidado al anidar este widget dentro de otro elemento con una trampa de enfoque.
Contribuir a la aleta de retroalimentación con problemas y extraer solicitudes en el repositorio de GitHub.
