Booking Form Customization

You can fully customize the appearance of your embedded booking form by sending style instructions from your page to the iframe using the postMessage API. This approach enables seamless alignment with your site's branding and user experience requirements.

Supported Customizations

• Color Overrides
  Adjust primary, secondary, accent, and other color variables to match your site's theme.
• Border Radius
  Control the corner radius of cards, input fields, and buttons for a cohesive and modern design.

:::note For a comprehensive list of supported style properties and configuration examples, refer to the Booking Form Styling Guide. :::

// Example: Change primary color and border radius
document.getElementById('booking-iframe').contentWindow.postMessage(
  {
    type: 'TA_STYLE_UPDATE',
    styles: {
      '--ta-primary-color': '#0055A4',
      '--ta-border-radius': '8px'
    }
  },
  '*'
);

You can invoke these calls on your page either before or after rendering the <iframe> to apply custom styles instantly. This functionality is fully supported by the Travel Agent WordPress plugin and any custom implementation utilizing the booking form iframe.