Integrar Widget en tu Website

Antes de Empezar

Asegúrate de tener:

• ✅ Widget configurado en StorageFy
• ✅ Código HTML generado
• ✅ Acceso de edición a tu página web

Método Universal: HTML Personalizado

La forma más común es usar un bloque o sección de "HTML personalizado" en tu plataforma.

WordPress

Opción 1: Editor de Bloques (Gutenberg)

1. Edita la página donde quieres el widget
2. Haz clic en "+" para agregar un bloque
3. Busca y selecciona "HTML personalizado"
4. Pega el código del widget
5. Haz clic en "Vista previa" para verificar
6. Publica o actualiza la página

Opción 2: Editor Clásico

1. Cambia al editor de texto (no visual)
2. Pega el código donde quieres que aparezca
3. Guarda los cambios
4. Vista previa y publica

Ubicación Recomendada

• Página de Contacto: Ideal para reservas
• Página Principal: Widget destacado
• Página Dedicada: "Reservas Online" o "Reserva tu Unidad"

HTML Estático

Archivo HTML

1. Abre el archivo HTML en un editor de texto
2. Encuentra donde quieres mostrar el widget (ej. después de una sección)
3. Pega el código del widget
4. Importante: Pega antes del cierre de
5. Guarda el archivo
6. Sube el archivo actualizado a tu servidor

Ejemplo de Ubicación:

```html

```

Wix

1. Ve al Editor de Wix
2. Arrastra un elemento "HTML" o "Código personalizado"
3. Haz doble clic en el elemento
4. Pega el código del widget
5. Ajusta el tamaño y posición
6. Haz clic en "Publicar"

Squarespace

1. Edita la página
2. Haz clic en "+" para agregar un bloque
3. Selecciona "Código"
4. Pega el código del widget
5. Haz clic en "Aplicar"
6. Guarda y publica

Shopify

En una Página

1. Ve a Páginas Online → Selecciona o crea una página
2. En el editor, haz clic en "" (Mostrar código HTML)
3. Pega el código del widget
4. Guarda

En el Tema

1. Ve a Tema → Editar código
2. Busca el archivo donde quieres agregarlo (ej. theme.liquid)
3. Pega antes de
4. Guarda

Webflow

1. Abre tu proyecto en Webflow
2. Agrega un elemento "Embed" o "Code Embed"
3. Pega el código del widget
4. Posiciona donde quieras
5. Publica el sitio

Verificar la Integración

Después de integrar:

1. Carga la página donde pusiste el widget
2. Verifica que aparezca el widget
3. Prueba la funcionalidad:

• ¿Muestra unidades disponibles?
• ¿El botón funciona?
• ¿Se ve bien en móvil?

1. Revisa en diferentes navegadores:

• Chrome
• Firefox
• Safari
• Edge

Problemas Comunes

El Widget No Aparece

• Causa: Código mal pegado o bloqueado por seguridad
• Solución: Verifica que el código esté completo y en el lugar correcto

Errores de JavaScript

• Causa: Conflicto con otros scripts
• Solución: Verifica la consola del navegador para errores

No se Ve en Móvil

• Causa: Problema de responsive
• Solución: El widget es responsive por defecto, verifica que no haya CSS que lo bloquee

Actualizar el Widget

Si cambias la configuración del widget:

1. Genera el nuevo código en StorageFy
2. Reemplaza el código anterior en tu página
3. Guarda y actualiza
4. El nuevo código se carga automáticamente