Tener un link de reservas (tu-negocio.app.turnopik.com) y compartirlo por Instagram o WhatsApp ya convierte. Pero si tenés una página web propia, hay un paso más que baja la fricción todavía más: mostrar la agenda de reservas dentro de tu propio sitio, sin mandar al cliente a otra pantalla.
Esto se llama embeber (o insertar) el widget de reservas. En esta guía se explica qué es, los tres modos que ofrece TurnoPik, cómo pegar el código en tu web y cuándo conviene cada uno.
Por qué embeber en vez de solo linkear
Cada salto de página cuesta clientes. Cuando alguien está en tu web mirando servicios y precios, mandarlo a otro dominio para reservar agrega un paso donde una parte se cae. Embeber el flujo resuelve tres cosas:
- Continuidad: el cliente reserva en el mismo lugar donde te estaba conociendo.
- Confianza: la reserva ocurre “dentro de tu marca”, no en una pantalla que parece de otro sistema.
- Conversión: menos toques y menos redirecciones = más reservas terminadas.
La reserva sigue procesándose en TurnoPik (agenda, seña, recordatorios por WhatsApp), pero el cliente nunca lo percibe como un sitio aparte.
Los tres modos de inserción
Desde tu panel, en Compartir → Insertar en tu web, elegís uno de tres modos. Cada uno genera un fragmento de código listo para copiar.
1. En línea (inline)
El flujo de reservas completo aparece incrustado en la página, como una sección más. Ideal para una página dedicada tipo “Reservá tu turno” o para la home de un negocio de un solo servicio.
<div data-turnopik-booking="tu-negocio"></div>
<script async src="https://app.turnopik.com/embed/v1.js"></script>Reemplazás tu-negocio por el slug de tu cuenta (el mismo que aparece en tu link público) y listo.
2. Botón flotante
Un botón “Reservar turno” queda fijo en la esquina de tu sitio en todas las páginas. Al tocarlo, se abre la agenda sobre el contenido. Sirve cuando querés que la opción de reservar esté siempre a mano sin ocupar espacio.
<script async src="https://app.turnopik.com/embed/v1.js"></script>
<script>
window.addEventListener("load", function () {
Turnopik.button({ slug: "tu-negocio", text: "Reservar turno" });
});
</script>Podés cambiar el texto del botón (text) por el que prefieras: “Sacá tu turno”, “Agendá tu consulta”, etc.
3. Popup
Vos ponés tu propio botón (o link) donde quieras, y al hacer clic se abre la agenda en una ventana sobre tu sitio. Es el más flexible: lo enganchás a cualquier elemento existente de tu web.
<script async src="https://app.turnopik.com/embed/v1.js"></script>
<button type="button" onclick="Turnopik.popup({ slug: 'tu-negocio' })">Reservar turno</button>Cómo pegarlo según tu plataforma
El fragmento es el mismo; solo cambia dónde lo pegás.
WordPress
Editá la página o entrada, agregá un bloque «HTML personalizado» y pegá el código. Si usás un page builder (Elementor, Divi), buscá el widget “HTML” o “Código”.
Wix / Squarespace
Insertá un bloque «Embed» o «Código embebido» en la sección donde querés la agenda y pegá el fragmento.
Sitio propio (HTML a mano)
Pegá el fragmento donde quieras que aparezca la agenda (modo en línea) o antes de cerrar </body> (botón flotante y popup).
Si tu sitio tiene Content-Security-Policy
Algunos sitios avanzados definen una CSP que bloquea contenido externo. En ese caso, permití el dominio de TurnoPik agregando frame-src *.app.turnopik.com a tu política. La mayoría de los sitios de pymes no tienen CSP y no necesitan tocar nada.
Qué modo elegir
| Situación | Modo recomendado |
|---|---|
| Página dedicada “Reservá tu turno” | En línea |
| Negocio de un solo servicio (home = reserva) | En línea |
| Web con varias páginas, reserva siempre visible | Botón flotante |
| Enganchar a un botón o CTA que ya tenés | Popup |
Si dudás, arrancá con en línea en una página dedicada: es el que más convierte porque el cliente ve la disponibilidad real apenas entra.
Lo que el cliente puede hacer desde el widget
El widget embebido no es una versión recortada: muestra el mismo flujo que tu link público. El cliente puede:
- Elegir servicio y profesional.
- Ver los horarios disponibles reales.
- Pagar la seña online (si la tenés activada).
- Comprar un paquete de sesiones o bono si lo ofrecés.
- Recibir la confirmación y los recordatorios por WhatsApp automáticamente.
Errores comunes a evitar
- No cambiar el slug: si dejás
tu-negociosin reemplazar por tu slug real, el widget no carga tu agenda. Copialo tal cual desde el panel para no equivocarte. - Pegar el código en modo “texto visible” en vez de HTML: en editores tipo WordPress, asegurate de usar el bloque de HTML, no un párrafo normal (sino se ve el código como texto).
- Duplicar el
<script>: si insertás varios modos en la misma página, alcanza con incluir elembed/v1.jsuna sola vez.
En resumen
Embeber tu agenda en la web es un paso de 5 minutos que baja la fricción de reservar:
- Panel → Compartir → Insertar en tu web.
- Elegí modo: en línea, botón flotante o popup.
- Copiá el fragmento y pegalo en un bloque de HTML/Embed de tu sitio.
- Reemplazá el slug si hace falta y guardá.
Tus clientes reservan sin salir de tu página, y vos seguís gestionando todo desde TurnoPik.
¿Todavía no tenés tu agenda online? Podés crear la cuenta gratis y tener el widget listo para pegar en tu web el mismo día.