Working with React

Script import

The following OnSched.js script tag should be included in the HEAD of the index.html file within your public folder.

<!--Include OnSched.js css and javascript files-->
<script type="text/javascript" src="https://js.onsched.com/1.0.0/"></script>

Including OnSched.js code

To initialize OnSched.js with your client credentials and gather a token to execute other elements, begin by creating a React useEffect with an empty array as the second argument. This will have the same effect as a componentDidMount function in a class based component.

import React, { useEffect } from 'react'

const TestOnSchedJs = () => {
  // Write OnSched.js code in useEffect (or componentDidMount)
  // with empty array as second argument to ensure that 
  // it only runs once

  useEffect(() => {
    // Your client credentials
    var your_client_id = "<<clientId>>";

    // Initialize OnSched.js with clientId and environment (sbox or live)
    var onsched = window.OnSched(your_client_id, "sbox");

    // Get instance of elements to use for creating elements
    var elements = onsched.elements();

    // Initialize availability parameters with serviceId (required), and
    // any additional optional parameters
    var availabilityParams = { locationId: '', serviceId: 106078, roundRobin: 1 };

    // Include any additional options (optional)
    var availabilityOptions = {};
    
    // Create the availability element
    var availability = elements.create("availability", availabilityParams, availabilityOptions);
    
    // Mount the element (which triggers the API)
    availability.mount("availability");
  }, [])

  return (
    <div id="availability"></div>
  )
}

export default TestOnSchedJs

Ensure that your HTML DIV elements are in the return function with the correct IDs, then continue to use OnSched.js as described!