Lo que aprenderás
- Qué forma encaja con tu web y tu comunidad
- Instalar el botón y el widget en dos líneas
- Personalizar colores, texto, esquinas y qué ve el inversor al terminar
- Cómo detecta Krows tu integración
Antes de empezar
- Tu startup creada
- Para el botón o el widget: poder pegar código en tu web
Capítulo 1Elegir
- Tu página de inversión.
- Las formas que has elegido. «Añadir o quitar» cambia la lista. Puedes usar varias a la vez.
- Los pasos de la forma seleccionada, con el código listo para copiar.
- Prueba / Real y Personalizar.
| Forma | Ideal para | Código |
|---|---|---|
| Compartir un enlace | Redes, bio, WhatsApp, email, newsletter | No |
| Botón en tu web | Una llamada a invertir en tu landing | 2 líneas |
| Widget con progreso | Enseñar lo recaudado y crear urgencia | 2 líneas |
| Código QR | Eventos, carteles, packaging | No |
| Tienda o CMS | Shopify, WordPress/WooCommerce, Wix, Webflow, Squarespace | Pegar en un bloque |
| API para tu app | Tu propia app o un checkout a medida | Sí |
Capítulo 2Compartir un enlace
- Copia tu enlace de inversión
https://checkout.krows.app/tu-startup - Compártelo donde está tu comunidadBio de Instagram o TikTok, Linktree, LinkedIn, WhatsApp, newsletter.
- Ábrelo desde fuera de KrowsPor ejemplo desde tu móvil. Krows cuenta la primera visita y lo marca como detectado.
Capítulo 3Botón y widget
Dos líneas de código: el script y la etiqueta. Se dibujan dentro de un Shadow DOM, así que nunca chocan con los estilos de tu web, y no tienen dependencias.
<script src="https://checkout.krows.app/v1/krows.js" async></script>
<krows-button publishable-key="pk_live_…"></krows-button><script src="https://checkout.krows.app/v1/krows.js" async></script>
<krows-widget publishable-key="pk_live_…" size="medium"></krows-widget><script src="https://checkout.krows.app/v1/krows.js" async></script>
<krows-widget publishable-key="pk_live_…" size="floating" position="right"></krows-widget>| Atributo | Valores |
|---|---|
publishable-key | Tu clave publicable, pk_test_… o pk_live_…. Obligatorio. |
size (widget) | small, medium, large (con portada) o floating (burbuja en una esquina) |
position | right o left, solo con floating |
text | Texto del botón. Por defecto «Invertir en Tu startup» |
locale | es, en o auto |
theme | light, dark o auto |
En modo prueba llevan una etiqueta «PRUEBA». Mientras la ronda no está abierta, el botón dice «Próximamente». El pie del widget recuerda «Inversión protegida por Krows».
Capítulo 4Personalizar
Pulsa «Personalizar» en Integración. Lo que guardes se aplica al botón, al widget y a tu página de inversión a la vez:
- Color de marca y texto del botón.
- Relleno o contorno, y esquinas rectas, redondas o pastilla.
- Tema del widget y si muestra el progreso de la ronda.
- Página de inversión: fondo claro u oscuro y tipografía.
- Después de invertir: una página de agradecimiento con tu mensaje, o llevar al inversor a tu web (añadimos
?inversion=IDpara que la identifiques).
Si sabes CSS, puedes ir más allá desde tu propia hoja de estilos:
/* En tu propia hoja de estilos */
krows-button, krows-widget {
--krows-color: #0a7c55; /* color de marca */
--krows-button-text: #ffffff; /* texto del botón */
--krows-radius: 999px; /* esquinas */
--krows-font: "Inter", sans-serif;
}
krows-button::part(button) { text-transform: uppercase; letter-spacing: .04em; }
krows-widget::part(widget) { box-shadow: 0 20px 40px -20px rgba(0,0,0,.35); }Partes disponibles: button en el botón; widget, header, logo, name, tagline, bar, progress, stats, button, footer, cover, bubble y floating en el widget.
Capítulo 5Código QR
En «Código QR» diseñas un QR que lleva a tu enlace de inversión: color, fondo (o transparente), forma de los puntos y de las esquinas, tu logo en el centro y un marco con el texto «ESCANEA PARA INVERTIR». Elige el tamaño y pulsa «Descargar PNG». Ponlo en carteles, tarjetas, packaging o la pantalla de una presentación, y escanéalo antes de imprimir.
Capítulo 6Cómo sabe Krows que funciona
Cada forma tiene su paso «Comprobamos que funciona». Krows detecta la primera visita a tu enlace, la primera carga del botón o el widget en tu dominio, la plataforma de tu tienda o la primera llamada correcta a la API, y te dice en qué modo (prueba o real) y en qué dominio. Para lanzar la ronda hace falta una detección en modo real.
Gracias. Lo tendremos en cuenta para mejorar.