Embedding on Your Site

Once you have built and published an estimator, getting it onto your site is a one-step operation. You have two equivalent options: the block (recommended) or the shortcode.

Option A — The Gutenberg Block (Recommended)

If your site uses the modern WordPress editor, the block is the cleanest way.

  1. Open the page or post where you want the estimator.
  2. Click the (+) button to add a new block.
  3. Type “ApproxIt” in the search.
  4. Click ApproxIt Estimator.
  5. In the block settings (sidebar), select which estimator to display.
  6. Save / Update.

The block renders a clean live preview of the form right in the editor, so you can see roughly how it will look without leaving the editing experience.

Where the Block Works

The ApproxIt Estimator block works anywhere standard blocks work:

  • Pages
  • Posts
  • Custom post types that support the block editor
  • Reusable blocks / patterns
  • Full Site Editor templates and template parts (use it in your “Contact” template, for example)

Multiple Blocks on One Page

You can drop multiple instances of the block on a single page if you want to offer customers a choice between two estimators side-by-side, but in most cases, one estimator per page works best.

Option B — The Shortcode

If you are using the Classic editor, a page builder that supports shortcodes (Elementor, Beaver Builder, Bricks, etc.), or any context where the block does not apply, use the shortcode.

The shortcode is shown next to each estimator on the Estimators list page. It looks like:

Plaintext

[approxit id="42"]

Paste it into:

  • A Classic editor field
  • A text widget in your sidebar or footer
  • A shortcode block (if you are mixing with Gutenberg)
  • A page builder’s “shortcode” or “code” widget
  • Your theme’s PHP templates: <?php echo do_shortcode( '[approxit id="42"]' ); ?>

The id attribute is your estimator’s post ID—find it in the URL when editing the estimator (...post.php?post=42...) or in the shortcode shown on the Estimators list.

Theme Integration

The estimator inherits your site’s design when it can, and falls back to its own clean defaults when it cannot.

Accent Color

Each estimator has its own accent color set in the workshop. This drives:

  • Primary action buttons (“Get Estimate”, “Send My Estimate”)
  • The running total highlight
  • Progress dots / step indicators
  • The colored bar at the top of customer estimate emails

If you want all your estimators to share your brand color, set the same accent on each one when building them.

Fonts and Base Styling

The form uses your site’s body font by default. Headlines use system fonts as a fallback if the theme does not define alternatives.

The form is fully responsive—single-column on mobile, two-column on tablet and desktop. It works with any modern theme.

Custom Styling

If you want to override the look beyond the accent color, your theme can add CSS targeting the public form’s namespace (.ax- prefix). See the Theming developer documentation for details on the available CSS variables.

Customer Flow

When a visitor lands on a page with your estimator, here is what they experience:

  1. Service selection (Step 1) — They see your service list (or package picker), tick what applies, and see the total update live.
  2. Project questions (if any) — They answer your questions; the total recalculates.
  3. Contact form (Step 2) — They enter their name, email, optional phone, optional address, and optional notes.
  4. Submit — The form posts to your WordPress site via standard AJAX. No third-party servers.
  5. Confirmation — The form shows “Estimate Sent!” once their submission is recorded.

A few seconds later:

  • They receive a customer receipt email with the estimate breakdown and your business phone.
  • You receive an owner alert email with the lead score, contact info, and breakdown.

Both emails are configurable under Settings → General.

What Customers Cannot See

A few things stay internal—customers never see them:

  • Your lead-score thresholds (hot/warm/cold logic).
  • Internal admin notes you add to leads.
  • Other customers’ submissions.
  • Your settings page.

The public form is intentionally minimal—pricing, options, and submit. Nothing else.