> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.fotostudio.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Widgets: Fotostudio in je website

# 🧩 Widgets: Fotostudio in je website

## Wat is een widget?

Heb je al een website bij WordPress, Wix, Squarespace of elders? Met widgets bouw je er online reserveren, minisessies, cadeaubonnen, je catalogi of je contactformulieren in, rechtstreeks in je pagina's en in jouw kleuren.

Je bezoekers reserveren of kopen zonder je website te verlaten, en alles komt in Fotostudio terecht: contacten, sessies, betalingen.

> 💡 Heb je een Fotostudio-website? Deze modules staan er al, zonder code. Zie het artikel „De websitebouwer van Fotostudio”.

---

## Waar vind je de widgets?

Ga in het menu naar **Website** > **Widgets voor je website**.

---

## De beschikbare modules

Kies de module in de lijst **Module**:

| Groep | Module | Wat de bezoeker ziet |
|---|---|---|
| **Klantenzone** | Online boeking | De beschikbare tijdsloten, voor alle diensten samen |
| | Mini fotoshoots | De reserveringspagina van je minisessies |
| | Cadeaubonnen | De cadeaubonnenwinkel |
| | Nieuwsbriefinschrijving | Een inschrijfformulier voor je nieuwsbrief |
| **Catalogi** | Een catalogus | De diensten en tarieven van een van je catalogi |
| **Contactformulieren** | Een formulier | Een van je contactformulieren |
| **Online reservering, één type sessie of een evenement** | Een type sessie, of een evenement | Reserveren beperkt tot dit type sessie of dit evenement |
| **Minisessies, één type shoot** | Een type minisessie | Reserveren beperkt tot dit type minisessie |

**Waarom staat een module niet in de lijst?**
- Een type sessie verschijnt alleen als het beschikbaarheden voor online reserveren heeft (zodat er nooit een lege kalender getoond wordt).
- Gearchiveerde types minisessie worden verborgen.
- Is de lijst leeg, maak dan eerst een dienst, een catalogus of een contactformulier.

Heb je meerdere visuele identiteiten, dan kies je met de lijst **Visuele identiteit** die van de widget.

---

## Een widget inbouwen in 3 stappen

### Stap 1: De module kiezen

Selecteer de module in **De module om in te bouwen**. Het **Voorbeeld** onderaan de pagina toont de widget zoals hij op je website verschijnt, in jouw kleuren.

### Stap 2: De code kopiëren

Klik in **De code om te plakken** op **Code kopiëren**. De code ziet er zo uit:

```html
<div data-fs-widget="booking" data-fs-photographer="..."></div>
<script src="https://www.fotostudio.io/embed.js" async></script>
```

### Stap 3: De code in je website plakken

Plak deze code in je pagina, op de plek waar de module moet verschijnen:

| Platform | Waar plak je de code? |
|---|---|
| **WordPress** | Een blok „Aangepaste HTML” in de pagina-editor |
| **Wix** | Toevoegen > Insluiten > „Code insluiten” (Embed HTML) |
| **Squarespace** | Een „Code”-blok op de pagina |
| **Elders** | Elke plek die HTML aanvaardt |

De widget neemt de volledige beschikbare breedte in, en de hoogte past zich vanzelf aan de inhoud aan. Je kunt meerdere widgets op dezelfde pagina zetten.

> 💡 Niets aan te melden of toe te staan: de widget werkt op elke website zodra de code geplakt is.

---

## Het uiterlijk aanpassen

Standaard nemen je widgets de kleuren en het lettertype van je visuele identiteit over. Om ze aan te passen aan je website, gebruik je de kaart **Uiterlijk van de widgets**:

| Instelling | Standaard |
|---|---|
| **Hoofdkleur** | De kleur van je visuele identiteit |
| **Tekstkleur** | Donkergrijs (#333) |
| **Achtergrondkleur** | Transparant: de widget neemt de achtergrond van je website over |
| **Afgeronde hoeken (px)** | Die van je identiteit, van 0 tot 32 |
| **Lettertype** | Dat van je visuele identiteit |

Laat een veld leeg om de waarde van je visuele identiteit te behouden en klik daarna op **Opslaan**. Heb je meerdere visuele identiteiten, dan heeft elk zijn eigen instellingen.

> 💡 Deze instellingen gelden alleen voor de widgets. Je klantenzone, rechtstreeks geopend, behoudt haar gewone uiterlijk.

---

## De link naar je klantenzone

De klantenzone (offertes, facturen, contracten, galerijen) wordt niet als widget ingebouwd: het is een **link** die je in het menu van je website zet, bijvoorbeeld met de naam „Klantenzone”.

1. Klik in de kaart **Link naar je klantenzone** op **Link kopiëren**
2. Zet deze link in het menu van je website (WordPress, Wix, Squarespace of elders)

Je klanten geven hun e-mailadres in en ontvangen een inlogcode.

> 💡 Zonder adres op jouw naam draagt de link het adres van Fotostudio. Kies een adres zoals `mijnstudio.fotostudio.io` of je eigen domein (link **Mijn adres kiezen**): de link draagt dan jouw naam, en de links in je e-mails ook. Zie het artikel „De domeinen van je website beheren”.

---

## Inschrijving op de nieuwsbrief

Vink in de kaart **Inschrijving op de nieuwsbrief** de optie **Een bevestiging per e-mail vragen** aan, zodat de inschrijving pas telt nadat op de bevestigingslink geklikt is. Geen enkel vals of door iemand anders ingevuld adres komt in je lijst, en je verzendingen komen beter aan.

Deze instelling geldt voor al je nieuwsbriefformulieren, ook op een Fotostudio-website.

---

## Waar je widgets getoond worden

De kaart **Waar je widgets getoond worden** toont automatisch de websites die een van je modules tonen, met de datum van het laatste bezoek en een geschat aantal weergaven. Je hoeft zelf niets te doen.

> 💡 Het kan even duren voor een website verschijnt, en sommige oudere browsers worden niet herkend: staat een website niet in de lijst, dan betekent dat niet dat de widget niet werkt.

---

## Goed om te weten

| Punt | Detail |
|---|---|
| **Cookies** | De widget heeft geen cookies van derden nodig: hij werkt in Safari, Firefox en Chrome |
| **Betaling** | De betaling (kaart, PayPal, 3-D Secure) opent altijd op een beveiligde pagina op volledig scherm, daarna brengt een knop de klant terug naar je website |
| **Mobiel** | De widget past zich aan de schermbreedte aan |
| **Vindbaarheid** | De inhoud van de widget wordt niet geïndexeerd door zoekmachines |
| **Je account** | In de widget ben je nooit ingelogd: je ziet precies wat een klant ziet |

---

## Veelgestelde vragen

**De widget verschijnt niet op mijn pagina.**
Controleer of de code volledig geplakt is (de `<div>` **en** de regel `<script>`), in een blok dat HTML aanvaardt. Sommige editors tonen geen scripts in de bewerkingsmodus: bekijk de gepubliceerde pagina.

**Mijn tool weigert scripts.**
Schrijf ons: samen zoeken we de beste oplossing voor je platform.

**De widget toont een lege pagina.**
De module is misschien verwijderd (catalogus, formulier of type minisessie). Kies de module opnieuw in **Website** > **Widgets voor je website** en plak de code opnieuw.

**Ik heb mijn tarieven of beschikbaarheden gewijzigd. Moet ik de code opnieuw plakken?**
Nee. De widget toont altijd de actuele gegevens van Fotostudio.

**Ik had een contactformulier ingebouwd met de oude code (iframe). Werkt dat nog?**
Ja, de oude codes blijven werken. De nieuwe code heeft als voordeel dat de hoogte zich vanzelf aanpast.

**Kan ik een galerij of mijn volledige klantenzone inbouwen?**
Nee. De klantenzone open je via een link (zie hierboven), en galerijen deel je via hun gewone link.

**Moet mijn klant een account aanmaken om te reserveren?**
Nee. Hij reserveert rechtstreeks in de widget, en zijn gegevens komen in Fotostudio terecht.