Our online booking widget works perfectly inside a React web application, but the steps are slightly different to a vanilla HTML/Javascript webpage.

Firstly, include the 10to8 JS <script> tag in your <head> tag, like this:

<head>
  ...
  <script src="https://d3saea0ftg7bjt.cloudfront.net/embed/js/embed.min.js"></script>
  ...
</head>

Next, you need your render() method return a <div> that our JS code can bind to. And finally, your component's componentDidMount() method should call into our JS code to create the component. A minimal version of this would look like:

class MyComponent extends React.Component {
  render() {
    return (
      <div id="TTE-UUID" />
    );
  }

  componentDidMount() {
    window.TTE.init({
      targetDivId: "TTE-UUID",
      uuid: < Insert UUID here >
    });
  }
}

You can find the UUID to use in "Online Booking" > "HTM Widget" by logging in to your account.

Let us know how you get on! We use React a lot at 10to8, and love to see how others mash up the booking controls.

Did this answer your question?