Volver a la tienda

Guía de Despliegue

Cómo publicar TelasVIP en internet, configurar la base de datos y agregar un chatbot

Contenido de esta guía

  1. Entender la base de datos y el almacenamiento
  2. Plataformas de publicación recomendadas
  3. Opción A: Publicar en Genspark (recomendado)
  4. Opción B: Cloudflare Pages (con limitaciones)
  5. Opción C: Netlify (fácil y rápido)
  6. Cómo instalar el chatbot Tawk.to
  7. Cambiar usuario y contraseña admin
  8. Cómo subir tu logo personalizado

1
Entender la base de datos y el almacenamiento

Punto clave: TelasVIP usa dos modos de almacenamiento. El modo que uses depende del hosting donde publiques el sitio.
☁️ Modo Nube (API de Genspark)

Activo cuando el sitio está publicado desde Genspark Publish. Los datos se guardan en una base de datos en la nube y son visibles desde cualquier dispositivo en tiempo real.

  • ✓ Datos en tiempo real
  • ✓ Visible desde cualquier dispositivo
  • ✓ Cambios del admin aplicados inmediatamente
  • ✓ Multi-usuario real
💾 Modo Local (localStorage)

Activo cuando el sitio se sube a Cloudflare Pages, Netlify u otro hosting externo. Los datos se guardan en el navegador de cada usuario por separado.

  • ! Los cambios solo se ven en TU navegador
  • ! Cada dispositivo tiene sus propios datos
  • ! Al limpiar el navegador se pierden los datos
  • ! Para datos en la nube necesitas Firebase
¿Por qué no funciona bien en Cloudflare?
La API tables/ que usa TelasVIP es del servidor de Genspark. Cuando subes el sitio a otro hosting, esa API no está disponible. El sitio automáticamente cambia a localStorage (solo guarda en tu navegador). Para tener datos reales en la nube desde Cloudflare, necesitas conectar Firebase u otro backend — esto requiere conocimientos técnicos avanzados.
La solución más simple: Usa el botón "Publish" de Genspark. Tu tienda tendrá una URL pública, base de datos en la nube y todo funcionará perfectamente. Las otras opciones (Cloudflare, Netlify) son para cuando necesites un dominio personalizado y aceptas las limitaciones del localStorage.

2
Plataformas de publicación recomendadas

Genspark Publish RECOMENDADO

La opción más simple. Usa el botón Publish del editor. Base de datos incluida, sin configuración.

  • Base de datos en la nube real
  • Sin configuración
  • Un clic para publicar
  • HTTPS automático
  • Datos en tiempo real
  • URL de Genspark (sin dominio propio)

Netlify

Fácil de usar. Arrastra y suelta tu carpeta de archivos. Gratis y rápido.

  • Gratis para siempre
  • Dominio propio opcional
  • Arrastra y suelta
  • HTTPS automático
  • Solo localStorage (sin nube)
netlify.com →

Cloudflare Pages

Gratis, rápido y con CDN global. Requiere conectar GitHub.

  • CDN global muy rápido
  • Dominio propio gratis
  • HTTPS automático
  • Solo localStorage (sin nube)
  • Requiere GitHub
  • Más técnico de configurar
pages.cloudflare.com →

GitHub Pages

Hosting gratis en GitHub. Para usuarios con conocimientos técnicos.

  • 100% gratis
  • Integrado con GitHub
  • Solo localStorage (sin nube)
  • Requiere cuenta GitHub
  • Solo sitios estáticos públicos
pages.github.com →

3
Opción A: Publicar en Genspark (Recomendado)

Esta es la forma más fácil y la que mantiene TODOS los datos en la nube (tiempo real, cualquier dispositivo).

Pasos para publicar

1
Abre el editor de Genspark

Asegúrate de estar en el editor donde aparece tu proyecto TelasVIP.

2
Haz clic en el botón "Publish" o "Publicar"

Está en la esquina superior derecha del editor. El sistema generará una URL pública.

3
Copia tu URL pública

Obtendrás algo como https://tu-proyecto.genspark.site. Comparte esa URL con tus clientes.

4
¡Listo! Tu tienda está en línea

Los datos del admin se guardan automáticamente en la nube y son visibles desde cualquier dispositivo.

4
Opción B: Cloudflare Pages (con limitaciones)

Importante: En Cloudflare Pages, los datos del admin (productos, configuración) solo se guardan en el localStorage de tu propio navegador. No son visibles desde otros dispositivos. Si esto es aceptable para ti, sigue esta guía.

Paso 1: Subir a GitHub

1
Crea una cuenta en GitHub

Ve a github.com y crea una cuenta gratuita.

2
Crea un nuevo repositorio

Haz clic en "New repository" → ponle nombre (ej: telasvip) → marcarlo como Public → Create.

3
Descarga todos los archivos del proyecto

Desde Genspark, descarga o copia todos los archivos: index.html, js/, css/, guia-cloudflare.html

4
Sube los archivos a GitHub

En tu repositorio, haz clic en "Add file" → "Upload files" → arrastra todos los archivos → "Commit changes".

Paso 2: Conectar con Cloudflare Pages

1
Crea cuenta en Cloudflare

Ve a dash.cloudflare.com y crea una cuenta gratuita.

2
Ve a Pages → Create a project

En el menú lateral busca "Workers & Pages" → "Pages" → "Connect to Git".

3
Conecta tu cuenta de GitHub

Autoriza a Cloudflare para acceder a tu GitHub y selecciona el repositorio de TelasVIP.

4
Configuración del build

Deja todo en blanco (no es necesario build command). Haz clic en "Save and Deploy".

5
Espera el despliegue (1-2 minutos)

Cloudflare te dará una URL como telasvip.pages.dev. ¡Tu sitio está en línea!

Paso 3: Conectar tu dominio propio (opcional)

1
En Cloudflare Pages → Custom domains

Entra a tu proyecto en Cloudflare → pestaña "Custom domains" → "Set up a custom domain".

2
Escribe tu dominio

Ej: www.telasvip.com o telasvip.com. Cloudflare guiará el proceso DNS.

3
Configura los DNS de tu dominio

En donde compraste tu dominio (GoDaddy, Namecheap, etc.), cambia los nameservers a los de Cloudflare, o agrega los registros CNAME que te indiquen.

Actualizaciones automáticas: Cada vez que subas cambios a GitHub (upload de archivos), Cloudflare detecta el cambio y redesplega automáticamente en 1-2 minutos. Sin hacer nada extra.

5
Opción C: Netlify (más fácil para principiantes)

Método: Arrastrar y soltar (sin GitHub)

1
Ve a netlify.com y crea una cuenta

Puedes entrar con tu correo de Google para más rapidez.

2
Descarga todos los archivos del proyecto

Obtén todos los archivos: index.html, carpeta js/, carpeta css/, etc. en una carpeta de tu computadora.

3
En Netlify: arrastra la carpeta

En el dashboard de Netlify, al fondo de la página verás "Drag and drop your site folder here". Arrastra tu carpeta de TelasVIP ahí.

4
¡Tu sitio está publicado!

Netlify te dará una URL aleatoria como random-name-12345.netlify.app. Puedes cambiarla en Site Settings → Domain Management.

6
Cómo instalar el chatbot Tawk.to (gratis)

Tawk.to es completamente gratuito y te permite chatear en tiempo real con tus clientes desde tu celular o computadora. Incluso tiene app móvil para responder mensajes.
Paso 1: Crear cuenta en Tawk.to

Ve a www.tawk.to → haz clic en "Sign Up Free" → regístrate con tu correo. Es completamente gratis.

Paso 2: Crear una propiedad (tu tienda)

Al entrar, Tawk.to te pedirá crear una "Property" (propiedad). Escribe el nombre de tu tienda (TelasVIP) y la URL de tu sitio. Haz clic en "Next".

Paso 3: Copiar el código del widget

Tawk.to te mostrará un código JavaScript para instalar en tu sitio. Se verá así:

<script type="text/javascript"> var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date(); (function(){ var s1=document.createElement("script"); s1.src='https://embed.tawk.to/TU_ID_AQUI/default'; document.head.appendChild(s1); })(); </script>

Copia todo ese bloque de código.

Paso 4: Pegar el código en TelasVIP

En tu tienda TelasVIP:

  1. Inicia sesión como administrador
  2. Abre el Panel Admin (ícono ⚙️ en el header)
  3. Ve a la sección "Integraciones"
  4. Activa el toggle "Activar chatbot"
  5. Pega el código en el campo de texto
  6. Haz clic en "Guardar e Instalar Chatbot"
Paso 5: Instalar la app de Tawk.to en tu celular

Descarga la app de Tawk.to en tu teléfono (disponible en App Store y Google Play). Así recibirás notificaciones cuando un cliente quiera chatear y podrás responder desde tu celular.

¿Cuándo aparece el chat? El ícono de chat aparecerá en la esquina inferior derecha de tu tienda. Cuando un cliente haga clic, podrá chatear contigo en tiempo real. Si no estás disponible, Tawk.to muestra un formulario de mensaje.

7
Cambiar usuario y contraseña admin

¡Muy importante! La contraseña por defecto es insegura. Cámbiala antes de publicar tu tienda.

Método 1: Editar js/config.js (recomendado)

Abre el archivo js/config.js y cambia estas líneas:

// Líneas 13-15 de js/config.js window.TV_ADMIN_EMAIL = 'tu-correo@ejemplo.com'; // ← cambia esto window.TV_ADMIN_PASSWORD = 'MiClaveSegura2024!'; // ← cambia esto window.TV_ADMIN_BACKUP_PASS = 'OtraClaveRespaldo'; // ← cambia esto también
Después de editar, debes volver a publicar el sitio para que los cambios tomen efecto.

Método 2: Desde el Panel Admin (sin editar código)

  1. Inicia sesión con la contraseña actual
  2. Abre el Panel Admin → sección "Configuración"
  3. Busca la tarjeta "Cambiar Contraseña Admin"
  4. Ingresa la contraseña actual, la nueva y confirma
  5. Haz clic en "Cambiar Contraseña"
Este método solo funciona cuando la API está disponible (modo Genspark). En Cloudflare/Netlify, el cambio se guarda en localStorage (solo en tu navegador).

¿Tienes dudas?

Si algo no funciona como esperabas, revisa esta guía nuevamente o contacta soporte.

Volver a la Tienda
TelasVIP v5.0 — Guía de Despliegue · Actualizada en 2024