Agrega un Widget de Reservas a Cualquier Sitio Web HTML
Inserta el widget de reservas de SchedulingKit en cualquier pagina HTML con una unica etiqueta script. Funciona en sitios estaticos, sitios web personalizados, frameworks SPA y cualquier plataforma que soporte HTML - el metodo de instalacion universal.
Plan gratuito para siempre • Sin tarjeta de crédito
Un widget de reservas para HTML es un calendario integrable que permite a los visitantes programar citas directamente en tu sitio web de HTML sin salir de la página. SchedulingKit te permite insertar un widget de reservas gratuito en HTML en 2026. Ver todo Widget de reservas.
Cómo agregar un widget de reservas a HTML
Sigue estos pasos para integrar el widget de reservas de SchedulingKit en tu sitio HTML
Copy the Embed Code
Get the HTML snippet from your SchedulingKit dashboard. It includes a single <script> tag and a <div> container element.
Open Your HTML File
Open the HTML file for the page where you want the widget in your code editor — VS Code, Sublime Text, or any editor.
Paste the Div Element
Add the <div id='schedulingkit-widget'></div> element where you want the booking calendar to render in your page body.
Add the Script Tag
Paste the <script> tag just before the closing </body> tag. This loads the widget asynchronously after your page content.
Deploy and Verify
Deploy your updated HTML file to your hosting provider. Open the page in a browser and confirm the widget loads and functions correctly.
Código de integración listo para HTML
Copia y pega este fragmento en tu sitio HTML para agregar un widget de reservas al instante:
<!-- SchedulingKit Booking Widget --> <div id="schedulingkit-widget"></div> <script src="https://widget.schedulingkit.com/embed.js" data-url="https://app.schedulingkit.com/YOUR-BUSINESS" data-style="inline" data-primary-color="#4F46E5" async> </script>
Reemplaza YOUR-BUSINESS con la URL de tu página de reservas de SchedulingKit. Crea tu cuenta gratuita para obtener tu código de integración personalizado.
HTML Funciones del widget
Funciones específicas de la plataforma que hacen que el widget de reservas funcione perfectamente en HTML
Universal Compatibility
A plain HTML embed works on any web platform, hosting provider, or framework — it's the most flexible installation method.
Framework Agnostic
Works with React, Vue, Angular, Svelte, Astro, Next.js, and any JavaScript framework. Just render the div and load the script.
CDN-Delivered Script
The widget script is served from a global CDN with edge caching, ensuring fast load times from any location worldwide.
Event API
Listen to JavaScript events like booking-confirmed or slot-selected to trigger custom logic, analytics, or redirect flows in your application.
Mejores prácticas para widgets de reserva en HTML
Consejos para aprovechar al máximo tu widget de reservas integrado en HTML
Place the <script> tag before </body> (not in <head>) for the best page load performance
Add a CSS min-height on the widget container to prevent layout shifts while the script loads
Use the data attributes on the div element to configure the widget without touching JavaScript
For SPAs, initialize the widget after your router mounts the target DOM element
Add the async attribute to the script tag if your build tool doesn't already handle it
Preguntas sobre el widget de reservas de HTML
La insercion funciona en sitios HTML estaticos?
Si. El widget solo requiere un elemento <div> y una etiqueta <script>. No se necesita renderizado del lado del servidor, bases de datos ni herramientas de compilacion. Funciona en archivos HTML estaticos alojados en cualquier lugar - GitHub Pages, Netlify, Vercel, S3 o un servidor web tradicional.
Puedo usar el widget con React, Vue o Angular?
Absolutamente. Renderiza el div contenedor en la plantilla de tu componente y carga el script en un hook useEffect (React), ciclo de vida mounted (Vue) o ngAfterViewInit (Angular). El widget se adjunta al elemento DOM independientemente de como fue renderizado.
El widget soporta Content Security Policy (CSP)?
Si. Agrega el dominio CDN de SchedulingKit a tus directivas script-src y connect-src de CSP. La configuracion detallada de CSP esta disponible en la documentacion de SchedulingKit.
Puedo alojar el script del widget yo mismo?
Recomendamos usar el script alojado en CDN para actualizaciones automaticas y cache optimo. Sin embargo, el script puede descargarse y auto-alojarse si tu politica de seguridad lo requiere.
Añade un widget de reserva a HTML hoy
Únete a miles de empresas que integran widgets de reserva en HTML con SchedulingKit
Plan gratuito para siempre • Sin tarjeta de crédito