Adding HTML
  • 25 Mar 2024
  • 1 Minute to read
  • Dark
    Light
  • PDF

Adding HTML

  • Dark
    Light
  • PDF

Article summary

HTML provides the basic structure of the homepages and supporting pages on the bookingtimes platform. We use the TinyMCE editor to add our HTML code.

You can add HTML by navigating to the page you wish to edit, such as the home page, service pagecustom page or suburb/location page.

When adding HTML code, you do not need to wrap it in doctype, html, or head tags as the system automatically adds these. Just add your body code directly.

Tip

To test your pages, you will need to logout to view the site from public view. You can also have the site open in an incognito window to create a separate public session.

Adding HTML to the homepage

Steps

  1. Navigate to SetupWebsite ContentEdit Website to open the drag and drop editor
  2. Click Edit on the Toolbar
  3. On the right of the Toolbar, click Edit HTML </> 


  1. Add your HTML here and click Okay
  2. Click Save on the Toolbar

Adding HTML to service pages, custom pages and suburb pages

Steps

  1. Service and course pages are located under SetupBookingsServices
  2. Custom pages are located under Setup > Website Content > Custom Pages
  3. Suburb/location pages are located under Setup > Bookings > Locations > select Location > Suburbs
  4. Click on the relevant service/custom page/suburb page
  5. Click on the Publish tab to open TinyMCE
  6. Click on the sourcecode <> icon to open the HTML Editor
  7. Add your HTML here and click save

image.png


HTML best practice

You may code the page as needed for your design, however, we generally break down our pages into well-defined sections, and wrap our sections in the following structure.

Note: It's important to use class names in your HTML as global CSS styling is not recommended, and you should always use class names to refer to elements such as div, p, h2, table, modal, a etc.:

<!------Section Name------>
<div class="section-classname full-width">
    //Full-width element with well defined classname, to be used for CSS Styling
    <div class="container">
        //Container element which will contain elements to the middle of the screen
        <p>Lorem ipsum dolor</p>
    </div>
</div>
<!-------/Section Name----->

You should try and follow good HTML practice as discussed here: https://www.w3schools.com/html/html5_syntax.asp and validate your HTML here: https://validator.w3.org/


Was this article helpful?

What's Next