Documentación del SDK de JavaScript para reproductor de video con chat en vivo de CrossTalk
Esta documentación le ayuda a añadir un reproductor de video con chat en vivo a su página web con el SDK de JavaScript de CrossTalk.
Importar el SDK
Añada la siguiente etiqueta script a su archivo HTML. Puede agregarla en la sección
<head> o <body> de su archivo HTML.
<script src="https://unpkg.com/crosstalk-comments-js"></script>Añadir el div de CrossTalk donde desea mostrar el reproductor de video y el chat en vivo
Puede agregar estilo y clases a este div para personalizar su posicionamiento y márgenes dentro de su página. El contenido interior no se verá afectado por su CSS.
<div data-crosstalk-video-player data-wp="nombre-de-su-propiedad-web" data-yt-id="id_video_youtube"></div>
Regístrese para obtener una
cuenta de CrossTalk
y obtenga su nombre de propiedad web único para comenzar a interactuar con su audiencia
a través del chat en vivo de su transmisión de video.
Lista de parámetros para el reproductor de video con chat en vivo de CrossTalk:
| Nombre de la variable | Definición | Valores esperados |
|---|---|---|
data-wp |
Su nombre de propiedad web único. Puede crear propiedades web desde el Panel de control. | Ejemplo: 'crosstalkDemo'. Se espera un valor de tipo cadena. |
data-page-id |
Un PageID que identifica de manera única una página en su propiedad web. Si tiene un sistema
de CMS, el slug de un artículo sería un buen PageID.
Si integra CrossTalk en su aplicación, compartir el PageID garantizará que se cargue el mismo chat en vivo si la misma página se abre en su sitio web o aplicación. Envíe ya sea pageID o url. Si se envían ambos,
pageID tiene prioridad.
|
Ejemplo: 'some-Slug-123'. Se espera un valor de tipo cadena. |
data-url |
Si no maneja PageIDs, enviar la URL canónica también funciona. Esto
cargará dinámicamente el chat en vivo basado en la URL del sitio web. Envíe ya sea pageID o url. Si se envían ambos,
pageID tiene prioridad.
|
`${window.location.origin}${window.location.pathname}`
|
data-theme |
Indica si el widget debe cargarse en modo claro u oscuro. Si su sitio web admite temas dinámicos, pase esta variable al widget para que se integre perfectamente. |
light o dark. Se espera un valor de tipo cadena.
|
data-src |
URL de origen del video. | Se espera un valor de tipo cadena. |
data-src-type |
Tipo MIME del video (opcional). | Se espera un valor de tipo cadena. |
data-yt-id |
ID del video para YouTube (después de watch?v=) o el ID del video de su código de inserción. | Se espera un valor de tipo cadena. |
data-vimeo-id |
ID del video para Vimeo. | Se espera un valor de tipo cadena. |
data-rt-id |
ID del video para RuTube (después de video/). | Se espera un valor de tipo cadena. |
data-vk-id |
ID del video para VK Video (formato video-000000_999999). | Se espera un valor de tipo cadena. |
Utilice la propiedad web de ejemplo
crosstalkDemo para probar el widget de inmediato.
Añada el siguiente código a su página web para integrar el reproductor de video con chat en vivo:
<script src="https://unpkg.com/crosstalk-comments-js"></script><div data-crosstalk-chat data-wp="crosstalkDemo" data-page-id="test" data-theme="light"></div>
Utilice PageID con los IDs de video para facilitar el seguimiento de la participación del usuario. Ejemplo: live_tv_es para una transmisión en vivo en español.