Integración con Streamlabs
Information
Streamlabs es un software de streaming todo en uno popular que se basa
en la tecnología de OBS mientras añade funciones centradas en el streaming,
alertas e integraciones. Añadir temporizadores de gettickr.app a Streamlabs es
rápido y fácil.
Esta guía te muestra cómo integrar temporizadores de cuenta atrás de gettickr.app en tu configuración de Streamlabs usando fuentes de navegador.
Lo que necesitas
| Requisito | Detalles |
|---|---|
| Streamlabs | Aplicación de escritorio (Descargar) |
| Temporizador de gettickr.app | Creado en gettickr.app |
| URL del temporizador | URL de visualización/renderer de tu temporizador |
| Conexión a Internet | Requerida para fuente de navegador |
Tip
Streamlabs usa la misma tecnología de fuente de navegador que OBS
Studio, así que si has usado OBS antes, este proceso te resultará muy
familiar.
Integración paso a paso
Paso 1: Crea y prepara tu temporizador
Antes de añadir el temporizador a Streamlabs, configúralo en gettickr.app:
- Abre el Editor
- Crea y personaliza tu temporizador (duración, colores, fuentes, diseño)
- Navega a la sección Renderer
- Copia la URL de visualización, se ve como:
https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR
Premium Feature
Guarda primero tu temporizador para obtener una URL estable. Los
temporizadores Premium mantienen la misma URL incluso después de ediciones.
Los temporizadores gratuitos generan nuevas URLs con cada cambio.
Paso 2: Añade fuente de navegador en Streamlabs
Ahora añade el temporizador a tu escena:
- Abre Streamlabs y selecciona tu escena deseada
- En el panel Sources, haz clic en el icono "+" (más)
- Selecciona "Browser Source" de la lista de tipos de fuente
- Dale un nombre descriptivo (ej. "Countdown Timer", "Break Timer", "Event Countdown")
- Haz clic en "Add Source"
Paso 3: Configura los ajustes de la fuente de navegador
Configura la fuente de navegador para mostrar tu temporizador de gettickr.app:
| Ajuste | Valor recomendado | Notas |
|---|---|---|
| URL | https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR | Pega aquí la URL de tu temporizador |
| Width | 1920 | Ajusta al ancho de diseño de tu temporizador |
| Height | 1080 | Ajusta al alto de diseño de tu temporizador |
| FPS | 30 | Suficiente para animación suave |
| CSS | Dejar vacío | No necesario |
| Shutdown source when not visible | ⚠️ Opcional | Ahorra recursos pero puede reiniciar temporizador |
| Refresh browser when scene becomes active | ⬜ Normalmente deshabilitado | Solo habilitar si quieres que el temporizador se recargue |
Warning
Habilitar "Shutdown source when not visible" puede causar que tu
temporizador se reinicie al cambiar escenas. Prueba esto según tus necesidades
de flujo de trabajo.
Haz clic en "Done" para añadir la fuente de navegador.
Paso 4: Posiciona y redimensiona
Tu temporizador ahora aparece en el editor de escenas:
- Mover: Haz clic y arrastra el temporizador a tu posición deseada
- Redimensionar: Arrastra los controles rojos de las esquinas para ajustar el tamaño
- Escalado proporcional: Mantén presionado Shift mientras arrastras las esquinas
- Bloquear posición: Clic derecho → Lock para prevenir movimientos accidentales
- Ajustes finos: Usa las teclas de flecha para posicionamiento pixel-perfect
| Acción rápida | Atajo | Uso |
|---|---|---|
| Center Horizontally | Menú Transform | Centrado rápido |
| Center Vertically | Menú Transform | Centrado rápido |
| Fit to Screen | Menú Transform | Temporizador pantalla completa |
| Reset Transform | Menú Transform | Volver al tamaño original |
Funciones específicas de Streamlabs
Integración de widgets
Streamlabs tiene un sistema de widgets. Aunque los temporizadores de gettickr.app funcionan genial como fuentes de navegador, son separados de los widgets integrados de Streamlabs:
| Característica | Widgets de Streamlabs | Temporizadores de gettickr.app |
|---|---|---|
| Personalización | Plantillas limitadas | Totalmente personalizable |
| Uso fuera de Streamlabs | ❌ No | ✅ Sí (web, OBS, XSplit) |
| Control remoto | ⬜ Limitado | ✅ Sí (Premium) |
| Libertad de diseño | ⬜ Basado en plantillas | ✅ Control completo |
| URLs estables | N/A | ✅ Sí (Premium) |
Information
Usa temporizadores de gettickr.app como fuentes de navegador para
máxima flexibilidad y control. Funcionan junto a los widgets de Streamlabs sin
conflictos.
Colecciones de escenas
La función de colecciones de escenas de Streamlabs funciona perfectamente con temporizadores de gettickr.app:
- Crea diferentes colecciones de escenas para diferentes tipos de stream
- Añade temporizadores apropiados a cada colección
- Cambia entre colecciones para cambiar toda tu configuración de stream
Colecciones de ejemplo:
| Colección de escenas | Temporizadores incluidos |
|---|---|
| Standard Stream | Temporizador de pausa, cuenta atrás de evento |
| Special Events | Temporizador de torneo, cuenta atrás de sorteo |
| Starting Soon | Cuenta atrás pre-stream |
| Just Chatting | Temporizador de tema, cuenta atrás de Q&A |
Temas de Streamlabs
Al usar temas de Streamlabs, posiciona tu temporizador de gettickr.app para complementar el diseño del tema:
- Temas de overlay: Coloca el temporizador en áreas de overlay designadas
- Temas de alertas: Asegúrate de que el temporizador no se superpone con posiciones de alertas
- Temas de chat box: Posiciona el temporizador para evitar bloquear el chat
- Temas de marco de cámara: Integra el temporizador en espacios vacíos
Control remoto con Streamlabs
Control remoto Premium
Con una cuenta Premium de gettickr.app, puedes controlar tu temporizador mientras haces streaming:
Configuración:
- Abre el Editor en una pestaña del navegador o en un segundo monitor
- Carga tu temporizador Premium guardado
- Mantén el editor abierto durante tu stream
Funciones de control:
| Acción | Qué hace | Cuándo usar |
|---|---|---|
| Start | Comenzar cuenta atrás | El stream comienza, la pausa empieza |
| Pause | Congelar temporizador | Interrupción inesperada |
| Reset | Volver a duración inicial | Reiniciar cuenta atrás |
| Adjust Duration | Cambiar tiempo restante | Extender/acortar pausa |
| Update Design | Modificar colores, fuentes, diseño | Ajustar al tema del stream |
Premium Feature
Todos los cambios se sincronizan instantáneamente con
Streamlabs. No necesitas actualizar la fuente de navegador o actualizar URLs.
| Característica | Temporizador Free | Temporizador Premium |
|---|---|---|
| Añadir a Streamlabs | ✅ Sí | ✅ Sí |
| Control remoto | ❌ No | ✅ Sí |
| URL después de ediciones | ❌ Cambia | ✅ Se mantiene igual |
| Guardar biblioteca de temporizadores | ❌ No | ✅ Sí |
| Persistencia de estado | ❌ Se reinicia | ✅ Guarda |
Múltiples temporizadores en Streamlabs
Muchos streamers usan múltiples temporizadores para diferentes propósitos. Aquí hay estrategias comunes:
Estrategia 1: Múltiples escenas
Crea escenas separadas para diferentes usos del temporizador:
| Nombre de escena | Propósito del temporizador | Tipo de temporizador |
|---|---|---|
| Starting Soon | Cuenta atrás pre-stream | CountTo (hora de inicio específica) |
| BRB | Temporizador de pausa | Countdown (5-15 min) |
| Live | Overlay de cuenta atrás de evento | CountTo (evento futuro) |
| Ending Soon | Cuenta atrás de finalización de stream | Countdown (10 min) |
Beneficios: Organización limpia, control completo de escenas, cambio fácil
Estrategia 2: Múltiples fuentes en una escena
Añade varias fuentes de navegador a la misma escena y alterna la visibilidad:
- Añade múltiples fuentes de navegador con diferentes URLs de temporizador
- Establece visibilidad para cada temporizador
- Usa atajos de teclado para mostrar/ocultar temporizadores según sea necesario
- Solo un temporizador visible a la vez
Beneficios: Cambio rápido, gestión de escena única, menos complejidad
Estrategia 3: Capas de escena
Separa diferentes temporizadores en capas para diferentes propósitos:
- Capa de fondo: Cuenta atrás de evento siempre visible
- Capa frontal: Temporizador de pausa que aparece cuando es necesario
- Capa de overlay: Temporizador de evento especial para sorteos
Problemas comunes y soluciones
El temporizador no aparece
| Problema | Causa | Solución |
|---|---|---|
| Fuente de navegador negra/en blanco | URL incorrecta | Verificar que la URL comienza con https://gettickr.app/r/# |
| Temporizador cortado | Fuente de navegador muy pequeña | Aumentar ancho/alto para ajustar al diseño del temporizador |
| Temporizador detrás de otras fuentes | Orden de capas incorrecto | Mover fuente de navegador arriba en la lista de Sources |
| Nada se carga | Sin internet | Verificar conexión de red |
Problemas de comportamiento del temporizador
| Problema | Causa | Solución |
|---|---|---|
| El temporizador se reinicia al cambiar escenas | "Shutdown when not visible" habilitado | Deshabilitar ese ajuste |
| El temporizador no se actualiza después de editar (free) | Nueva URL generada | Copiar nueva URL y actualizar fuente de navegador |
| Control remoto no funciona (premium) | Editor cerrado | Mantener pestaña del editor abierta |
| Temporizador congelado | Fuente de navegador pausada | Clic derecho en fuente → Refresh |
Warning
Los temporizadores gratuitos crean una nueva URL cada vez que
editas. Debes actualizar la URL de la fuente de navegador en Streamlabs
después de cada edición. Los temporizadores Premium mantienen URLs estables.
Problemas de rendimiento
| Síntoma | Solución |
|---|---|
| Streamlabs con lag | Reducir resolución o FPS de fuente de navegador |
| Alto uso de CPU | Habilitar "Shutdown when not visible" para temporizadores no usados |
| Animación entrecortada del temporizador | Aumentar FPS de fuente de navegador a 30 |
| Problemas de codificación de stream | Cerrar fuentes de navegador innecesarias |
Tip
Las fuentes de navegador son ligeras cuando están configuradas
correctamente. Cada temporizador de gettickr.app usa recursos mínimos de
CPU/GPU.
Accesibilidad y usabilidad
Diseño para todos los espectadores
| Consideración | Implementación | Beneficio |
|---|---|---|
| Alto contraste | Usar colores brillantes vs. oscuros | Legible para baja visión |
| Fuentes grandes | Establecer tamaños de fuente 40px+ | Visible en pantallas pequeñas |
| Posicionamiento claro | Evitar superposición con contenido clave | Sin confusión |
| Animaciones suaves | Usar animaciones sutiles, no parpadeantes | Accesible para sensibilidad visual |
Diseño responsive
Asegúrate de que tu temporizador se vea bien en todas las plataformas de visualización:
| Plataforma de visualización | Consideración de diseño | Ajuste |
|---|---|---|
| Twitch (escritorio) | Navegadores de escritorio completos | Diseño de tamaño completo |
| Twitch (móvil) | Pantallas pequeñas, menor resolución | Fuentes más grandes, diseño simple |
| YouTube | Varios dispositivos | Diseño balanceado |
| Facebook Gaming | Principalmente móvil | Diseño mobile-first |
Mejores prácticas
| Práctica | Por qué | Cómo |
|---|---|---|
| Nombra las fuentes claramente | Fácil identificación | "Break Timer 5min" no "Browser 1" |
| Prueba antes de ir en vivo | Evita problemas durante el stream | Ejecuta test stream |
| Usa URLs estables | Sin actualizaciones manuales | Temporizadores Premium guardados |
| Posición consistente | Familiaridad del espectador | Misma ubicación en todas las escenas |
| Colores de marca | Apariencia profesional | Ajustar colores del temporizador al tema |
Flujo de trabajo de streaming
Flujo de trabajo pre-stream
- Abre Streamlabs y carga la colección de escenas apropiada
- Abre el editor de gettickr.app en segundo monitor/dispositivo
- Carga temporizadores Premium guardados
- Prueba todos los temporizadores (start/pause/reset)
- Verifica posicionamiento y visibilidad en la vista previa
- Inicia stream
Flujo de trabajo durante el stream
| Acción del stream | Acción del temporizador | Método |
|---|---|---|
| Tomar pausa | Iniciar temporizador de pausa | Control remoto o cambiar escena |
| Volver de pausa | Cambiar de escena BRB | Cambio de escena de Streamlabs |
| Anunciar evento | Mostrar cuenta atrás de evento | Alternar visibilidad de fuente |
| Extender pausa | Ajustar duración del temporizador | Control remoto Premium |
| Finalizar stream | Iniciar temporizador de finalización | Control remoto o cambio de escena |
Flujo de trabajo post-stream
- Guardar cambios en temporizadores si se modificaron
- Verificar que todas las escenas funcionaron correctamente
- Guardar colección de escenas si se hicieron cambios
- Cerrar editor de gettickr.app
Integración con otras herramientas de Streamlabs
Streamlabs Chatbot
Los temporizadores de gettickr.app funcionan junto a Streamlabs Chatbot:
- Usa comandos del chatbot para anunciar temporizadores
- Sincroniza temporizadores con comandos de chat
- Crea interacción del espectador alrededor de temporizadores
Streamlabs Alerts
Coordina temporizadores con alertas:
- Posiciona temporizadores para no bloquear alertas
- Usa temporizadores para sorteos cronometrados
- Sincroniza temporizadores de evento con notificaciones de alerta
Próximos pasos
- Integración con XSplit - Guía de software de streaming alternativo
- Control remoto - Aprende sobre las funciones de control remoto Premium
- Personalizar diseño - Haz que tu temporizador coincida con la marca de tu stream