API-guide: Bygg din egen bookingwidget

Vårt API lar deg bygge tilpassede bookingløsninger som passer perfekt inn i din eksisterende nettside eller app. I denne guiden viser vi hvordan du bygger en enkel bookingwidget fra scratch.

Autentisering

Første steg er å autentisere API-forespørslene dine. Du får en API-nøkkel fra dashboardet som må sendes med i Authorization-headeren.

const headers = {
  'Authorization': 'Bearer YOUR_API_KEY',
  'Content-Type': 'application/json'
};

Hente tilgjengelige ressurser

Start med å hente listen over ressurser kunden kan booke.

const response = await fetch('https://api.emberbooking.com/v1/resources', {
  headers
});
const resources = await response.json();

Sjekke tilgjengelighet

For å vise ledige tider, spør APIet om tilgjengelige slots for en gitt ressurs og dato.

const availabilityResponse = await fetch(
  'https://api.emberbooking.com/v1/resources/' + resourceId + '/availability?date=2025-02-10',
  { headers }
);
const slots = await availabilityResponse.json();

Opprette en booking

Når kunden har valgt tidspunkt, opprett en booking ved å sende en POST-forespørsel.

const bookingData = {
  resourceId: 42,
  startTime: '2025-02-10T15:00:00Z',
  duration: 90,
  customer: {
    name: 'Ola Nordmann',
    email: 'ola@example.com',
    phone: '+4798765432'
  }
};

const bookingResponse = await fetch('https://api.emberbooking.com/v1/bookings', {
  method: 'POST',
  headers,
  body: JSON.stringify(bookingData)
});

const booking = await bookingResponse.json();

Håndtere betalingsflyt

APIet returnerer en paymentUrl som du kan redirecte kunden til for å fullføre betalingen. Alternativt kan du integrere betalingen direkte i din widget med vår Payment API.

Fullstendig widget-eksempel

Her er en komplett React-komponent som implementerer en enkel bookingwidget:

function BookingWidget(props) {
  const apiKey = props.apiKey;
  const resourceId = props.resourceId;
  const [slots, setSlots] = useState([]);
  const [selectedSlot, setSelectedSlot] = useState(null);

  useEffect(() => {
    fetchAvailability();
  }, [resourceId]);

  async function fetchAvailability() {
    const response = await fetch(
      'https://api.emberbooking.com/v1/resources/' + resourceId + '/availability',
      { headers: { 'Authorization': 'Bearer ' + apiKey } }
    );
    const data = await response.json();
    setSlots(data.slots);
  }

  async function handleBooking() {
    // Implementation here
  }

  return (
    <div className="booking-widget">
      {slots.map(slot => (
        <button key={slot.id} onClick={() => setSelectedSlot(slot)}>
          {slot.startTime}
        </button>
      ))}
    </div>
  );
}

Med denne grunnstrukturen kan du bygge videre med din egen design, validering og feilhåndtering. APIet gir deg full fleksibilitet til å lage akkurat den bookingopplevelsen du ønsker.