Skip to content

Site Builder

Build Your Site

Site Builder hosts static websites: HTML, CSS, JavaScript, images and fonts. There is no server code, so everything dynamic, like your service list and bookings, happens in the browser through the Services API.

Site rules

  • Put an index.html at the top of your folder. It is your home page and the upload fails without it.
  • Use relative links such as ./checkout.html or ./styles.css. Your site is first served under a preview path, so links that start with / can break.
  • Keep file and folder names simple: letters, numbers, dashes and dots. Avoid .. and backslashes.
  • A path that does not exist falls back to your root index.html.
  • Only use allowed file types. See Publish your site for the full list.

No server-side code

PHP, Node.js servers and .env files do not run on Site Builder. Keep secrets out of your files, because everything you upload is public.

Page structure

A simple booking site needs two pages and one script.

FilePurpose
index.htmlYour brand, a short pitch and a grid that lists your services
checkout.htmlA form where a customer books the service they picked
app.jsLoads services, renders the grid and sends the booking

Mark each page with a data-page attribute so one script can tell them apart:

html
<body data-page="home">
  <section id="services">
    <p id="service-status">Loading services...</p>
    <div id="service-grid" hidden></div>
  </section>
  <script type="module" src="./app.js"></script>
</body>
js
function initializePage() {
  const page = document.body.dataset.page;

  if (page === "home") {
    initializeServiceCatalog();
  }

  if (page === "checkout") {
    initializeCheckout();
  }
}

initializePage();

Saving the ZIP code

A ZIP form on the home page makes the checkout faster. Save the value in localStorage and fill it in on the checkout page:

js
const STORAGE_KEY = "postalCode";

function storePostalCode(postalCode) {
  try {
    window.localStorage.setItem(STORAGE_KEY, postalCode);
  } catch {
    return;
  }
}

function getStoredPostalCode() {
  try {
    return window.localStorage.getItem(STORAGE_KEY) || "";
  } catch {
    return "";
  }
}

Next, create an API key so your site can talk to ArrayQ.