1

I'm trying to use a script from Tock in my Gatsby website which converts a "Reserve" button into a widget.

I have tried many different ways suggested here to make this work including the methods listed in this answer.

If I put the script in the component as shown below or in html.js, the code works but only if I refresh the page. If I navigate to the page from another page, it doesn't work.

If I place in an external JS file I get compiling errors.

What I thought should be simple is providing incredibly challenging so any help is greatly appreciated! Thanks

class ReserveTock extends React.Component {

    render() {
        return (
            <>
                <script dangerouslySetInnerHTML={{
                __html:`
                !function(t,o,c,k){if(!t.tock){var e=t.tock=function(){e.callMethod?
                e.callMethod.apply(e,arguments):e.queue.push(arguments)};t._tock||(t._tock=e),
                e.push=e,e.loaded=!0,e.version='1.0',e.queue=[];var f=o.createElement(c);f.async=!0,
                f.src=k;var g=o.getElementsByTagName(c)[0];g.parentNode.insertBefore(f,g)}}(
                window,document,'script','https://www.exploretock.com/tock.js');
                tock('init', 'websitename');
                `}}
                />

                <a className = {"btn " + this.props.buttonColor + ' ' + this.props.className}
                   href="https://www.exploretock.com/websitename"
                   data-tock-reserve="true"
                   data-tock-experience={this.props.experienceTockId}
                >
                    Reserve
                </a>
            </>
        )
    }
}
fxfuture
  • 1,910
  • 3
  • 26
  • 40
  • @ksav unfortunately no, I've updated my question to clarify – fxfuture Feb 09 '20 at 18:53
  • theres a race condition somewhere. probably not working coming from another "page" cuz it's already loaded and was too early and when it works when you refresh it's cuz you're looking at the component already so it actually has somewhere to go. – Deryck Feb 09 '20 at 18:59

1 Answers1

0

In my experience: third party scripts that you load into your page need to go as high up in the HTML as possible. So put the script tag directly in the HTML head, don't inject it with JavaScript :)

Sydney Y
  • 2,912
  • 3
  • 9
  • 15