文章/答案/技术大牛

发布

社区首页 >问答首页 >使用头盔嵌入第三方聊天小部件

问使用头盔嵌入第三方聊天小部件
EN

Stack Overflow用户

提问于 2020-03-22 06:58:01

回答 2查看 323关注 0票数 1

我正在尝试在我的Gatsby站点上嵌入一个tlk.io聊天小部件，因为似乎没有类似的插件存在。我正在使用react-helmet插件来嵌入这个脚本，但是我的页面上什么也没有显示。你可以在下面找到我的代码。

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

jsx

gatsby

react-helmet

javascript

reactjs

回答 2

Stack Overflow用户

发布于 2020-03-22 18:37:48

根据Gatsby documentation about Helmet的说法，React Helmet <Helmet> component允许您插入一些代码，这些代码将在编译后放置在<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

我已经在我的本地机器上测试过了，它工作得很好，如下面的截图所示：

票数 1

Stack Overflow用户

发布于 2020-03-22 07:30:12

React Helmet是一个插件，可以将它的孩子添加到你网页的head标签中。您不能将div元素添加到head，而是添加到网站的body内部。只要把div放在头盔外面的某个地方，你就会好起来的。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60794195

复制

相似问题

问使用头盔嵌入第三方聊天小部件
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用头盔嵌入第三方聊天小部件EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用头盔嵌入第三方聊天小部件
EN