Как встроить виджет телеграм-чата в react приложение?

Question

[bitwheeze]

Подскажите пожалуйста по такому вопросу.

По этой ссылке можно получить код скрипта для вставки в html страницу. Типа такого

<script async src="https://telegram.org/js/telegram-widget.js?15" data-telegram-discussion="444345" data-comments-limit="5" data-color="29B127" data-dark-color="72E350"></script>

У меня react/next.js приложение с bootstrap. Страница вида

<Container>
<Row>
   <Col>
        <MainApp />
   </Col>
   <Col>
        {/* Тут хочу вставить виджет чата */}
   </Col>
</Row>
</Container>

Я попробовал тупо вставить script между <Col></Col>, но получаю ошибку

Did not expect server HTML to contain a <iframe> in <div>.

Видимо скрипт пытается добавить iframe тэг и ректу это не нравится либо какой то блок стоит.

Чувствую, что делаю что то неправильное, но как правильно сделать не пойму. На сайте примеров нету.

Спасибо

Comments

[n1ksON]

Попробуйте вставить script через useEffect
https://stackoverflow.com/questions/34424845/addin...

Answer 1

[Иван Ларцов]

На странице настроек виджета https://core.telegram.org/widgets/post
Я просто скопировал результирующий iframe из DOM структуры сайта и вставил его просто в разметку react элемента