seo Question posted in
Some basic information to get you started with this can be found here.

Embedding third party chat widget using Helmet – SEO

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
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search