Elija la página de inicio correcta
Usa monetization.html para la superposición de producto/soporte de audiencia actual y commerce-board.html para tableros y vistas de artículos vendidos. Las páginas de configuración de documentos y shop.html el escaparate cumple diferentes funciones; un escaparate no es un panel de control del operador OBS.
Descargar y conservar la estructura del archivo
- Descargar el ZIP fuente y extráigalo. Estas guías utilizan la fuente beta; Mantenga juntos los archivos de una descarga.
- Copiar (Copy)
monetization.htmlamy-products.htmlal lado del original. Si elige una página o tema diferente, guarde su copia en la carpeta original de ese archivo. - Abra el HTML copiado y su CSS/JS al que se hace referencia en su editor o herramienta de inteligencia artificial. Agregue ilustraciones/fuentes proporcionadas al mismo proyecto y use rutas relativas. Comience con anulaciones de CSS; incluya el renderizador al cambiar el marcado generado.
Los siguientes archivos le ayudarán a encontrar el diseño y el comportamiento. Esta es una lista de lectura, no un paquete de dependencias completo: mantenga intacta la carpeta extraída, incluidas imágenes, fuentes, secuencias de comandos y cualquier archivo de datos.
| Archivo | Por qué es importante |
|---|---|
monetization.html | Visualización de producto/soporte para la audiencia principal. |
shared/monetization/overlay.css | Estilo de exhibición del producto. |
shared/monetization/overlay.js | Comportamiento y estado de visualización de la audiencia. |
shared/monetization/core.js | Manejo de datos comerciales compartidos. |
commerce-board.html | Vista de audiencia del tablero y de artículos vendidos. |
shared/monetization/board-overlay.css | Estilo del tablero y de los artículos vendidos. |
shared/monetization/board-overlay.js | Comportamiento de visualización del tablero. |
shop_the_stream.html | Página existente de compra de transmisiones; Inspeccione su propia configuración por separado. |
Conecte su copia y ábrala en OBS
Inicie SSN y haga que la URL superpuesta generada original funcione primero. el session= se conecta a esa sesión SSN; no es el nombre de tu canal ni el nombre de este archivo. Mantenga SSN, la función relevante y sus fuentes de datos en ejecución.
- Arrastre su archivo HTML editado a Chrome o Edge. Copie su dirección de la barra de direcciones; comienza con
file:///. - Copia todo de
?en adelante en su enlace superpuesto SSN en funcionamiento y agréguelo al final de la dirección de ese archivo. Mantenga todas las configuraciones, incluida la sesión, la contraseña y cualquier#final. - Abra el resultado en un navegador, luego configure una fuente del navegador OBS. URL a la misma dirección con Archivo local (Local file) sin marcar. Haga coincidir las dimensiones de origen con el diseño previsto.
Para el archivo inicial anterior, la dirección local se ve así; su enlace real puede contener opciones adicionales requeridas:
file:///C:/SSN/social_stream-beta/my-products.html?session=YOUR_SESSIONUtilice la dirección del archivo real en su computadora. OBS lo guarda con la fuente; mantenga la carpeta descargada en el mismo lugar. Después de guardar los cambios de diseño, actualice la fuente del navegador. el guía de configuración compartida incluye ejemplos de Mac y un iniciador opcional para la casilla Archivo local.
Dónde cambiar el diseño
Cambie el diseño de la tarjeta, la tipografía, el marco de la imagen del producto, el tratamiento del precio, la ubicación del QR y los mosaicos del tablero. Mantenga los códigos QR lo suficientemente grandes y claros para escanearlos. incluir thirdparty/qrcode.min.js, scripts de traducción y la carpeta de comercio compartida completa cargada por la página elegida.
Reutilice el estado comercial y los controles que ya utilizan las bases SSN, Stream Deck, Event Flow y OBS opcionales. Preservar el estado seleccionado/oculto/programado. Mantenga los detalles de la sesión, los mensajes de configuración, las credenciales de publicación y los controles del operador fuera del gráfico de audiencia. Una actualización exitosa no establece si OBS está activo o muestra esa fuente.
Copie este mensaje de IA
Entregue a la IA sus archivos fuente copiados y el arte de referencia. Reemplace los detalles entre corchetes. Mantenga las instrucciones de seguridad de entrada en el mensaje.
Mostrar el mensaje completo
Customize my-products.html, copied from monetization.html.
Design: [describe the look or attach a reference].
Colors/fonts/assets: [supply hex colors and local filenames].
OBS canvas and placement: [size and position].
Restyle [monetization.html / commerce-board.html] as [design]. Preserve the shared commerce state/control API, product selection, visibility/scheduling, prices, destinations, QR behavior, and stale/empty states. Keep configuration and credentials out of the audience display. Do not create a second local product catalog or infer OBS visibility from a received command.
Read docs/event-reference.html for incoming fields and
docs/overlay-customization-guide.html for local setup and safe rendering.
Keep the existing session/password handling, labels, server routes, query
parameters, URL fragments, and relative asset paths. Use classic scripts
compatible with Chrome 80. Keep executable dependencies packaged locally.
Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.
Make the edited overlay work directly from disk using a file:/// URL,
without requiring a local web server.
Return the edited files, any additional assets, exact local browser/OBS
setup instructions using placeholders, and the specific tests performed.
Do not put my private session link or credentials into a public example.Pruebe este tipo de superposición
Utilice primero una configuración de prueba o vista previa. el guía de mensajes de prueba explica cómo enviar cargas útiles ficticias a través de SSN; una prueba enviada a su sesión de producción puede activar sus automatizaciones existentes.
- Para los tableros, utilice commerce-board.html?demo para inspeccionar datos ficticios. Eliminar demostración para una pantalla conectada.
- Utilice los controles de producto/tablero existentes para seleccionar, ocultar y cambiar elementos. Verifique títulos largos, imágenes faltantes, formato de precios y escaneos QR desde una vista previa del tamaño de OBS.
- Verifique los estados vacío y desconectado y una recarga. Pruebe el destino del producto público configurado sin publicar un nuevo catálogo solo para cambiar el estilo de la superposición.
Ejecute también el comprobaciones de representación de entrada contra las rutas de renderizado que cambiaste. Después de guardar las ediciones, actualice la fuente del navegador OBS entre ensayos y repita la interacción visible. Las vistas previas del navegador no establecen captura en vivo ni comportamiento OBS.
Más referencias: Configuración de comercio · Controles de productos compartidos · Tableros y ventas · Referencia de eventos · Solución de problemas de configuración local.