Overview
The language wrappers feature allows Booking Engine Plus users to apply language-specific customizations more effectively, tailoring your platform experience to different languages and providing more localized and personalized user navigation.
Important information
- The Cloudbeds Support Team does not provide web development services or troubleshooting support.
- Please contact your website designer or developer for additional assistance using the customization codes for your booking engine.
Add specific styles for different languages
- The code below will allow you to add specific styles for the English language. You can define custom styles based on the selected language. To add specific styles for other languages, use this parent selector by editing the language component (below in red). For example:
- For Portuguese: html[lang="pt-br"] Please note that language components are always specified in lowercase.
- These are the only required steps to apply CSS styles for elements based on the selected language.
Add language wrappers to your Booking Engine Plus
- Go to the Settings page
of your Account Menu
and click on the Booking Engine section.
- Click on Customize
- Copy and paste the code below in the Custom Meta Tags field
- Click Save
<style>
html[lang="en"] .your-css-query-here {
/* Your CSS styles here... */
}
</style> Important:
- If you use dynamic CSS classes to target the user interface elements (which have this format: d-1uv2xnb), we cannot guarantee that your customization will work on future system updates.
- The names of these classes are created dynamically at build time.
Additional customization (optional)
To execute a JS script when the user changes the language, subscribe to the language-changed event. Simply include the snippet below in the JavaScript field of your Booking Engine customization page:
<script>
window.addEventListener("on-booking-engine-ready",
({ detail }) => {
const { eventSystem } = detail;
eventSystem.addEventListener("language-changed",
({ language }) => {
// Your JS code here...
});
});
</script>
Comments
Please sign in to leave a comment.