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 >
    });
  }
}


3.1 (for React v16.8 and above)

import { useEffect } from 'react';

const MyComponent = () => {
    return (
        <div id="TTE-UUID" />
    );
}

useEffect(() => {
    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