Встраивание стороннего виджета чата с помощью шлема - PullRequest
Новая
       44

Встраивание стороннего виджета чата с помощью шлема

1 голос
/ 22 марта 2020

Я пытаюсь встроить виджет чата tlk.io в мой сайт Gatsby, поскольку подобных плагинов не существует. Я использую плагин react-helmet для встраивания этого скрипта, но на моей странице ничего не отображается. Мой код вы можете найти ниже.

Я думаю, что это связано с тем, что скрипт использует этот атрибут data-channel в теге div, но я понятия не имею, что с этим делать. 

import React from "react"
import Helmet from "react-helmet"

import Layout from "../components/layout"
import SEO from "../components/seo"

const LivePage = () => (
    <Layout>
      <SEO title="Live" />
      <Helmet>
        <div id="tlkio"
          data-channel="hey"
          style={{width:'auto',
          height:400}}></div>
        <script src="http://tlk.io/embed.js" type="text/javascript"></script>
      </Helmet>
    </Layout>
)

export default LivePage

Ответы [ 2 ]

1 голос
/ 22 марта 2020

Согласно документации Gatsby о шлеме и компоненте React Helmet <Helmet> позволяет вставить несколько кодов, которые будут размещены после компиляции, внутри тега <head>.

Итак, в вашем коде вам нужно удалить тег <div>, и он будет работать как шарм. 

import React from "react"
import Helmet from "react-helmet"

import Layout from "../components/layout"
import SEO from "../components/seo"

const LivePage = () => (
    <Layout>
      <SEO title="Live" />
      <Helmet>
        <script src="https://tlk.io/embed.js" type="text/javascript"/>
      </Helmet>
    </Layout>
)

export default LivePage

Я проверил на своей локальной машине, и он отлично работает как это показано на следующем снимке экрана:

enter image description here

0 голосов
/ 22 марта 2020

React Helmet - это плагин, который добавляет своих детей в тег head вашей веб-страницы. Вы не можете добавить элемент div к голове, но вместо этого внутри тела сайта. Просто поместите этот div где-нибудь за пределами Шлема, и все будет в порядке.

...