Portfolio

Portfolio items are photos the business publishes: haircuts, tattoos, treatments. Each item belongs to a location, and optionally to a staff member and a service. The business defines the categories.

Ready-made section

<link rel="stylesheet" href="https://zakazi.tempact.app/public-works.css">
<!-- needed only if the theme has its own works.html template -->
<script src="https://zakazi.tempact.app/public-content-blocks.js" defer></script>
<script src="https://zakazi.tempact.app/public-works.js" defer></script>

<div id="portfolio" data-public-works></div>

<script>
  addEventListener('DOMContentLoaded', () =>
    PublicWorks.mount(document.getElementById('portfolio'), {
      apiBase: 'https://app.tempact.app',
      company: 'your-business',
      location: '',
      worker: '',
      category: '',
      bookingUrl: 'https://zakazi.tempact.app/booking/?company=your-business'
    }));
</script>

• Categories appear as filter buttons.
• Clicking an item opens an accessible dialog with the large image and a Book button. The button leads to bookingUrl with that item’s location.
• An empty value or all means no filter.

Hosted page

Without any code on the site, you can link to the hosted gallery page:

https://zakazi.tempact.app/works/?company=your-business&location=&worker=&category=

JSON

GET https://app.tempact.app/public/v1/companies/{slug}/works?location=&worker=&category=

All filters are optional. The response is cached for 60 seconds. If the business has public content turned off, you get 404.

schemaVersion   "1.0"
company         business slug
theme           id, version, rendererKey, package (css, template), template = the theme's works.html, if present
categories[]    id, name (only categories with published items)
works[]         id, title, alt, description,
                category {id, name}, location {id, name},
                worker {id, name} or null, service {id, name} or null,
                image {large, thumb, width, height}

Images are at …/works/{id}/large.webp and …/works/{id}/thumb.webp. Always use the alt from the response. Use the thumbnail in grids and the large image only in the enlarged view.