TL;DR
The Price Comparison block displays OTA rates. Use the Direct Rate block to let guests compare your rate to the OTAs.
You can style font, colors, spacing, and border appearance.
"View All" and loading animation colors can also be customized.
When to Use It
Use this block when you want to:
Show guests how your direct rate compares to OTAs
Build trust by showcasing verified pricing data
Reinforce value through visual contrast with OTA prices
How It Works
The Price Comparison block dynamically pulls in OTA rates based on the sources selected in your Platform Settings. If you want to change the OTAs shown (e.g., Booking.com, Expedia, Agoda), that must be managed separately.
When selected, the block will display a label (Price Comparison) and a border highlight, confirming you're editing the correct element.
Step-by-Step Instructions
1. Select the Price Comparison Block
Click anywhere on the comparison chart. You'll see the block outlined and labeled as Price Comparison.
Suggested screenshot: Block selected with label and pricing visible
2. Customize Font and Colors
In the Price Comparison styling panel:
Font: Select the typeface used for all comparison text
Font color: Sets the color of OTA names, prices, and general text
Weight: Adjust how bold the text appears
Size: Controls the font size of all copy inside the block
Link Color
Affects the color of the "View All" link at the bottom of the block
Loader Color
Controls the loading animation that appears while the tool checks rates
Click the "Preview loading state" toggle to see how the loader appears in action
3. Adjust Typography
Fine-tune spacing with:
Letter spacing: Controls spacing between characters
Line height: Sets the vertical space between lines of text
4. Modify Layout and Border
Use these options to adjust spacing and define the block's edges:
Horizontal & Vertical Padding: Adds internal space between the content and the block’s edges
Border: You can toggle the border on/off, set thickness, and adjust the color to match your brand palette
Pro Tips
Match your loader and link colors to brand colors for a seamless look
Keep font size and weight consistent with other blocks to maintain visual harmony
Adjust padding to ensure the content feels balanced and not cramped
Use the preview loading toggle to test how the block looks in real time
FAQs / Troubleshooting
Question: Can I change which OTAs are shown in this block?
Answer: Yes, but not from the message editor. You’ll need to update OTA sources in your Platform Settings.
Q: Why isn’t the loading animation color changing?
A: Make sure "Preview loading state" is toggled on so you can see the updated color.
Q: The font styling isn’t applying—why?
A: Double-check that you’ve selected the Price Comparison block and not another section or container.