Skip to content
English - United States
Nous Contacter
  • There are no suggestions because the search field is empty.

Change the button text according to the site's language

Why adapt the button to the visitor's language?

Key points:

  • Improves comprehension and conversion on multilingual versions.
  • It values ​​the international user experience.
  • Requires minimal maintenance thanks to language variations.

Adapting the text of the “Book Now” button to the website's language is essential for providing a consistent and natural experience for your visitors. An English-speaking user will be more likely to click “Book now” than a button in French, while a German visitor will expect to read “Jetzt buchen.” This simple personalization helps build trust and streamline the booking process.

Methods for changing the text according to the language

1. Use the site's language variants

If your site has multiple language versions (e.g., FR / EN / ES), you can define specific text for each version:

  1. Open the Designer.
  2. Select the page corresponding to each language.
  3. Click the “Book” button.
  4. Replace the text with its local translation (e.g., “Book now”, “Reservar ahora”, “Jetzt buchen”).
  5. Publish each language version separately.

💡 Tip: Make sure the button keeps the same ID or CSS class to maintain the visual style across all languages.

2. Use a multilingual CMS or a translation tool

If your site is synchronized with a multilingual CMS (for example via Weglot, or a native language management system):

  • The button will be automatically detected, and you will be able to translate the text from the translation interface.
  • Weglot, for example, allows you to translate static text (like buttons) without changing the design.

3. Using a language condition in Webflow

For a more technical approach, you can add a visibility condition based on the active language:

  1. Duplicate your “Book” button.
  2. Modify the text of each copy in the corresponding language.
  3. Apply a display condition (for example: display this button only if the language is FR / EN / ES).
  4. Test each version of the site to verify that only the correct button is displayed.

💡 Technical tip: if you manage the language via an attribute (e.g., lang="fr" in the <html>), a small JavaScript script can automate the display of the correct button:

const lang = document.documentElement.lang;

const buttons = document.querySelectorAll('[data-lang]');

buttons.forEach(btn => {

  btn.style.display = btn.dataset.lang === lang ? 'block': 'none';

});


4. Check the consistency of the link and the engine

Regardless of the button text, make sure that:

  • The link always leads to the correct booking engine (same URL, unless it's a language-specific engine).
  • The search engine correctly displays the language corresponding to that of the website.
  • The UTM parameters, or tracking parameters, remain the same.

Best practices

  • Use clear and universal action verbs (“Reserve”, “Book”, “Reservar”).
  • Keep the button in the same location on every version of the site for UX consistency.
  • Check the spacing: some languages ​​(German, Italian) use longer words.
  • Test the mobile and desktop versions after each translation.

Conclusion

Changing the text of the "Book" button to match the website's language is a simple yet powerful way to enhance the multilingual user experience. This adaptation demonstrates attention to detail and directly contributes to better conversion rates for international visitors.