The Guest App allows you to customize background colors across your guest-facing experience, helping you create a more branded and visually consistent experience for guests.
With this update, you can:
- Customize Header and Footer background colors
- Set different background colors for sections and supported widgets
- Preview updates in real time before publishing
- Maintain accessibility with automatic text color adjustments
Supported Widgets
Background customization is currently supported for:
- Recommended Upsells
- Room Upgrade sections
Some components, such as Maps and Banners, currently have limited or separate behavior regarding background customization.
This gives your team greater control over your Guest App branding without requiring support assistance or manual design changes.
Customize Header and Footer Background Colors
You can update the Header and Footer background colors from the Branding settings.
To customize Header and Footer colors:
Go to the Guest App Builder > Styles page > scroll to the Branding section
Locate the Background Color selector next to the Primary Buttons color setting. Add the Hex Color Code or the color picker
Review the live preview on the right side of the screen.
Save and publish your changes.
Customize Background Colors for Sections and Widgets
You can also apply unique background colors to supported sections and widgets.
To customize a section background:
Go to the Guest App Builder > scroll to the Header > click Edit and select the background color for the entire section.
Save your changes.
Accessibility and Automatic Text Adjustments
To improve readability and maintain accessibility standards, Duve automatically adjusts text colors when lighter backgrounds are selected.
This behavior applies to areas such as:
- Header navigation elements
- Footer content
- Banner text
- Product badges in advanced customization settings
For example:
- Light backgrounds automatically switch text to darker colors
- Dark backgrounds automatically use lighter text when needed
This helps prevent low-contrast combinations that may reduce readability for guests.
Best Practices
Use transparent logo files
When using custom Header background colors, we recommend uploading your logo as a transparent .png file.
Transparent logos work best across different background colors and help maintain a clean branded appearance.
Keep branding consistent
For the best guest experience:
- Use colors that match your brand guidelines
- Maintain consistent styling across sections
- Test color combinations in preview mode before publishing
Frequently Asked Questions
Can I preview changes before publishing?
Yes. The Guest App Builder includes a real-time preview that updates immediately as you select colors.
Can I use HEX color codes?
Yes. You can either:
- Select colors using the color picker
- Enter a HEX color value manually
Does Duve automatically adjust text colors?
Yes. Duve automatically adjusts text colors when needed to improve readability and accessibility.
Can I set different colors for different sections?
Yes. Supported sections and widgets can each have their own background color configuration.
Will Header and Footer changes appear across the entire Guest App?
Yes. Header and Footer background updates apply to all Guest App pages where those elements are displayed.
Can I customize all widgets and pages?
Background color customization is currently available only for supported sections and widgets. Additional customization capabilities may be added in future updates.
Comments
0 comments
Please sign in to leave a comment.