Axle provides fully-hosted components that can be embedded in your application through iFrames or mobile web views. These components are served from Axle’s infrastructure and communicate with your application through URL parameters and postMessage events.

​
Communication

Hosted components communicate with your application through:
  • URL Parameters: Pass configuration and theming data through query parameters
  • PostMessage Events: Send and receive form lifecycle events through the postMessage API.

​
Authentication

To prevent JWT tokens from being logged or cached in URLs, these must be sent through the postMessage API. To ensure security, we validate the origin of all messages received in iFrames against the origin specified in the JWT. This means you must embed the iFrame within a website hosted on your specified allowed_origin.
You must specify the destination origin in postMessage to prevent leaking tokens to untrusted websites
iframe.contentWindow.postMessage({
  token: jwtToken,
  type: 'axle:token'
}, 'https://app.axle.energy'); // MUST specify this

​
Theming

Hosted components support comprehensive theming through URL parameters. You can customize the appearance by passing color and styling properties in the URL query string.

​
Color Properties

Pass color values using these URL parameters:
  • background - Main background color
  • foreground - Primary text color
  • popover - Popover background color
  • popoverForeground - Popover text color
  • primary - Primary brand color
  • primaryForeground - Primary button text color
  • secondary - Secondary background color
  • secondaryForeground - Secondary text color
  • destructive - Error/destructive action color
  • border - Border color
  • ring - Focus ring color
  • muted - Muted background color
  • mutedForeground - Muted text color

​
Dark Mode Support

For dark mode theming, prefix any color property with dark-:
  • dark-background - Dark mode background color
  • dark-foreground - Dark mode text color
  • dark-primary - Dark mode primary color
  • etc.

​
Additional Properties

  • radius - Border radius (e.g., 0.5rem, 8px)
  • fontFamily - Font family name

​
Example Usage

<iframe src="https://components.axle.energy/form?
  background=%23ffffff&
  foreground=%23000000&
  primary=%23007AFF&
  primaryForeground=%23ffffff&
  radius=0.5rem&
  fontFamily=Inter&
  dark-background=%23000000&
  dark-foreground=%23ffffff&
  externalAssetId=your-asset-id">
</iframe>
All color values must be valid CSS colors (hex, rgb, rgba, hsl, hsla, oklch) and size values must include valid CSS units.