Webknecht
← Terug naar Integraties

5 handige Salonized code snippets voor je OnePage website

• 17 min leestijd
5 handige Salonized code snippets voor je OnePage website

Wil je meer uit je Salonized integratie halen? Met deze handige code snippets kun je je OnePage website uitbreiden met custom functionaliteit. Kopieer, plak en pas aan naar je eigen wensen!

Hoe gebruik je deze snippets?

Alle snippets hieronder kun je direct in je OnePage website plakken:

  1. Ga naar je OnePage editor
  2. Voeg een Custom Code blok toe
  3. Open het element en plak de snippet in het vak
  4. Pas de locationId of serviceId aan (zie onder)
  5. Sla op en bekijk het resultaat!

Let op: Vergeet niet je eigen locationId in te vullen. Hier lees je hoe je die vindt.

Snippet 1: Diensten tonen met prijzen en beschrijving

Laat alle diensten van je salon automatisch zien, inclusief prijzen en duur. Perfect voor een overzichtelijke prijslijst die altijd up-to-date blijft.

<!-- Copyright (c) webknecht.nl - Vrij te gebruiken met bronvermelding -->

<div id="salonized-diensten">
  <p style="color: #999;">Diensten laden...</p>
</div>

<style>
#salonized-diensten { max-width: 800px; }
.salon-category { margin: 30px 0; }
.salon-category-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #000;
}
.salon-service {
  padding: 20px;
  margin: 10px 0;
  background: #f9f9f9;
  border-radius: 8px;
  border-left: 4px solid #000;
}
.salon-service-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
.salon-service-price {
  font-size: 22px;
  font-weight: 700;
  color: #000;
  margin-bottom: 8px;
}
.salon-service-duration {
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
}
.salon-service-desc {
  color: #555;
  font-size: 15px;
  line-height: 1.5;
}
</style>

<script>
(async function() {
  const locationId = "VWpMGbdgjyC4Y1mMZGqSf8iE"; // 👈 pas aan voor jouw locatie
  const url = `https://api.salonized.com/widget_api/locations/${locationId}/service_variation_groups`;
  const container = document.getElementById("salonized-diensten");

  try {
    const resp = await fetch(url);
    if (!resp.ok) throw new Error("HTTP " + resp.status);
    const data = await resp.json();

    container.innerHTML = "";

    if (!data.service_categories || data.service_categories.length === 0) {
      container.innerHTML = "<p>Geen diensten gevonden.</p>";
      return;
    }

    data.service_categories.forEach(category => {
      const catDiv = document.createElement("div");
      catDiv.className = "salon-category";

      const catTitle = document.createElement("div");
      catTitle.className = "salon-category-title";
      catTitle.textContent = category.name;
      catDiv.appendChild(catTitle);

      (category.service_variation_groups || []).forEach(group => {
        const variation = group.variations[0];
        const priceEuro = (variation.price / 100).toFixed(2).replace(".", ",");

        const serviceDiv = document.createElement("div");
        serviceDiv.className = "salon-service";

        serviceDiv.innerHTML = `
          <div class="salon-service-name">${group.name}</div>
          <div class="salon-service-price">€${priceEuro}</div>
          <div class="salon-service-duration">⏱️ ${variation.duration} minuten</div>
          ${group.description ? `<div class="salon-service-desc">${group.description}</div>` : ''}
        `;

        catDiv.appendChild(serviceDiv);
      });

      container.appendChild(catDiv);
    });
  } catch (err) {
    console.error("Salonized API error:", err);
    container.innerHTML = "<p style='color: red;'>Kon diensten niet laden. Probeer later opnieuw.</p>";
  }
})();
</script>

Wat doet dit? Toont alle diensten per categorie met naam, prijs (in euro’s), duur en beschrijving. Data komt live uit Salonized.

Snippet 2: Team tonen met foto’s

Wil je je team laten zien? Deze snippet haalt alle medewerkers op inclusief hun profielfoto.

<!-- Copyright (c) webknecht.nl - Vrij te gebruiken met bronvermelding -->

<div id="salonized-team">
  <p style="color: #999;">Team laden...</p>
</div>

<style>
#salonized-team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 1000px;
}
.team-member {
  text-align: center;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 12px;
  transition: transform 0.2s;
}
.team-member:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.team-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
  border: 4px solid #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.team-avatar-placeholder {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 700;
  color: white;
  margin: 0 auto 15px;
}
.team-name {
  font-size: 18px;
  font-weight: 600;
  color: #000;
}
</style>

<script>
(async function() {
  const locationId = "VWpMGbdgjyC4Y1mMZGqSf8iE"; // 👈 pas aan voor jouw locatie
  const url = `https://api.salonized.com/widget_api/locations/${locationId}/resources`;
  const container = document.getElementById("salonized-team");

  try {
    const resp = await fetch(url);
    if (!resp.ok) throw new Error("HTTP " + resp.status);
    const data = await resp.json();

    container.innerHTML = "";

    if (!data.resources || data.resources.length === 0) {
      container.innerHTML = "<p>Geen team gevonden.</p>";
      return;
    }

    data.resources.forEach(resource => {
      const memberDiv = document.createElement("div");
      memberDiv.className = "team-member";

      const initial = resource.name.charAt(0).toUpperCase();

      if (resource.avatar_url) {
        memberDiv.innerHTML = `
          <img src="${resource.avatar_url}" alt="${resource.name}" class="team-avatar">
          <div class="team-name">${resource.name}</div>
        `;
      } else {
        memberDiv.innerHTML = `
          <div class="team-avatar-placeholder">${initial}</div>
          <div class="team-name">${resource.name}</div>
        `;
      }

      container.appendChild(memberDiv);
    });
  } catch (err) {
    console.error("Salonized API error:", err);
    container.innerHTML = "<p style='color: red;'>Kon team niet laden.</p>";
  }
})();
</script>

Wat doet dit? Toont alle medewerkers in een grid met hun profielfoto (of initiaal als placeholder). Hover effect voor interactiviteit.

Snippet 3: Beschikbaarheid komende 7 dagen

Toon bezoekers direct wanneer ze terecht kunnen met een overzicht van alle beschikbare tijden.

<!-- Copyright (c) webknecht.nl - Vrij te gebruiken met bronvermelding -->

<div id="salonized-beschikbaarheid">
  <p style="color: #999;">Beschikbaarheid laden...</p>
</div>

<style>
#salonized-beschikbaarheid { max-width: 900px; }
.beschikbaar-dag {
  margin: 20px 0;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}
.beschikbaar-dag.gesloten {
  opacity: 0.5;
  background: #f5f5f5;
}
.beschikbaar-datum {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #000;
}
.beschikbaar-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.beschikbaar-slot {
  padding: 8px 16px;
  background: #fff;
  border: 2px solid #000;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.beschikbaar-slot:hover {
  background: #000;
  color: #fff;
}
.geen-slots {
  color: #999;
  font-style: italic;
}
</style>

<script>
(async function() {
  const locationId = "VWpMGbdgjyC4Y1mMZGqSf8iE"; // 👈 pas aan
  const serviceId = "736220"; // 👈 pas aan (bijv. "Just Cut It")
  const url = `https://api.salonized.com/widget_api/locations/${locationId}/availabilities?range=7&offset=0&service_ids[]=${serviceId}`;
  const container = document.getElementById("salonized-beschikbaarheid");

  try {
    const resp = await fetch(url);
    if (!resp.ok) throw new Error("HTTP " + resp.status);
    const data = await resp.json();

    container.innerHTML = "";

    if (!data || data.length === 0) {
      container.innerHTML = "<p>Geen beschikbaarheid gevonden.</p>";
      return;
    }

    data.forEach(day => {
      const dagDiv = document.createElement("div");
      dagDiv.className = day.open ? "beschikbaar-dag" : "beschikbaar-dag gesloten";

      const datum = new Date(day.date);
      const datumStr = datum.toLocaleDateString('nl-NL', {
        weekday: 'long',
        day: 'numeric',
        month: 'long'
      });

      const datumDiv = document.createElement("div");
      datumDiv.className = "beschikbaar-datum";
      datumDiv.textContent = datumStr.charAt(0).toUpperCase() + datumStr.slice(1);
      dagDiv.appendChild(datumDiv);

      if (day.timeslots && day.timeslots.length > 0) {
        const slotsDiv = document.createElement("div");
        slotsDiv.className = "beschikbaar-slots";

        day.timeslots.forEach(slot => {
          const slotBtn = document.createElement("button");
          slotBtn.className = "beschikbaar-slot";
          slotBtn.textContent = slot.time;
          slotBtn.onclick = () => alert(`Tijdslot geselecteerd: ${datumStr} om ${slot.time}`);
          slotsDiv.appendChild(slotBtn);
        });

        dagDiv.appendChild(slotsDiv);
      } else {
        const geenSlots = document.createElement("div");
        geenSlots.className = "geen-slots";
        geenSlots.textContent = day.open ? "Geen beschikbare tijden" : "Gesloten";
        dagDiv.appendChild(geenSlots);
      }

      container.appendChild(dagDiv);
    });
  } catch (err) {
    console.error("Salonized API error:", err);
    container.innerHTML = "<p style='color: red;'>Kon beschikbaarheid niet laden.</p>";
  }
})();
</script>

Wat doet dit? Toont de komende 7 dagen met alle beschikbare tijdsloten per dag. Klikbare tijden voor verdere integratie.

Snippet 4: Eerste beschikbare moment tonen

Laat bezoekers direct zien wanneer ze het snelst terecht kunnen. Handig voor de homepage!

<!-- Copyright (c) webknecht.nl - Vrij te gebruiken met bronvermelding -->

<div id="salonized-eerste-slot" style="padding: 20px; background: #000; color: #fff; border-radius: 12px; text-align: center; max-width: 500px;">
  <p>🔍 Beschikbaarheid checken...</p>
</div>

<script>
(async function() {
  const locationId = "VWpMGbdgjyC4Y1mMZGqSf8iE"; // 👈 pas aan
  const serviceId = "736220"; // 👈 pas aan
  const container = document.getElementById("salonized-eerste-slot");

  try {
    const url = `https://api.salonized.com/widget_api/locations/${locationId}/availabilities?range=30&offset=0&service_ids[]=${serviceId}`;
    const resp = await fetch(url);
    if (!resp.ok) throw new Error("HTTP " + resp.status);
    const data = await resp.json();

    const eersteDag = data.find(day => day.timeslots && day.timeslots.length > 0);

    if (eersteDag) {
      const datum = new Date(eersteDag.date);
      const datumStr = datum.toLocaleDateString('nl-NL', {
        weekday: 'long',
        day: 'numeric',
        month: 'long'
      });
      const tijd = eersteDag.timeslots[0].time;

      container.innerHTML = `
        <div style="font-size: 16px; margin-bottom: 10px;">✨ Eerstvolgende beschikbaarheid</div>
        <div style="font-size: 28px; font-weight: 700; margin-bottom: 5px;">${datumStr}</div>
        <div style="font-size: 24px; font-weight: 600;">om ${tijd} uur</div>
      `;
    } else {
      container.innerHTML = `
        <div style="font-size: 18px;">😔 Geen beschikbaarheid in de komende 30 dagen</div>
        <div style="font-size: 14px; margin-top: 10px; opacity: 0.8;">Neem contact op voor andere opties</div>
      `;
    }
  } catch (err) {
    console.error("Salonized API error:", err);
    container.innerHTML = "<p>⚠️ Kon beschikbaarheid niet laden</p>";
  }
})();
</script>

Wat doet dit? Zoekt het allereerste beschikbare moment in de komende 30 dagen en toont dit prominent. Perfect voor homepage of landingspagina.

Snippet 5: Salonized API Debug Tool 🔍

Deze snippet is speciaal voor developers die de andere snippets willen gebruiken. Het toont alle belangrijke IDs die je nodig hebt: resources (medewerkers), services, categorieën en variaties. Kopieer de IDs en gebruik ze in de andere snippets!

<!-- Copyright (c) webknecht.nl - Vrij te gebruiken met bronvermelding -->

<div id="salonized-debug">
  <p style="color: #999;">🔍 API data laden...</p>
</div>

<style>
#salonized-debug {
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  max-width: 1200px;
}
.debug-section {
  margin: 30px 0;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  border-left: 4px solid #000;
}
.debug-section-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #000;
  font-family: sans-serif;
}
.debug-item {
  padding: 12px;
  margin: 8px 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.debug-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.debug-name {
  font-weight: 600;
  color: #000;
  font-size: 14px;
}
.debug-id {
  background: #000;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: all;
}
.debug-id:hover {
  background: #333;
}
.debug-details {
  color: #666;
  font-size: 12px;
  margin-top: 5px;
}
.debug-nested {
  margin-left: 20px;
  margin-top: 10px;
  padding-left: 15px;
  border-left: 2px solid #ddd;
}
.debug-category {
  background: #f0f0f0;
  padding: 10px;
  margin: 10px 0;
  border-radius: 4px;
}
.debug-location-info {
  background: #000;
  color: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.debug-copy-hint {
  color: #999;
  font-size: 11px;
  margin-top: 10px;
  font-style: italic;
}
</style>

<script>
(async function() {
  const locationId = "VWpMGbdgjyC4Y1mMZGqSf8iE"; // 👈 pas aan voor jouw locatie
  const container = document.getElementById("salonized-debug");

  try {
    // Parallel data ophalen
    const [resourcesResp, servicesResp] = await Promise.all([
      fetch(`https://api.salonized.com/widget_api/locations/${locationId}/resources`),
      fetch(`https://api.salonized.com/widget_api/locations/${locationId}/service_variation_groups`)
    ]);

    if (!resourcesResp.ok || !servicesResp.ok) {
      throw new Error("API request failed");
    }

    const resourcesData = await resourcesResp.json();
    const servicesData = await servicesResp.json();

    container.innerHTML = "";

    // Location Info
    const locationInfo = document.createElement("div");
    locationInfo.className = "debug-location-info";
    locationInfo.innerHTML = `
      <div style="font-size: 18px; font-weight: 700; margin-bottom: 10px;">📍 Location ID</div>
      <div style="font-size: 24px; font-family: 'Monaco', monospace; user-select: all;">${locationId}</div>
      <div style="font-size: 12px; opacity: 0.8; margin-top: 10px;">Gebruik dit ID in alle snippets</div>
    `;
    container.appendChild(locationInfo);

    // Resources Section
    const resourcesSection = document.createElement("div");
    resourcesSection.className = "debug-section";

    const resourcesTitle = document.createElement("div");
    resourcesTitle.className = "debug-section-title";
    resourcesTitle.textContent = `👤 Resources (Medewerkers) - ${resourcesData.resources?.length || 0} totaal`;
    resourcesSection.appendChild(resourcesTitle);

    if (resourcesData.resources && resourcesData.resources.length > 0) {
      resourcesData.resources.forEach(resource => {
        const item = document.createElement("div");
        item.className = "debug-item";
        item.innerHTML = `
          <div class="debug-item-header">
            <div class="debug-name">${resource.name}</div>
            <div class="debug-id" onclick="navigator.clipboard.writeText('${resource.id}').then(() => alert('ID gekopieerd!'))" title="Klik om te kopiëren">
              ID: ${resource.id}
            </div>
          </div>
          <div class="debug-details">
            ${resource.avatar_url ? '✅ Heeft avatar' : '❌ Geen avatar'}
          </div>
        `;
        resourcesSection.appendChild(item);
      });
    } else {
      resourcesSection.innerHTML += "<p style='color: #999;'>Geen resources gevonden</p>";
    }

    const resourcesCopyHint = document.createElement("div");
    resourcesCopyHint.className = "debug-copy-hint";
    resourcesCopyHint.textContent = "💡 Klik op een ID om te kopiëren naar klembord";
    resourcesSection.appendChild(resourcesCopyHint);

    container.appendChild(resourcesSection);

    // Services Section
    const servicesSection = document.createElement("div");
    servicesSection.className = "debug-section";

    const servicesTitle = document.createElement("div");
    servicesTitle.className = "debug-section-title";
    servicesTitle.textContent = `💇 Services & Variations - ${servicesData.service_categories?.length || 0} categorieën`;
    servicesSection.appendChild(servicesTitle);

    if (servicesData.service_categories && servicesData.service_categories.length > 0) {
      servicesData.service_categories.forEach(category => {
        const catDiv = document.createElement("div");
        catDiv.className = "debug-category";

        catDiv.innerHTML = `
          <div class="debug-item-header">
            <div class="debug-name" style="font-size: 16px;">📁 ${category.name}</div>
            <div class="debug-id" onclick="navigator.clipboard.writeText('${category.id}').then(() => alert('Category ID gekopieerd!'))">
              CAT ID: ${category.id}
            </div>
          </div>
        `;

        const nestedDiv = document.createElement("div");
        nestedDiv.className = "debug-nested";

        (category.service_variation_groups || []).forEach(group => {
          const groupDiv = document.createElement("div");
          groupDiv.className = "debug-item";

          const variation = group.variations[0];
          const priceEuro = (variation.price / 100).toFixed(2);

          groupDiv.innerHTML = `
            <div class="debug-item-header">
              <div class="debug-name">${group.name}</div>
              <div class="debug-id" onclick="navigator.clipboard.writeText('${group.id}').then(() => alert('Group ID gekopieerd!'))">
                GROUP ID: ${group.id}
              </div>
            </div>
            <div class="debug-details">
              💰 €${priceEuro} | ⏱️ ${variation.duration} min | 🔢 ${group.variations_count} variatie(s)
            </div>
          `;

          // Variations binnen group
          if (group.variations && group.variations.length > 0) {
            const varDiv = document.createElement("div");
            varDiv.className = "debug-nested";
            varDiv.style.marginTop = "8px";

            group.variations.forEach(variation => {
              const vPrice = (variation.price / 100).toFixed(2);
              const varItem = document.createElement("div");
              varItem.style = "padding: 8px; background: #f5f5f5; margin: 4px 0; border-radius: 4px; font-size: 12px;";
              varItem.innerHTML = `
                <div style="display: flex; justify-content: space-between; align-items: center;">
                  <div>
                    <strong>${variation.name}</strong>
                    ${variation.description ? `<br><span style="color: #666;">${variation.description}</span>` : ''}
                  </div>
                  <div class="debug-id" onclick="navigator.clipboard.writeText('${variation.id}').then(() => alert('Variation ID gekopieerd!'))" style="font-size: 11px; padding: 3px 8px;">
                    VAR ID: ${variation.id}
                  </div>
                </div>
                <div style="margin-top: 5px; color: #666;">
                  €${vPrice} | ${variation.duration} min | Buffer: ${variation.buffer} min
                </div>
              `;
              varDiv.appendChild(varItem);
            });

            groupDiv.appendChild(varDiv);
          }

          nestedDiv.appendChild(groupDiv);
        });

        catDiv.appendChild(nestedDiv);
        servicesSection.appendChild(catDiv);
      });
    } else {
      servicesSection.innerHTML += "<p style='color: #999;'>Geen services gevonden</p>";
    }

    const servicesCopyHint = document.createElement("div");
    servicesCopyHint.className = "debug-copy-hint";
    servicesCopyHint.innerHTML = `
      💡 Gebruik:<br>
      • <strong>Variation ID</strong> voor beschikbaarheid checks (snippets 3 & 4)<br>
      • <strong>Resource ID</strong> voor specifieke medewerker filtering<br>
      • <strong>Location ID</strong> voor alle API calls
    `;
    servicesSection.appendChild(servicesCopyHint);

    container.appendChild(servicesSection);

    // API Endpoints Info
    const apiSection = document.createElement("div");
    apiSection.className = "debug-section";
    apiSection.style.background = "#f0f7ff";
    apiSection.innerHTML = `
      <div class="debug-section-title">🔗 API Endpoints voor deze locatie</div>
      <div style="font-family: Monaco, monospace; font-size: 12px; color: #333;">
        <div style="margin: 8px 0; padding: 8px; background: #fff; border-radius: 4px;">
          <strong>Resources:</strong><br>
          https://api.salonized.com/widget_api/locations/${locationId}/resources
        </div>
        <div style="margin: 8px 0; padding: 8px; background: #fff; border-radius: 4px;">
          <strong>Services:</strong><br>
          https://api.salonized.com/widget_api/locations/${locationId}/service_variation_groups
        </div>
        <div style="margin: 8px 0; padding: 8px; background: #fff; border-radius: 4px;">
          <strong>Beschikbaarheid (7 dagen):</strong><br>
          https://api.salonized.com/widget_api/locations/${locationId}/availabilities?range=7&service_ids[]=[VARIATION_ID]
        </div>
      </div>
    `;
    container.appendChild(apiSection);

  } catch (err) {
    console.error("Salonized Debug Error:", err);
    container.innerHTML = `
      <div style="padding: 30px; text-align: center;">
        <div style="font-size: 48px; margin-bottom: 20px;">⚠️</div>
        <div style="font-size: 18px; font-weight: 600; margin-bottom: 10px;">Kon API data niet laden</div>
        <div style="color: #666;">Check je Location ID en probeer opnieuw</div>
        <div style="margin-top: 15px; font-family: Monaco, monospace; font-size: 12px; color: #999;">
          Error: ${err.message}
        </div>
      </div>
    `;
  }
})();
</script>

Wat doet dit? Dit is een developer tool die alle belangrijke IDs uit je Salonized account laat zien:

  • Location ID – Voor alle API calls
  • Resource IDs – Voor medewerker filtering
  • Category IDs – Voor service categorieën
  • Group IDs – Voor service groepen
  • Variation IDs – Voor beschikbaarheid checks (dit zijn de service IDs die je nodig hebt!)

Hoe te gebruiken:

  1. Plak deze snippet in een Custom Code blok
  2. Vul je locationId in
  3. Bekijk de pagina
  4. Klik op een ID om te kopiëren naar je klembord
  5. Gebruik de IDs in de andere snippets!

Pro tip: Laat dit snippet op een aparte “debug” pagina staan tijdens development, zodat je altijd makkelijk IDs kunt opzoeken.

Service ID’s vinden

Voor snippets 3 en 4 heb je een serviceId nodig. Je kunt deze vinden door:

  1. Snippet 1 gebruiken (diensten tonen)
  2. F12 Developer Tools openen
  3. Console tabblad kiezen
  4. In de snippet console.log(variation.id); toevoegen
  5. De ID’s verschijnen in de console

Of gebruik deze test URL: https://api.salonized.com/widget_api/locations/JOUW_LOCATION_ID/service_variation_groups

Tips voor developers

  • Console logs: Gebruik console.log(data) in de snippets om de volledige API response te zien
  • Error handling: Alle snippets hebben basis error handling – pas aan naar je eigen behoeften
  • Styling: De styling is basic – gebruik je eigen CSS of pas kleuren aan naar je branding
  • IIFE pattern: Alle snippets gebruiken (async function() {...})() om namespace conflicts te voorkomen
  • CORS: Deze snippets werken client-side dankzij Salonized’s CORS policy

Veelgestelde vragen

Werken deze snippets op elke OnePage website?
Ja! Plak ze in een Custom Code blok en ze werken direct.

Kan ik de styling aanpassen?
Absoluut! Alle CSS staat in de <style> tags en is makkelijk aan te passen.

Hoe vaak wordt de data ververst?
Elke keer dat de pagina geladen wordt. Voor real-time updates kun je een refresh interval toevoegen.

Kan ik meerdere snippets combineren?
Ja, maar zorg dat elk een uniek id heeft (bijv. salonized-diensten, salonized-team).

Problemen oplossen

CORS errors in console
Normaal geen probleem – Salonized API ondersteunt CORS voor widget endpoints.

Geen data teruggekregen
Check of je locationId klopt. Test de URL handmatig in je browser.

Styling ziet er raar uit
OnePage kan eigen styles hebben die conflicteren. Voeg !important toe waar nodig of gebruik specifiekere selectors.

Widget laadt traag
API calls gebeuren asynchroon – voeg een loading state toe voor betere UX (staat al in de snippets).

Meer Salonized tutorials

Klaar om je eigen custom Salonized integraties te bouwen? Probeer OnePage 14 dagen gratis en experimenteer met deze snippets!

Categorie: Integraties
Tags:
API integratie Code snippets Developer JavaScript OnePage Salonized Tutorial
Geen code nodig

Klaar om te beginnen met OnePage?

Bouw je eigen professionele website zonder code

Probeer 14 dagen gratis
Geen creditcard nodig
Alle features inbegrepen
Nederlandse templates
Probeer gratis Meer tutorials