Add Javascript script in Gatsby site

Question

I'm trying to add the Bookalet third party widget to my Gatsby index page. I have tried just including in the page and via Helmet. Both methods aren't working sadly. Any ideas?

The script in question:

<div><script src="https://widgets.bookalet.co.uk/publish.js" data-bookalet="da8ebdf5-2f4a-47cb-8c92-f84032b16f5b" data-property="17263" data-monthcount="1"></script></div>

Example 1: simply placing in the page:

          <TextBlock>
        <Heading>
          <h2>Availability</h2>
        </Heading>
        <RichText>
          You can check availabilty below. Please note the minimum booking
          is seven nights. Short breaks may be considered out of season,
          please contact us.
        </RichText>
        <Spacer></Spacer>
        <div>
          <script
            src="https://widgets.bookalet.co.uk/publish.js"
            data-bookalet="da8ebdf5-2f4a-47cb-8c92-f84032b16f5b"
            data-property="17263"
            data-monthcount="1"
          ></script>
        </div>
      </TextBlock>

Example 2: using helmet to add into the page.

            <Helmet>
          <script
            src="https://widgets.bookalet.co.uk/publish.js"
            data-bookalet="da8ebdf5-2f4a-47cb-8c92-f84032b16f5b"
            data-property="17263"
            data-monthcount="1"
          ></script>
        </Helmet>

Did you read the documentation? Using React Helmet should work, but you will likely have to wait until the component has mounted to call the external library's methods. You can use useEffect or componentDidMount — Robin Métral
– Robin Métral, Commented Sep 11, 2020 at 12:09

Ferran Buireu · Accepted Answer · 2020-09-12 11:28:55Z

1

I've used the <Helmet> approach and it's working. Here's the snippet:

import React from 'react';
import Helmet from 'react-helmet';

const Index = props => {
  return <Layout>
    <Helmet>
      <script src="https://widgets.bookalet.co.uk/publish.js"
              data-bookalet="da8ebdf5-2f4a-47cb-8c92-f84032b16f5b"
              data-property="17263"
              data-monthcount="1"/>
    </Helmet>
    <h1>Hi people</h1>
  </Layout>;
};


export default Index;

A screenshot of the 200 response (success):

answered Sep 12, 2020 at 11:28

Ferran Buireu

29.4k7 gold badges48 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add Javascript script in Gatsby site

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related