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:

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

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() {
      targetDivId: "TTE-UUID",
      uuid: < Insert UUID here >

You can find the uuid to use in "Online Booking" > "Widgets" > "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.