Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to add <script> inside the body? #3083

Closed
ziyafenn opened this issue Nov 30, 2017 · 4 comments
Closed

How to add <script> inside the body? #3083

ziyafenn opened this issue Nov 30, 2017 · 4 comments
Labels
type: question or discussion Issue discussing or asking a question about Gatsby

Comments

@ziyafenn
Copy link

ziyafenn commented Nov 30, 2017

Hi guys! Sometimes i need to add some js scripts inside <body> but i have totally no idea how i could do that! Adding it to head it's easy with Helmet, but what about body?

Thanks!

@markmichon
Copy link
Contributor

Have a look at the docs for customizing html.js. It should do what you're asking.

@ziyafenn
Copy link
Author

ziyafenn commented Nov 30, 2017

@markmichon thanks!
So do i have to just add this

;<div
  key={`body`}
  id="___gatsby"
  dangerouslySetInnerHTML={{ __html: this.props.body }}
/>

and replace this.props.body with <script>myCode</script> ?
Or just add <script> inside body as i would normally do?

@markmichon
Copy link
Contributor

markmichon commented Nov 30, 2017

Take a look at the file, as mentioned in the doc link. Looks something like this:

import React from "react"

let stylesStr
if (process.env.NODE_ENV === `production`) {
  try {
    stylesStr = require(`!raw-loader!../public/styles.css`)
  } catch (e) {
    console.log(e)
  }
}

module.exports = class HTML extends React.Component {
  render() {
    let css
    if (process.env.NODE_ENV === `production`) {
      css = (
        <style
          id="gatsby-inlined-css"
          dangerouslySetInnerHTML={{ __html: stylesStr }}
        />
      )
    }
    return (
      <html {...this.props.htmlAttributes}>
        <head>
          <meta charSet="utf-8" />
          <meta httpEquiv="x-ua-compatible" content="ie=edge" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          {this.props.headComponents}
          {css}
        </head>
        <body {...this.props.bodyAttributes}>
          {this.props.preBodyComponents}
          <div
            key={`body`}
            id="___gatsby"
            dangerouslySetInnerHTML={{ __html: this.props.body }}
          />
          {this.props.postBodyComponents}
        </body>
      </html>
    )
  }
}

Insert script where you'd normally insert it in the html structure. I suspect right before the body closes is what you're looking for.

@ziyafenn
Copy link
Author

Thanks a lot!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: question or discussion Issue discussing or asking a question about Gatsby
Projects
None yet
Development

No branches or pull requests

3 participants