Debate en tu sitio
Pega el código en la página y el bloque de debate aparecerá donde esté su contenedor. Todo lo demás vive dentro de nuestro marco: tu marcado, tus estilos y tus scripts no cambian.
Pruébalo en tu página
Código listo
<div data-vpvd-thread data-url="https://example.org/article" data-lang="es" data-theme="auto"> <a href="https://vpvd.io/embed/es?url=https%3A%2F%2Fexample.org%2Farticle&theme=auto" target="_blank" rel="noopener">Abrir el debate en vpvd</a> </div> <script src="https://vpvd.io/embed.js" async referrerpolicy="no-referrer"></script>
Lo que verán tus lectores
Dónde pegarlo
- Sitios estáticos y plantillas propias
- WordPress
- Tilda
- Next.js, Nuxt, React
<div data-vpvd-thread data-url="https://example.org/article" data-lang="es" data-theme="auto"> <a href="https://vpvd.io/embed/es?url=https%3A%2F%2Fexample.org%2Farticle&theme=auto" target="_blank" rel="noopener">Abrir el debate en vpvd</a> </div> <script src="https://vpvd.io/embed.js" async referrerpolicy="no-referrer"></script>
Next.js, Nuxt, React
// components/VpvdThread.tsx — one page's discussion. Load the script once in the layout:
// <Script src="https://vpvd.io/embed.js" strategy="afterInteractive" />
'use client';
import { useEffect, useRef } from 'react';
export default function VpvdThread() {
const box = useRef<HTMLDivElement>(null);
useEffect(() => {
const el = box.current;
const vpvd = (window as any).vpvd;
if (el && vpvd) vpvd.mount(el);
return () => { if (el && vpvd) vpvd.destroy(el); };
}, []);
return (
<div ref={box} data-vpvd-thread data-url="https://example.org/article" data-lang="es" data-theme="auto">
<a href="https://vpvd.io/embed/es?url=https%3A%2F%2Fexample.org%2Farticle&theme=auto" target="_blank" rel="noopener">Abrir el debate en vpvd</a>
</div>
);
} Páginas que cambian sin recargarse
// after every client-side transition: window.vpvd.refresh();
Tema y tipografía
Atributos
data-url- la dirección de la página que se debate. El debate está atado a ella, así que debe ser la misma para todos los lectores.
data-lang- el idioma del bloque: uno de los de la lista de abajo. Cualquier otro valor da un 404, porque el marco no existe en otros idiomas.
en— Englishzh-Hans— 简体中文es— Españolar— العربيةru— Русскийvi— Tiếng Việttr— Türkçefa— فارسی
data-theme- tema del bloque: auto (como en tu página), claro u oscuro.
data-height- la altura que reservamos para el bloque hasta que el marco informe de la suya, en píxeles, por ejemplo 200. Después el bloque se ajusta a la altura real; el valor se mantiene entre 120 y 2000. Ponlo si el salto se nota en tu página: por defecto reservamos 160 píxeles.
Cuando aparece un comentario
Cuántos comentarios, para una lista
Lo que el código no hace
Comprobar que se ha integrado
- el marco está en su sitio: el cargador ha sustituido con él el enlace de reserva del contenedor
- el cargador se ha ejecutado: el valor de abajo está definido y su versión es 1
window.vpvd - el marco ha informado de su altura: el número ya no es el reservado, 160, y el bloque se alinea con el hilo
// 1
document.querySelector('iframe[data-vpvd-frame]')
// 2
window.vpvd.version
// 3
document.querySelector('iframe[data-vpvd-frame]').style.height Política estricta en tu sitio
script-src— de ahí viene el script del bloqueframe-src— en el marco se muestra el propio hilochild-src→frame-src— si tu política la fija, los marcos la obedecen a ella y no a la directiva general: un valor de otro origen bloquea en silencio todos los marcos de la página, incluido el nuestro. Nombra aquí también nuestra dirección, o quita la directiva.