Si eres creador de contenido en Twitch o YouTube, seguro que te has encontrado con esta molestia diaria: abres OBS Studio para iniciar directo y el campo de «Título del Stream» tiene el texto del día anterior. Si quieres reutilizar un título que usaste hace tres días (por ejemplo, «Noche de Terror en Phasmophobia – Parte 4»), OBS no te ayuda. No existe un desplegable con un historial, ni una lista de favoritos.
Esto te obliga a tener un archivo de notas abierto aparte, o peor aún, a entrar en tu panel de control de Twitch para copiar y pegar títulos antiguos.
#La Solución: Un Panel de Historial «Drag & Drop»
Para solucionar esto sin instalar plugins pesados ni scripts complejos de Python, hemos diseñado una pequeña herramienta web (un archivo HTML) que puedes cargar directamente dentro de OBS como un Panel de Navegador Personalizado (Custom Dock).
Esta herramienta hace tres cosas:
- Guarda un historial de los últimos 10 títulos que has escrito en ella.
- Permite copiar el texto con un clic.
- Funcionalidad Arrastrar y Soltar: Puedes hacer clic en un título de la lista, arrastrarlo y soltarlo directamente dentro del campo de título de Twitch/YouTube en OBS.
#¿Por qué no es un botón automático? (Las Limitaciones)
Es posible que te preguntes: «¿Por qué tengo que arrastrar el texto? ¿No podría haber un botón que diga ‘Aplicar’ y listo?».
La respuesta técnica es la seguridad (Sandboxing). En OBS, cada panel de navegador funciona como una isla independiente. Tu panel de «Información de Stream» (donde está el formulario oficial de Twitch) y este panel de Historial no pueden «hablar» entre ellos. Un script no puede inyectar texto en otro panel por seguridad.
La solución más elegante y rápida para saltarse esta barrera sin programar un plugin complejo en C++ es usar el portapapeles o la función nativa de Arrastrar y Soltar del sistema operativo, que sí está permitida entre ventanas.
#Tutorial de Instalación (Paso a Paso)
Sigue estos pasos para integrarlo en tu OBS en menos de 2 minutos:
- Abre el Bloc de Notas (o tu editor de código favorito).
- Copia el código que te dejamos más abajo y pégalo en el archivo. O desde aquí:
- Guarda el archivo en una carpeta segura (ej: Documentos) con el nombre:
historial_obs.html(Asegúrate de que no termine en .txt). - Abre OBS Studio.
- Ve al menú superior: Paneles (Docks) > Paneles de navegador personalizados…
- En «Nombre del panel», escribe:
Historial Títulos. - En «URL», debes poner la ruta de tu archivo. Si estás en Windows, será algo así:
file:///C:/Usuarios/TuNombre/Documentos/historial_obs.html - Dale a Aplicar. Aparecerá una nueva ventana.
- Arrastra esa ventana y «pégala» justo al lado o debajo de tu panel de Información de Stream.
Nota: Si tienes problemas para encontrar la ruta para usar el panel abre el archivo .html que has creado con tu navegador de internet y copia la url de la barra de direcciones 😉
#El Código (Copiar y Pegar)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<style>
body { font-family: 'Segoe UI', sans-serif; background-color: #1f1f1f; color: #e0e0e0; margin: 0; padding: 10px; font-size: 12px; }
h3 { margin-top: 0; color: #ffffff; border-bottom: 1px solid #3e3e3e; padding-bottom: 5px; }
.input-group { display: flex; gap: 5px; margin-bottom: 15px; }
input[type="text"] { flex-grow: 1; background-color: #2b2b2b; border: 1px solid #3e3e3e; color: #ffffff; padding: 5px; border-radius: 3px; }
button { background-color: #3e3e3e; color: #ffffff; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer; }
button.add-btn { background-color: #0078d7; }
ul { list-style-type: none; padding: 0; margin: 0; }
li { background-color: #2b2b2b; border: 1px solid #3e3e3e; margin-bottom: 5px; padding: 8px; border-radius: 3px; display: flex; flex-direction: column; gap: 5px; }
.title-text { width: 100%; word-wrap: break-word; cursor: grab; font-size: 11px; margin-bottom: 2px; }
.actions { display: flex; gap: 5px; width: 100%; }
.copy-btn, .del-btn { flex-grow: 1; text-align: center; padding: 4px 0; font-size: 10px; }
.copy-btn { background-color: #2d8a56; }
.del-btn { background-color: #a83232; }
</style>
</head>
<body>
<h3>Historial de Títulos</h3>
<div class="input-group">
<input type="text" id="newTitle" placeholder="Nuevo título...">
<button class="add-btn" onclick="addTitle()">Guardar</button>
</div>
<ul id="historyList"></ul>
<script>
document.addEventListener('DOMContentLoaded', loadHistory);
function loadHistory() {
const history = JSON.parse(localStorage.getItem('obs_title_history') || '[]');
const list = document.getElementById('historyList');
list.innerHTML = '';
history.forEach((title, index) => {
const li = document.createElement('li');
li.draggable = true;
li.ondragstart = (e) => { e.dataTransfer.setData("text/plain", title); e.dataTransfer.effectAllowed = "copy"; };
const span = document.createElement('span');
span.className = 'title-text';
span.textContent = title;
span.title = "Arrastra para copiar";
span.onclick = () => copyToClipboard(title);
const actions = document.createElement('div');
actions.className = 'actions';
const copyBtn = document.createElement('button');
copyBtn.className = 'copy-btn';
copyBtn.textContent = 'Copiar';
copyBtn.onclick = () => copyToClipboard(title);
const delBtn = document.createElement('button');
delBtn.className = 'del-btn';
delBtn.textContent = 'X';
delBtn.onclick = () => deleteTitle(index);
actions.appendChild(copyBtn);
actions.appendChild(delBtn);
li.appendChild(span);
li.appendChild(actions);
list.appendChild(li);
});
}
function addTitle() {
const input = document.getElementById('newTitle');
const title = input.value.trim();
if (title) {
const history = JSON.parse(localStorage.getItem('obs_title_history') || '[]');
const existingIndex = history.indexOf(title);
if (existingIndex > -1) history.splice(existingIndex, 1);
history.unshift(title);
if (history.length > 10) history.pop();
localStorage.setItem('obs_title_history', JSON.stringify(history));
input.value = '';
loadHistory();
}
}
function deleteTitle(index) {
const history = JSON.parse(localStorage.getItem('obs_title_history') || '[]');
history.splice(index, 1);
localStorage.setItem('obs_title_history', JSON.stringify(history));
loadHistory();
}
function copyToClipboard(text) { navigator.clipboard.writeText(text); }
document.getElementById('newTitle').addEventListener('keypress', function (e) { if (e.key === 'Enter') addTitle(); });
</script>
</body>
</html>