Embed widgets: brand color and checkout language

CSS you add to your own page does not change the color or text of HomeRunner embed widgets.

Why this happens. The widgets render inside their own isolated container, so CSS on your page cannot restyle them. Instead, use the widget options in the data-hr-options attribute of each embed.

Brand color. Add "lightModeColors":{"accent":"#9a7c34"} with your own hex value. If you use a dark theme, also add "darkModeColors":{"accent":"#9a7c34"}. This recolors the price, the primary buttons and the total on the booking widget, the checkout and the confirmation page. Only the accent changes. Everything else keeps the saved widget settings.

Language. Set "language":{"useAutoDetectedLocale":false,"locale":"nl_BE"} on each page, for example nl_BE on your Dutch page and fr_BE on your French page. Checkout and confirmation labels follow the locale. For custom wording per locale, use the translations option in the form {"<label key>":{"nl_BE":"…","fr_BE":"…"}}.

Checkout extras. These options are also available:

1. "showPropertyRules":false hides the House Rules block.
2. "termsUrl" and "privacyUrl" make the agreement sentence link to your pages.
3. "topCountries":"be,nl,fr" and "defaultCountryCode":"be" set the default country for the phone field.

Still stuck? Contact the HomeRunner team with your site address and what you tried, and we take it from there.