Set Up Multi-Language Booking Widget

Quick path: Resources → Products → eCommerce tab → Translate content → Save

What this helps you do

If your school serves customers who speak different languages, the booking widget can display the interface in their language. Bloowatch’s eCommerce widget supports multiple languages out of the box — the checkout flow, buttons, date pickers, and system labels all adapt automatically.

Your job is to make sure the content is ready too: product names, descriptions, and catalog info translated for each language your customers speak. This article walks you through the full setup.

Before you start

• Your booking widget is already embedded on your website (see Set Up Online Booking)
• At least one product has eCommerce enabled
• You know which languages your customers use (the widget supports English, Spanish, French, Portuguese, Italian, and German)

Steps

1. Understand how language detection works

The booking widget determines which language to display using this priority:

1. URL parameter — If you append ?lang=fr (or es, en, pt, it, de) to your booking URL, the widget forces that language. This overrides everything else.
2. Browser language — If no URL parameter is set, the widget reads the visitor’s browser language preference and picks the closest supported match.
3. Fallback — If the browser language is not supported (e.g., Japanese), the widget falls back to English.

This means most visitors see the widget in their language automatically — no action needed from you for the UI elements (buttons, labels, date formats).

Watch out: The automatic detection only controls the interface language (button labels like “Book”, “Cart”, “Checkout”). Your product names and descriptions are shown exactly as you typed them — they are not auto-translated.

2. Go to your product’s eCommerce tab

Navigate to Resources > Products, open a product, and click the eCommerce tab. This is where you configure the catalog listing info — the name, description, image, and public price that customers see in the widget.

3. Translate product names and descriptions

The Title field on the product’s General tab and the Description fields on the eCommerce tab are the two pieces of content your customers see in the widget.

Bloowatch does not have a per-language translation system for product fields — the product name and description are stored once. Here is how to handle it:

Approach	How it works	Best for
Single dominant language	Write the product name and description in your primary customer language. Visitors in other languages see the interface translated but product names stay in one language.	Schools where 80%+ of bookings come from one language
Bilingual product names	Use both languages in the product title, e.g., “Surf Lesson / Cours de Surf”. Keep descriptions in your primary language or add a short second-language summary.	Schools with two main customer languages
Forced widget language	Create separate booking pages on your website per language, each embedding the widget with a ?lang= parameter and linking to a product catalog tailored to that audience.	Schools with a multilingual website

Watch out: Product names appear in the Agenda, POS, and invoices too — not just the widget. If you use bilingual titles, they show everywhere. Keep them concise.

4. Set catalog info for international visitors

In the eCommerce tab, under Catalog page information:

Field	Guidance for multi-language
Catalog image	Images are universal — no translation needed. Use photos with minimal or no text overlay.
Description	Write in your primary language. If you serve two main languages, add a short translated version below a separator (e.g., ---).
Public price	Prices display in your configured currency. The currency symbol adapts to the visitor’s locale format automatically (e.g., “50,00 EUR” vs “EUR 50.00”).

Under Product page information, the rich text description supports longer content. If you serve multiple languages, consider structuring it with language sections:

Discover the thrill of surfing with a professional instructor...

---

Descubre la emoción del surf con un instructor profesional...

5. Force a specific language via URL parameter

If your website has separate pages for each language (e.g., /en/book, /fr/book, /es/book), you can force the widget language by adding a lang parameter to the booking URL in the iframe embed code.

Default (auto-detect):

<iframe src="https://your-school.bloowatch.com/booking"></iframe>

Forced French:

<iframe src="https://your-school.bloowatch.com/booking?lang=fr"></iframe>

Forced Spanish:

<iframe src="https://your-school.bloowatch.com/booking?lang=es"></iframe>

Supported lang values: en, es, fr, pt, it, de.

This way each language version of your website shows the widget in the matching language, regardless of the visitor’s browser settings.

6. Test the widget in different languages

Verify the widget works correctly in each language you support:

1. Browser language test — Change your browser’s language preference (Settings > Languages in Chrome) and reload the booking page. The widget interface should switch.
2. URL parameter test — Append ?lang=fr (or another code) to your booking URL and confirm the interface changes.
3. Check product content — Verify your product names and descriptions look correct in context. Long bilingual titles may wrap oddly on mobile.
4. Complete a test booking — Walk through the full checkout in each language. Confirm the confirmation email arrives in the expected language.

Watch out: Changing your browser language may affect other websites you visit. Use an incognito window or reset your language preference after testing.

What should happen next

• The widget interface (buttons, labels, date picker, checkout flow) displays in the visitor’s browser language or the forced language
• Product names and descriptions display as you configured them
• Currency formatting adapts to the visitor’s locale
• Confirmation emails follow the language settings configured in Settings > Emails
• Visitors whose browser language is not supported see the widget in English (fallback)

Common mistakes

Mistake	Why it happens	Fix
Widget always shows in English	The browser language detection is working but the visitor’s browser is set to English, or the ?lang= parameter is overriding	Check the iframe URL for a hardcoded lang parameter, and verify the visitor’s browser language
Product names are in the wrong language	Product fields are stored once, not per language	Edit the product title and description to match your primary customer language
Confirmation email is in a different language than the widget	Email language is controlled separately in Settings > Emails	Configure email templates for each language you support (F123: Start=1, Pro=2, Gold=7 languages)
Currency shows wrong format	Currency symbol placement varies by locale	This is normal behavior — the amount is the same, only the format differs
?lang= parameter is ignored	Typo in the language code or parameter name	Use exactly lang (lowercase) with a valid code: en, es, fr, pt, it, de

If it still doesn’t work

• Confirm you are on a PRO or GOLD plan
• Open the booking URL directly (not embedded) with ?lang=es to test outside your website
• Clear your browser cache and try in an incognito window
• Check that your products have eCommerce enabled — a blank widget means no products are visible
• Contact Bloowatch Support via the chat widget