10to8 works with React applications. This guide outlines the steps you need to take to embed your 10to8 booking back into your React application. 


How to embed your booking widget

1 -  Get your HTML Widget code by heading to Online Booking > HTML Widget in your 10to8 account.


2 -  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>


3 -  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" > "Widgets" > "HTM Widget" by logging in to your account.


If you are in need of any further guidance, please get in touch at help@10to8.com