Introduction

HosterFrame includes a collection of ready-made Framer components designed specifically for building WHMCS-powered websites. These components help you quickly create pages using live product and domain data from your WHMCS installation.

Canvas vs Live Browser

Some components rely on live WHMCS data or browser-specific functionality. Because of this, certain components may not display or behave exactly as expected inside the Framer canvas or preview mode.

For accurate testing, always check your implementation in a real browser after publishing or previewing your site.

Keep Components Updated

We regularly improve HosterFrame components with new features, fixes, and compatibility updates.

If an update is available:

• Open the Assets panel in Framer

• Look for the Update label next to the component

• Apply the latest version to keep everything working smoothly

Adding Components

All HosterFrame components can be inserted directly from the plugin into your Framer project.

Connecting Product/Domain Data

Some components require a Product ID or TLD to load the correct WHMCS product information.

If you’re using one of these components, the Product ID or TLD must be linked to your CMS data source.

Add or Select the Component
Place the component inside a CMS Collection or CMS Page where your product data is available.

Link the Product ID Field
In the component settings:

• Find the Product ID or TLD field

• Click the + icon next to it

• Select the matching Product ID or TLD field from your CMS collection

Nested Components
If your Product ID or TLD is passed through multiple nested layers, make sure the variable is connected at each level until it reaches the final component.

This ensures the correct WHMCS product data is displayed throughout your design.