← Back to Help Center

WordPress Plugin Guide

Everything you need to install, configure, and get the most out of the QuoteLab WordPress plugin.

1. Installation

There are two ways to install the QuoteLab plugin on your WordPress site.

Option A: Upload via WordPress Admin

  1. 1.Download the plugin ZIP file from your QuoteLab dashboard (Settings → Integrations → WordPress).
  2. 2.In your WordPress admin, go to Plugins → Add New → Upload Plugin.
  3. 3.Choose the ZIP file and click Install Now.
  4. 4.Click Activate Plugin. The setup wizard will start automatically.

Option B: Manual Upload via FTP/SFTP

  1. 1.Extract the ZIP file on your computer.
  2. 2.Upload the quotelab folder to /wp-content/plugins/ on your server.
  3. 3.Go to Plugins in your WordPress admin and click Activate next to “QuoteLab - Booking Widget”.

Note: The plugin requires WordPress 5.8+ and PHP 7.4+. If your site doesn't meet these requirements, you'll see a notice after activation.

2. Setup Wizard

When you first activate the plugin, a 4-step setup wizard guides you through the entire configuration. You can also re-run it later from Settings → QuoteLab → Run Setup Wizard.

1

Step 1: Enter API Key

Paste your API key from the QuoteLab dashboard. You'll find it under Settings → Integrations. The wizard auto-fills the API base URL for you.

2

Step 2: Verify & Confirm

The plugin contacts QuoteLab to verify your API key and retrieves your business name, slug, and available widgets. A green "Connected!" message confirms everything works.

3

Step 3: Choose Default Widget

If your account has multiple widget configurations, choose which one to use by default. Most businesses have one, in which case it is selected automatically.

4

Step 4: Place Widget

Choose how you want to embed the widget: edit a specific page to add the Gutenberg block, enable the floating button site-wide, or copy the shortcode for later use. You can do all three.

Tip: You don't need to complete all steps right away. The wizard saves your progress, so you can close it and come back later.

3. Settings Overview

After the wizard completes, the full settings page is available at Settings → QuoteLab. It has two sections:

Connection

Your API key, business slug, and API base URL. Use the Verify Connection button to confirm everything is working. The business name and slug are auto-populated from QuoteLab when you verify.

Widget Defaults

Configure the default widget and display mode (inline or floating). These defaults apply to shortcodes and blocks when you don't specify overrides. This section also contains the floating widget toggle, auto-generated service pages toggle, and floating button customization options.

Tip: The settings page includes a “Quick Start” box at the top showing how to use the Gutenberg block, shortcode, and floating widget. It updates based on your connection status.

4. Gutenberg Blocks

The plugin registers three native Gutenberg blocks. Open the block inserter (click the + button) and search for “QuoteLab” to find them.

Booking Widget Block

Embeds the full booking flow: service selection, quote calculation, date/time picker, customer info, and payment. This is the primary block for most pages. In the block sidebar, you can override the widget slug and display mode.

+Search "QuoteLab" → Insert Booking Widget

Reviews Widget Block

Displays verified customer reviews from your QuoteLab account. Configure the number of reviews to show, theme (light or dark), and layout directly in the block sidebar. Great for testimonials sections, landing pages, or alongside the booking widget.

Pricing Table Block

Renders a pricing table showing your services and their base prices. Pulls data live from your QuoteLab account, so it always stays in sync when you update pricing. You can toggle which columns to display and choose between compact and detailed layouts.

Tip: All three blocks show a live preview in the editor so you can see exactly what your visitors will see before publishing.

5. Shortcodes

Shortcodes work in the classic editor, text widgets, and any page builder that supports WordPress shortcodes.

Booking widget

[quotelab]

Embeds the booking widget using your default settings.

Booking widget with overrides

[quotelab widget="exterior-detail" mode="inline"]

Override the widget configuration and display mode per instance.

Reviews widget

[quotelab_reviews]

Displays your customer reviews.

Reviews widget with options

[quotelab_reviews count="5" theme="dark"]

Show a specific number of reviews and set the color theme.

6. Elementor Widget

If you use Elementor as your page builder, the plugin registers a native Elementor widget so you can drag and drop it just like any other Elementor element.

  1. 1.Open a page in Elementor.
  2. 2.Search for “QuoteLab” in the Elementor widget panel (left sidebar).
  3. 3.Drag the QuoteLab Booking Widget onto your page.
  4. 4.In the widget settings panel, optionally override the widget slug and display mode.

Note: The Elementor widget only appears if Elementor is installed and active. You do not need to install anything extra.

7. WPBakery Element

For sites using WPBakery Page Builder (formerly Visual Composer), the plugin registers a native element.

  1. 1.Open the WPBakery editor (Backend or Frontend mode).
  2. 2.Click Add Element and search for “QuoteLab”.
  3. 3.Insert the QuoteLab Booking Widget element.
  4. 4.Configure the widget slug and display mode in the element settings.

Note: Like the Elementor widget, this only appears if WPBakery Page Builder is installed and active on your site.

8. Floating Widget

The floating widget adds a persistent “Book Now” button that appears on every page of your site. When visitors click it, the booking widget opens in a modal overlay. Enable it from Settings → QuoteLab → Widget Defaults.

Customization options

SettingOptionsDefault
Button textAny text“Book Now”
PositionBottom-right, bottom-leftBottom-right
TriggerImmediate, scroll %, time delay, exit intentImmediate
Scroll percentage1-100%50%
DelaySeconds5 seconds
Background colorAny hex color#1e40af
Text colorAny hex color#ffffff

Tip: The exit intent trigger shows the button when a visitor moves their cursor toward the browser's close button. This is a great way to catch visitors who are about to leave without booking.

9. Auto-Generated Service Pages

The plugin can automatically create a WordPress page for each service in your QuoteLab account. Each page includes the booking widget block pre-inserted and is optimized for search engines.

How to enable

  1. 1.Go to Settings → QuoteLab.
  2. 2.Check “Auto-Generate Service Pages” under Widget Defaults.
  3. 3.Save changes. The plugin will create pages for all your active services.

How it works

  • One WordPress page per active service, with the booking widget pre-inserted
  • A daily WP-Cron job checks for new or removed services and syncs automatically
  • Pages are created as drafts by default so you can review and customize before publishing
  • You can edit the generated pages like any other WordPress page

10. SEO Schema Markup

The plugin automatically injects JSON-LD structured data on any page that contains a QuoteLab shortcode or Gutenberg block. This helps search engines understand your business and services, improving your chances of appearing in rich results.

What gets added

  • LocalBusiness schema with your business name, address, and contact info
  • Service schema for each of your services with names and pricing
  • Data is fetched from your QuoteLab account and cached for performance

Yoast SEO integration

If you have Yoast SEO installed, the plugin integrates with Yoast's schema graph instead of injecting a separate JSON-LD block. This avoids duplicate schema and follows Yoast's best practices for structured data.

Tip: Test your structured data using Google's Rich Results Test to confirm everything is recognized correctly.

11. Analytics Bridge

The plugin includes an analytics event bridge that automatically forwards widget events to your existing analytics tools. No configuration needed on your end.

Supported platforms

  • Google Analytics 4 - events sent via gtag() if detected on the page
  • Google Tag Manager - events pushed to dataLayer if GTM is present
  • Facebook/Meta Pixel - events sent via fbq() if the pixel is installed

Events forwarded

Widget EventGA4 Event Name
bookkit:quote-calculatedquotelab_quote_calculated
bookkit:booking-confirmedquotelab_booking_confirmed
bookkit:step-changedquotelab_step_changed

Tip: The bridge auto-detects your analytics tools at runtime. If you add GA4 or Facebook Pixel to your site later, the bridge will automatically start forwarding events without any changes to the plugin settings.

12. Dashboard Stats Widget

Once your account is connected, a QuoteLab stats widget appears on your WordPress dashboard (the main admin home screen). It shows a quick overview of your booking activity so you can see how things are going without leaving WordPress.

  • Total bookings and revenue at a glance
  • Quick link to your full QuoteLab dashboard
  • Connection status indicator

Tip: If you don't see the widget, click Screen Options at the top of the Dashboard page and make sure the QuoteLab widget is checked.

13. Shortcode Reference

[quotelab] attributes

AttributeDescriptionDefault
widgetWidget configuration slugYour default widget
modeDisplay mode: inline or floatinginline

[quotelab_reviews] attributes

AttributeDescriptionDefault
countNumber of reviews to displayAll
themeColor theme: light or darklight

14. Troubleshooting

Widget does not appear on the page

  • Verify the plugin is activated under Plugins.
  • Go to Settings → QuoteLab and click Verify Connection. You should see a green “Connected!” confirmation.
  • Ensure you have at least one active service in your QuoteLab dashboard.
  • Check your browser console (F12) for JavaScript errors.

“Connection failed” when verifying

  • Double-check your API key. Copy it fresh from your dashboard settings (Integrations tab).
  • Make sure your business slug is entered correctly (no spaces, lowercase).
  • Check that your server can make outbound HTTPS requests to quotelab.io. Some hosting providers block outbound requests by default.

Widget styling looks broken

The widget runs inside Shadow DOM, which isolates its styles from your theme. If you see layout issues, it is usually caused by aggressive CSS resets targeting the widget's container element. Try adding some width to the container:

.bookkit-widget-container {
  max-width: 100%;
  width: 100%;
}

Caching plugin showing stale content

If you use a caching plugin (WP Super Cache, W3 Total Cache, LiteSpeed Cache, etc.), clear your cache after making changes to the plugin settings. The widget itself loads dynamically and is not affected by page caching, but the shortcode output and schema markup may be cached.

Conflict with another plugin

The QuoteLab plugin has zero dependencies and is designed to coexist with any other plugin. If you suspect a conflict, temporarily deactivate other plugins one by one to identify the culprit. Common sources of conflicts are security plugins that block external scripts and optimization plugins that defer or minify JavaScript.

Floating button not showing

  • Confirm the floating widget is enabled in Settings → QuoteLab.
  • If your trigger is set to “scroll” or “delay”, scroll down or wait for the button to appear.
  • Check for a z-index conflict with your theme's sticky header or other fixed elements.

15. FAQ

Is the plugin free?

Yes. The WordPress plugin is completely free. Your QuoteLab plan determines booking limits and features.

Does the plugin process payments?

No. All payment processing happens securely on QuoteLab's servers via Stripe. The plugin only embeds the widget.

Does it work with my theme?

Yes. The booking widget uses Shadow DOM for complete CSS isolation. It works with every WordPress theme including Astra, GeneratePress, Divi, Elementor themes, block themes, classic themes, and custom themes.

Can I use shortcodes and Gutenberg blocks on the same site?

Absolutely. You can mix and match all embed methods. Use the Gutenberg block on some pages, shortcodes on others, and have the floating widget running site-wide.

Does the widget affect my page speed?

Minimal impact. The loader script is approximately 2KB and loads asynchronously. The full widget bundle only loads when the visitor scrolls to it or clicks the floating button.

Do I need Elementor or WPBakery to use the plugin?

No. Those integrations are optional. The plugin works with the standard WordPress block editor and shortcodes out of the box.

Will the auto-generated pages override my existing pages?

No. Service pages are created as new draft pages. They never modify or replace existing content.

How do I update the plugin?

When a new version is available, you will see an update notification in your WordPress admin. Click "Update Now" to install the latest version. Your settings are preserved across updates.

Ready to add booking to your WordPress site?

Create your free QuoteLab account and install the plugin in under 5 minutes.