Widgets Embebibles

Integrá el calendario de reservas de MisTurnos en tu sitio web

Widget de Reservas

Un calendario interactivo que permite a tus clientes ver disponibilidad y reservar turnos directamente desde tu sitio web.

Características:

Vista de próximos 7 días
Horarios disponibles en tiempo real
Formulario de reserva simple
Responsive (mobile-friendly)
Totalmente personalizable con CSS

URL del Widget:

https://misturnos.ai/widgets/booking/[tu-slug]?apiKey=sk_live_YOUR_API_KEY

Embed con Iframe:

<iframe
  src="https://misturnos.ai/widgets/booking/tu-negocio?apiKey=sk_live_..."
  width="100%"
  height="800"
  frameborder="0"
  style="border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"
></iframe>

Personalización con CSS:

Podés agregar estilos custom al iframe para que se adapte a tu sitio:

<style>
  .booking-widget {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  }
</style>

<iframe
  src="https://misturnos.ai/widgets/booking/tu-negocio?apiKey=..."
  class="booking-widget"
  height="800"
  frameborder="0"
></iframe>

Seguridad: Las API keys del tipo sk_live_ son secretas. Para widgets públicos, recomendamos crear una key dedicada con permisos limitados (solo read:availability y write:bookings).

Ver Demo

Probá el widget en acción visitando:

/widgets/booking/demo?apiKey=demo

React Component

Si usás React/Next.js, podés integrar el widget directamente como componente:

import { BookingWidget } from '@misturnos/react'

function MyPage() {
  return (
    <BookingWidget
      businessSlug="tu-negocio"
      apiKey={process.env.NEXT_PUBLIC_MISTURNOS_KEY}
    />
  )
}

Próximamente: El paquete NPM @misturnos/react estará disponible en las próximas semanas.

Parámetros de URL

apiKey

Requerido

Tu API key con permisos de read:availability y write:bookings

theme

Opcional (próximamente)

Tema del widget: light, dark, auto

primaryColor

Opcional (próximamente)

Color principal en formato hex (#0066FF)

Soporte

¿Necesitás ayuda con la integración? Contactanos en developers@misturnos.ai