> ## 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 your website

# 🧩 Widgets: Fotostudio in your website

## What is a widget?

Do you already have a website on WordPress, Wix, Squarespace or elsewhere? Widgets let you embed booking, mini sessions, gift vouchers, your catalogues or your contact forms in it, directly in your pages and in your colours.

Your visitors book or buy without leaving your website, and everything arrives in Fotostudio: contacts, sessions, payments.

> 💡 Do you have a Fotostudio website? These modules are already there, no code to paste. See the article “The Fotostudio website builder”.

---

## Where to find widgets

In the menu, go to **Website** > **Widgets for your website**.

---

## Available modules

Choose the module from the **Module** list:

| Group | Module | What the visitor sees |
|---|---|---|
| **Client area** | Online booking | The available slots, across all services |
| | Mini sessions | Your mini sessions booking page |
| | Gift vouchers | The gift voucher shop |
| | Newsletter signup | A signup form for your newsletter |
| **Catalogues** | A catalogue | The services and prices of one of your catalogues |
| **Contact forms** | A form | One of your contact forms |
| **Online booking, a single session type or event** | A session type, or an event | Booking limited to that session type or event |
| **Mini sessions, a single session type** | A mini session type | Booking limited to that mini session type |

**Why doesn't a module appear in the list?**
- A session type only appears if it has online booking availability (so an empty calendar is never shown).
- Archived mini session types are hidden.
- If the list is empty, first create a service, a catalogue or a contact form.

If you have several visual identities, a **Visual identity** list lets you choose the one for the widget.

---

## Embedding a widget in 3 steps

### Step 1: Choose the module

Select the module in **The module to embed**. The **Preview** at the bottom of the page shows the widget as it will appear on your website, in your colours.

### Step 2: Copy the code

In **The code to paste**, click **Copy the code**. The code looks like this:

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

### Step 3: Paste the code into your website

Paste this code into your page, where the module should appear:

| Platform | Where to paste the code |
|---|---|
| **WordPress** | A “Custom HTML” block in the page editor |
| **Wix** | Add > Embed > “Embed a code” (Embed HTML) |
| **Squarespace** | A “Code” block in the page |
| **Elsewhere** | Anywhere that accepts HTML |

The widget takes the full available width, and its height adjusts to its content on its own. You can place several widgets on the same page.

> 💡 Nothing to declare or authorise: the widget works on any website as soon as the code is pasted.

---

## Adjusting the appearance

By default, your widgets use the colours and font of your visual identity. To adjust them to your website, use the **Widget appearance** card:

| Setting | Default |
|---|---|
| **Primary color** | The colour of your visual identity |
| **Text color** | Dark grey (#333) |
| **Background color** | Transparent: the widget takes your website's background |
| **Rounded corners (px)** | Those of your identity, from 0 to 32 |
| **Font** | The one from your visual identity |

Leave a field empty to keep the value from your visual identity, then click **Save**. If you have several visual identities, each one has its own settings.

> 💡 These settings only apply to widgets. Your client area, opened directly, keeps its usual appearance.

---

## The link to your client area

The client area (quotes, invoices, contracts, galleries) can't be embedded as a widget: it's a **link** to place in your website's menu, for example under the name “Client area”.

1. In the **Link to your client area** card, click **Copy link**
2. Add this link to your website's menu (WordPress, Wix, Squarespace or elsewhere)

Your clients enter their email address and receive a login code.

> 💡 Without an address in your name, the link carries the Fotostudio address. Choose an address such as `mystudio.fotostudio.io` or your own domain (**Choose my address** link): the link will then carry your name, and so will the links in your emails. See the article “Managing your website's domains”.

---

## Newsletter signup

In the **Newsletter signup** card, tick **Ask for an email confirmation** so that a signup only counts once the confirmation link has been clicked. No fake address, and none entered by someone else, gets into your list, and your emails get delivered better.

This setting applies to all your newsletter forms, including on a Fotostudio website.

---

## Where your widgets are displayed

The **Where your widgets are displayed** card automatically lists the websites that display one of your modules, with the date of the last visit and an approximate number of views. Nothing to do on your side.

> 💡 A website can take a little while to appear, and some older browsers aren't detected: if a website is missing from the list, it doesn't mean the widget isn't working.

---

## Good to know

| Point | Detail |
|---|---|
| **Cookies** | The widget doesn't need third-party cookies: it works on Safari, Firefox and Chrome |
| **Payment** | Payment (card, PayPal, 3-D Secure) always opens on a secure full-screen page, then a button takes the client back to your website |
| **Mobile** | The widget adapts to the screen width |
| **SEO** | The widget's content is not indexed by search engines |
| **Your account** | In the widget, you are never logged in: you see exactly what a client sees |

---

## Frequently asked questions

**The widget doesn't show on my page.**
Check that the code was pasted in full (the `<div>` **and** the `<script>` line), in a block that accepts HTML. Some editors don't display scripts in edit mode: look at the published page.

**My tool refuses scripts.**
Write to us: we'll work out the best solution for your platform together.

**The widget shows an empty page.**
The module may have been deleted (catalogue, form or mini session type). Choose the module again in **Website** > **Widgets for your website** and paste the code again.

**I've changed my prices or availability. Do I need to paste the code again?**
No. The widget always shows the up-to-date data from Fotostudio.

**I embedded a contact form with the old code (iframe). Does it still work?**
Yes, old codes keep working. The new code has the advantage of adjusting its height on its own.

**Can I embed a gallery or my full client area?**
No. The client area opens through a link (see above), and galleries are shared through their usual link.

**Does my client need to create an account to book?**
No. They book directly in the widget, and their details arrive in Fotostudio.