1️⃣ Abre la página en Elementor

  • Ve a Páginas → Editar con Elementor

  • Decide dónde quieres que aparezca el formulario (sección o columna)

2️⃣ Añade un widget HTML

En el panel izquierdo de Elementor:

  • Busca “HTML”

  • Arrástralo a la página

3️⃣ Pega ESTE código (ejemplo real)

Dentro del bloque HTML pega solo esto 👇
(ajusta business_id y atributos según el cliente)

 

<div
id="vw-reservas"
data-business="1"
data-fullwidth="1"
data-compact="1"
></div>

<script src=«https://vadewebs.online/reservas/widget/embed.js?v=9»></script>
<link rel=«stylesheet» href=«https://vadewebs.online/reservas/widget/widget.css?v=9»>

Qué hace cada cosa

  • data-business="1" → ID del negocio

  • data-fullwidth="1" → ocupa todo el ancho del bloque

  • data-compact="1" → versión compacta (ideal para Elementor)

  • embed.js → lógica del widget

  • widget.css → estilos + tema del negocio

💡 El orden importa:

  1. <div>

  2. <script>

  3. <link>

4️⃣ Ajustes IMPORTANTES en Elementor (muy recomendable)

🔹 Ancho de columna

  • Selecciona la columna

  • Layout → Ancho → 100%

  • Padding: 0 (arriba, abajo, izquierda, derecha)

🔹 Evita conflictos de estilos

  • No pongas fondo ni bordes en la columna

  • Deja que el widget controle su diseño

5️⃣ Guardar y probar

  • Guarda la página

  • Visualiza en frontend

  • La reserva debe funcionar completa (servicio → trabajador → día → hora → datos)

✅ Variantes útiles según el caso

👉 Sidebar / columna estrecha

Usa solo:

 
<div id="vw-reservas" data-business="1" data-compact="1"></div>

👉 Página completa (landing de reservas)

Usa:

 
<div id="vw-reservas" data-business="1" data-fullwidth="1"></div>

👉 Multi-negocio (misma página, varios widgets)

⚠️ No recomendado por ahora, pero técnicamente posible duplicando el id y cargando una vez el script (lo vemos más adelante si lo necesitas).

❌ Lo que NO debes hacer

  • ❌ No usar “Shortcode”

  • ❌ No usar “Código personalizado” de Elementor

  • ❌ No meter el script en el <head> del tema

  • ❌ No copiar el widget.html entero dentro de Elementor

✅ Flujo ideal para clientes (tu método)

  1. Creas negocio → obtienes business_id

  2. Ajustas tema en el editor

  3. Copias 2 líneas al Elementor del cliente

  4. Listo en 2 minutos

👉 Esto es oro para servicio mensual.

PER ACTUALITZAR

/public_html/reservas/widget/
loader.js (ESTABLE, el cliente carga esto)
dist/
embed.1.0.0.js
widget.1.0.0.css
(futuro) embed.1.0.1.js
(futuro) widget.1.0.1.css

/public_html/reservas/widget/loader.js

// Solo cambias esto cuando publiques una nueva versión
var VERSION = «1.0.0»;

S’HAN DE MODIFICAR LES VERSIONS ALS NOMS DE embed.1.0.0.js
widget.1.0.0.css I DINS DE L’ARXIU loader.js AGAFI LES VERSIONS NOVES, AIXI NO CAL FER RES A LES WEBS DELS CLIENTS.

PER DONAR D’ALTA UN NEGOCI I PUGUI ANULAR CITES DESDE GOOGLECALENDAR, POSAR LA URL amb l’usuari de google del negoci :

https://vadewebs.online/reservas/api/admin_google_auth_start.php?key=Toni0739&business_id=ID NEGOCIO

Aixo creara el token a la base de dades «vw_google_oauth» S’ha de comprobar. Repetir el proces si caduca el token. Esta configurat per que no pasi, pero es posible, depent de google. Si al repetir el proces el token no s’actualitza correctament, revisar amb GPT el arxius «admin_google_auth_start.php», «admin_google_auth_callback.php», «google.php», «google_oauth.php», «lib_gcal.php», «admin_google_watch_renew.php» Tots dins la carpeta reservas/ api/ Despres si s’ha creat correctament encara amb l’usuari del negoci:

https://vadewebs.online/reservas/api/admin_google_watch_start.php?key=Toni0739&business_id=ID DEL NEGOCI 

DESPRES COMPROBAR A LA BASE DE DADES vw_google_watch QUE S’HAN CREAT LES ENTRADES PER TOTS EL TREBALLADORS DEL NEGOCI. UNA LINEA PER TREBALLADOR.

Repetir el proces si hi ha treballadors nous amb nous calendaris. Per aixo es millor intentar aprofitar calendaris que el negoci hi ha tingui creats. I cambiar el nom del traballador. 

Solicitar presupuesto

Diseño Web WordPress Profesional

Desarrollo páginas web en WordPress totalmente personalizadas, rápidas y fáciles de gestionar. Un diseño profesional, seguro y adaptado a tu marca para que tu negocio destaque y convierta visitantes en clientes desde el primer día.

Fácil de gestionar

Actualiza textos, imágenes o productos sin depender de nadie. WordPress te permite tener el control total de tu web.

Diseño 100% personalizado

Nada de plantillas genéricas. Creo un diseño único adaptado a tu estilo y los objetivos de tu negocio.

Rápido y optimizado para Google

Código limpio, estructura clara y velocidad mejorada para aparecer mejor en búsquedas y ofrecer una experiencia fluida.

Máxima compatibilidad

Integración con WooCommerce, formularios, redes sociales, herramientas de marketing y cualquier funcionalidad que necesites.

Seguridad y actualizaciones

Web protegida, actualizada y preparada para crecer sin problemas.

Qué incluye el servicio de

Diseño WordPress

Diseño personalizado a medida (no uso plantillas prefabricadas)

Instalación y configuración de WordPress

Optimización inicial de velocidad

Adaptación completa a móviles y tabletas

Configuración de menús, páginas y estructura

Conexión a Google Analytics y Search Console

Implementación de RGPD, cookies y políticas

1 año de mantenimiento básico incluido

Pequeña formación para que gestiones tu web tú mismo

PREGUNTAS FRECUENTES

Sí. Tendrás acceso completo y formación básica.

Tu logo, tus ideas principales y 20 minutos para la primera llamada.

Sí, siempre diseño en formato responsive.

Incluye SEO técnico básico. El posicionamiento avanzado es un servicio adicional.

Pide un presupuesto por tu web sin compromiso.