You can customize both the look and the text of your embedded booking engine using CSS. This allows you to hide elements, adjust layouts, or replace default labels—even when no built-in setting exists. Some basic CSS knowledge is needed, but we've made the structure easy to work with.

How to access the CSS editor

1. Go to Web tools > Booking engines.
2. Click the three dots on the same row as the booking engine you want to modify.
3. Click Edit in the drop-down menu.
4. Go to the Custom CSS tab.

Understand the CSS structure

To keep your customizations simple and reliable, Sirvoy uses the BEM (Block, Element, Modifier) naming convention. This helps you write CSS that is easier to read and less likely to break with future updates.

Avoid using class selectors that begin with js- or sirvoy- (except where noted below), and avoid using ID selectors. These may change without notice and are not designed for styling.

Changing text using CSS

Sirvoy doesn’t offer a built-in setting for changing every single label in the booking engine, but you can still change some by targeting specific classes in your custom CSS.

Text elements that can be edited this way always use the class sirvoy-flexible-text. These also come with:

• A translation key class like sft-trans-key-shared-button-search
• A language class like sft-lang-en (for English), sft-lang-fr (for French), or sft-lang-sv (for Swedish)

Example: Change the Search button label

To change the "Search" button label in both English and Swedish, follow these steps.

1. Identify the target element

Here's what the original markup looks like in the booking engine:

<span class="
  sirvoy-flexible-text 
  sft-lang-en 
  sft-trans-key-shared-button-search 
  sft-initialized" 
  data-translation-key="shared.button.search">
           
  <div class="sft-text">
     Search
  </div>
</span>

The key classes here are:

• sft-lang-en or sft-lang-sv: The language.
• sft-trans-key-shared-button-search: The translation key for the "Search" button.
• sft-text: The container for the original text.

2. Add CSS to override the label

Use the following CSS to hide the original label and insert a new one based on the language:

.sft-lang-en.sft-trans-key-shared-button-search .sft-text,
.sft-lang-sv.sft-trans-key-shared-button-search .sft-text {
 display: none !important;
}

.sft-lang-en.sft-trans-key-shared-button-search::after {
 content: "My button title";
}

.sft-lang-sv.sft-trans-key-shared-button-search::after {
 content: "Min knapptitel";
}

3. Apply the same technique elsewhere

You can use this same approach to change any other label or text element in the booking engine that uses the sirvoy-flexible-text class. Just inspect the element, identify its language and translation key classes, and apply similar CSS.