Обсуждение на вашем сайте
Вставьте код в страницу — на месте контейнера появится блок обсуждения. Всё остальное живёт внутри нашего кадра: ваша вёрстка, стили и скрипты остаются как были.
Проверьте на своей странице
Готовый код
<div data-vpvd-thread data-url="https://example.org/article" data-lang="ru" data-theme="auto"> <a href="https://vpvd.io/embed/ru?url=https%3A%2F%2Fexample.org%2Farticle&theme=auto" target="_blank" rel="noopener">Открыть обсуждение на vpvd</a> </div> <script src="https://vpvd.io/embed.js" async referrerpolicy="no-referrer"></script>
Что увидят читатели
Куда это вставить
- Статика и свои шаблоны
- WordPress
- Tilda
- Next.js, Nuxt, React
<div data-vpvd-thread data-url="https://example.org/article" data-lang="ru" data-theme="auto"> <a href="https://vpvd.io/embed/ru?url=https%3A%2F%2Fexample.org%2Farticle&theme=auto" target="_blank" rel="noopener">Открыть обсуждение на 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="ru" data-theme="auto">
<a href="https://vpvd.io/embed/ru?url=https%3A%2F%2Fexample.org%2Farticle&theme=auto" target="_blank" rel="noopener">Открыть обсуждение на vpvd</a>
</div>
);
} Страницы, которые меняются без перезагрузки
// after every client-side transition: window.vpvd.refresh();
Тема и шрифт
Атрибуты
data-url- адрес страницы, которую обсуждают. Обсуждение привязано к нему: у всех читателей адрес должен совпадать.
data-lang- язык блока — один из языков в списке ниже. Любое другое значение даёт 404: кадра на других языках нет.
en— Englishzh-Hans— 简体中文es— Españolar— العربيةru— Русскийvi— Tiếng Việttr— Türkçefa— فارسی
data-theme- тема блока: авто (как на вашей странице), светлая или тёмная.
data-height- высота, которую мы резервируем под блок, пока кадр не сообщит свою, в пикселях, например 200. Дальше блок подстраивается под настоящую высоту; значение живёт в границах 120–2000. Задайте её, если на вашей странице заметен прыжок: по умолчанию зарезервировано 160 пикселей.
Когда появился комментарий
Сколько комментариев — для списка
Чего код не делает
Проверить, что встроилось
- кадр на месте: загрузчик заменил им ссылку-запасной путь в контейнере
- загрузчик отработал: значение ниже определено, а версия — 1
window.vpvd - кадр сообщил свою высоту: число больше не равно зарезервированным 160, и блок выровнялся по ветке
// 1
document.querySelector('iframe[data-vpvd-frame]')
// 2
window.vpvd.version
// 3
document.querySelector('iframe[data-vpvd-frame]').style.height Строгая политика на вашем сайте
script-src— оттуда приходит скрипт блокаframe-src— в кадре показывается сама веткаchild-src→frame-src— если она задана на вашем сайте, кадры подчиняются ей, а не общей директиве: значение из другого источника молча блокирует все кадры страницы, включая наш. Назовите наш адрес и здесь — или уберите её.