CODEWITHSUNDEEP
javascriptreactjsjsxgatsbyreact-helmet
sug48
sug48

Reputation: 11

Embedding third party chat widget using Helmet

I'm trying to embed a tlk.io chat widget on my Gatsby site since no similar plugins seem to exist. I'm using the react-helmet plugin to embed that script, but nothing shows up on my page. My code you can find below.

I think it has to do with the fact that the script relies on this data-channel attribute in the div tag, but I have no idea what to do with regards to that.

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

Upvotes: 1

Views: 663

Answers (2)

Ferran Buireu
Ferran Buireu

Reputation: 29320

According to Gatsby documentation about Helmet, and React Helmet <Helmet> component allows you to insert a few code that will be placed after compilation inside the <head> tag.

So, in your code, you need to remove the <div> tag and it will work like a charm.

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

I've tested in my local machine and it works perfectly as it is shown in the following screenshot:

enter image description here

Upvotes: 1

Mario Nikolaus
Mario Nikolaus

Reputation: 2406

React Helmet is a plugin that adds its children to head tag of your webpage. You cannot add div element to head, but instead inside body of the website. Just put that div somewhere outside Helmet and you should be fine.

Upvotes: 0

Related Questions