Add custom text below Standard Rate and Rate Plan names in the Booking Engine

Purpose Add short guest-facing text below Standard Rate and Rate Plan names on the Cloudbeds Booking Engine. You can apply the same text broadly or use different text for specific Rate Plans.
Best for Property admins and managers who manage Booking Engine customization.
Use this when You want to clarify an inclusion, fee, or another short rate detail without changing the underlying rate configuration, either across all displayed rates or for specific Rate Plans.
Requirements Ability to access the Booking Engine Customize tab and edit the Custom Meta Tags field. To target a specific Rate Plan, you also need its Rate Plan ID. When saving protected custom code, Cloudbeds may require step-up multi-factor authentication (MFA).
Expected result Your custom text appears directly below Standard Rate and Rate Plan names on the Booking Engine. When you target individual Rate Plans, each one can display its own message.
Limitations The code in this article changes display text only. It does not change pricing, policies, images, emails, or the underlying rate setup. Base Rate and Rate Plan image options are not configured the same way.

Introduction

Use this customization when you want to give guests a little more context about a rate directly on the Cloudbeds Booking Engine. For example, you can add a short note below the Standard Rate (Base Rate) or Rate Plan name to clarify whether breakfast is included, mention a resort fee, or highlight another important rate detail.

You can apply the same custom text broadly to Standard Rate and Rate Plan titles, or target individual Rate Plans when different rates need different messages. For example, you could show one message below a non-refundable rate and a different message below a breakfast-included Rate Plan.

The added text is display-only. It does not rename the Base Rate or Rate Plan, and it does not change pricing, policies, images, emails, or the underlying rate configuration.

Choose the customization that matches whether you want to apply the same text broadly, use a separate Spanish translation, or display different text for specific Rate Plans. Then add the corresponding code to the Custom Meta Tags field.

Table of contents

Choose a customization version

Choose the option that matches where the custom text should appear and whether you need different text for individual Rate Plans.

Customization Use this when
Version 1: Same English text for all languages You want the same English custom text to appear below Standard Rate and Rate Plan names regardless of which Booking Engine language the guest selects.
Version 2: English with a separate Spanish translation You want Spanish guests to see translated text while English remains the default text for the other Booking Engine languages.
Specific Rate Plans You have multiple rates and want a different message to appear below individual Rate Plan names instead of applying the same text to all of them.

  Standard Rate and Rate Plan content are configured differently: Images can be uploaded for Rate Plans and Packages, but a custom image cannot currently be uploaded directly for the Base Rate, which appears as Standard Rate on the Booking Engine. The customization in this article applies to display text, not rate images.

  Important: Versions 1 and 2 apply custom text broadly to Standard Rate and Rate Plan titles. If you need different text for individual Rate Plans, use the specific Rate Plans method below.

Add custom text below Standard Rate and Rate Plan names

Add the customization in the Custom Meta Tags field on the Booking Engine Customize tab. The navigation is the same for both versions.

Version 1: Use the same English text for all languages

Use this version when the same English message should appear below Standard Rate and Rate Plan names on every language version of the Booking Engine.

The numbered steps below match the numbered controls in the image.

  1. Open the Account Menu and select Settings.
  2. Click Booking Engine.
  3. Click the Customize tab.
  4. In the Custom Meta Tags field, paste the code provided below. Replace (Custom Text) with the text you want guests to see, for example, (Includes $30 Resort Fee).
  5. Click Save.

Cloudbeds Booking Engine customization workflow showing Settings, Booking Engine, Customize, Custom Meta Tags, and Save as steps one through five.

  After you click Save, Cloudbeds may ask you to complete step-up multi-factor authentication (MFA) before the custom code is saved.

Copy the code below and replace only the (Custom Text) value with your preferred message.

<!-- **START** Includes (Custom Text) on a new line after All Rate Plan and Standard Rate titles; all accommodation types - Single-language version 12.08.2024 **START** -->
<style>
.cb-rate-plan .cb-rate-plan-title-text::after {
  content: '(Custom Text)';
  font-size: 13px; /* Adjust font size as needed */
  color: #000; /* Adjust text color as needed */
  display: block; /* do not edit */
  margin-top: 4px; /* Adjust spacing as needed */
}
</style>
<!-- **END** Includes (Custom Text) on a new line after All Rate Plan and Standard Rate titles; all accommodation types - Single-language version 12.08.2024 **END** -->

  This version displays the same English custom text on every Booking Engine language page. Changing the Booking Engine language does not translate the custom text automatically.

Version 2: Use English with a separate Spanish translation

Use this version when Spanish should display its own translated message while the English text remains the default for the other Booking Engine languages.

  1. Open the Account Menu and select Settings.
  2. Click Booking Engine.
  3. Click the Customize tab.
  4. In the Custom Meta Tags field, paste the code provided below. Replace the English (Custom Text) value and the Spanish (Texto Personalizado) value with the messages you want guests to see.
  5. Click Save.

  After you click Save, Cloudbeds may ask you to complete step-up multi-factor authentication (MFA) before the custom code is saved.

<!-- **START** Includes (Custom Text) on a new line after All Rate Plan and Standard Rate titles; English + Spanish version 12.08.2024 **START** -->
<style>
/* English Customization - applies to all languages except Spanish */
.cb-rate-plan .cb-rate-plan-title-text::after {
  content: '(Custom Text)';
  font-size: 13px;
  color: #000;
  margin-top: 4px;
  font-weight: 500;
  display: block;
}

/* Spanish Customization - applies only when page is set to Spanish */
html:lang(es) .cb-rate-plan .cb-rate-plan-title-text::after {
  content: '(Texto Personalizado)';
  font-size: 13px;
  color: #000;
  margin-top: 4px;
  font-weight: 500;
  display: block;
}
</style>
<!-- **END** Includes (Custom Text) on a new line after All Rate Plan and Standard Rate titles; English + Spanish version 12.08.2024 **END** -->

  With this version, Spanish uses the text defined for html:lang(es). The English text is used for the other language pages unless you add additional language-specific wrappers.

Use different custom text for specific Rate Plans

Use this option when you have multiple Rate Plans and want a different message to appear below each specific Rate Plan name instead of applying the same text to all displayed rates.

To target an individual Rate Plan, first find its unique Rate Plan ID. You will then add that ID to the CSS selector in the Custom Meta Tags field.

Step 1: Find the Rate Plan ID

  1. Open the Account Menu and select Settings.
  2. Click Rate Plans & Packages.
  3. On the Rate Plan you want to customize, click the three-dot menu, then select Edit.
  4. Look at the URL in your browser's address bar. The number at the end of the URL is the unique Rate Plan ID.

For example, if the URL ends in /packages/43932690342044, the Rate Plan ID is 43932690342044.

  Your Base Rate, which appears as Standard Rate on the Booking Engine, always uses Rate Plan ID 0.

The image highlights where to find the Rate Plan ID at the end of the URL when editing a Rate Plan.

Rate Plans and Packages edit page with the unique Rate Plan ID highlighted at the end of the browser URL.

Step 2: Add the customization

  1. Open the Account Menu and select Settings.
  2. Click Booking Engine.
  3. Click the Customize tab.
  4. In the Custom Meta Tags field, paste the template code provided below.
  5. Replace 123456 with the actual Rate Plan ID and replace the placeholder text with the message you want guests to see.
  6. If you want to customize additional Rate Plans, duplicate the Rate Plan CSS block and update the Rate Plan ID and message for each one.
  7. Click Save.

  After you click Save, Cloudbeds may ask you to complete step-up multi-factor authentication (MFA) before the custom code is saved.

Copy the template below. Keep the -0 selector if you want to add text below Standard Rate. For each specific Rate Plan, replace 123456 with that Rate Plan's ID.

<!-- **START** Custom text for specific Rate Plans **START** -->
<style>

/* Base Rate / Standard Rate (Always uses ID 0) */
.cb-rate-plan[class*='-0'] .cb-rate-plan-title-text::after {
  content: '(Custom Text for Standard Rate)';
  font-size: 12px;
  color: #555;
  display: block;
  margin-top: 8px;
  margin-bottom: 16px;
  line-height: 1.4;
  font-weight: 400;
  text-transform: none;
}

/* Replace 123456 with the unique Rate Plan ID */
.cb-rate-plan[class*='-123456'] .cb-rate-plan-title-text::after {
  content: '(Custom Text for Rate Plan)';
  font-size: 12px;
  color: #555;
  display: block;
  margin-top: 8px;
  margin-bottom: 16px;
  line-height: 1.4;
  font-weight: 400;
  text-transform: none;
}

</style>
<!-- **END** Custom text for specific Rate Plans **END** -->

  You can duplicate the Rate Plan CSS block as many times as needed. Each block should use the unique ID and custom message for the Rate Plan you want to target.

Verify the custom text on the Booking Engine

After saving the customization, open your Booking Engine and confirm that the custom text appears below the intended Standard Rate or Rate Plan names. If you customized individual Rate Plans, confirm that each targeted rate displays its intended message. Review each language you customized before using the result with guests.

Verify the same text across rate titles

With Version 1, the same custom text should appear below Standard Rate and matching Rate Plan titles.

Cloudbeds Booking Engine accommodation card showing the same custom resort fee text below a Rate Plan name and Standard Rate.

Verify the Spanish translation

With Version 2, switch the Booking Engine language to Spanish and confirm that the Spanish custom text appears below both rate titles.

Cloudbeds Booking Engine set to Spanish showing translated custom text below a Rate Plan title and Tarifa estándar.

Verify different text for specific Rate Plans

If you targeted individual Rate Plans, confirm that each one displays the custom message assigned to its Rate Plan ID. Standard Rate should display the text configured for ID 0, if you included that block.

The example below shows different custom messages displayed under individual Rate Plans and Standard Rate.

Cloudbeds Booking Engine showing different custom text below individual Rate Plans and Standard Rate.

  Keep the custom message short and review the Booking Engine after saving to confirm that the text fits the rate-card layout as expected.

Use other languages or advanced customization

The language examples in this article show how to use the same English text across Booking Engine languages or provide a separate Spanish translation. For other languages, use language-specific CSS wrappers so each Booking Engine language can display the appropriate custom text.


Next Operational Step

After you verify the custom text on your Booking Engine, review Booking Engine Plus - Most Common Customization Codes if you want to apply other supported visual customizations.

Was this article helpful?
2 out of 2 found this helpful

Comments

6 comments
  • The class is not correct in this help, it should be

    .cb-title-text.cb-rate-plan-title-text::after {

    0
  • Hello, Yavuz Colasan, 

    Thank you so much for your comment to correct the class on the provided code. 

    Please allow us to review this one and apply the corresponding changes. 

    Thank you 💙

    0
  • I would like the custom text to vary by rate plan. Is there a way to modify this code to do that?

    2
  • Hello, Jason Bresel, 

    We have already escalated your request to our dedicated team. They will review it and will assist as soon as possible.

    Thank you!

    0
  • Hello Juss Reyes - could I also get the info required to execute Jason's request?

    0
  • Hello, Ryan Murfit, 

    Thank you so much for reaching out!

    Sure! I have already created a new ticket for you, including the reference to Jason's request, so our team can also provide you with this information.

    We are happy to assist you 💛

    0

Please sign in to leave a comment.