CMS Guide

WordPress Integration

Embed Widgetfied widgets into any WordPress site with simple HTML blocks.

Works With Any WordPress Site

Add professional widgets to your WordPress pages and posts in seconds.

• Works with Gutenberg Block Editor
• Works with Classic Editor
• Works with Page Builders (Elementor, Divi, etc.)
• No plugins required
• SEO-friendly implementation

Quick Start (1 Minute)

Add a widget to your WordPress page in 3 simple steps:

Edit Your Page

Open the page/post where you want the widget in WordPress editor

Add Custom HTML Block

Click the "+" button and search for "Custom HTML"

Paste Widget Code

Copy and paste the widget embed code

Widget Embed Codes

Copy the appropriate code for your widget type. Replace YOUR_TENANT_ID with your actual tenant ID.

AI Estimate Widget

Let customers get instant AI-powered estimates

Get AI Estimate

<script src="https://cdn.widgetfied.com/portal.js"></script>
<div id="estimate-widget"
  data-widget="estimate"
  data-tenant="YOUR_TENANT_ID"
  data-container="estimate-widget"
  data-display-mode="button">
</div>

Booking Widget

Allow customers to book appointments

Book Appointment

<script src="https://cdn.widgetfied.com/portal.js"></script>
<div id="booking-widget"
  data-widget="booking"
  data-tenant="YOUR_TENANT_ID"
  data-container="booking-widget"
  data-display-mode="button">
</div>

Job Portal Widget

Customers can view job status and details

View Job Status

<script src="https://cdn.widgetfied.com/portal.js"></script>
<div id="portal-widget"
  data-widget="jobportal"
  data-tenant="YOUR_TENANT_ID"
  data-container="portal-widget"
  data-display-mode="button">
</div>

Payment Widget

Accept payments directly on your site

Make Payment

<script src="https://cdn.widgetfied.com/portal.js"></script>
<div id="payment-widget"
  data-widget="payment"
  data-tenant="YOUR_TENANT_ID"
  data-container="payment-widget"
  data-display-mode="button">
</div>

Important: Replace YOUR_TENANT_ID

Get your tenant ID from your Widgetfied dashboard under Settings → API Keys

Gutenberg Block Editor

For WordPress 5.0+ with the modern block editor

1. Open Page/Post Editor

Navigate to Pages or Posts in your WordPress admin and edit the page where you want to add the widget.

Tip: You can add widgets to any page, post, or custom post type

2. Add Custom HTML Block

Click the "+" button to add a new block. Search for "Custom HTML" and select it.

Type: /html in the editor for quick access

3. Paste Widget Code

Copy one of the widget codes above and paste it into the Custom HTML block.

Remember to replace YOUR_TENANT_ID with your actual tenant ID from your Widgetfied dashboard

4. Preview and Publish

Click "Preview" to see how it looks, then "Update" or "Publish" to save your changes.

Tip: The widget button will appear immediately after publishing

Classic Editor

For older WordPress versions or Classic Editor plugin users

1. Switch to Text/HTML Mode

In the Classic Editor, click the "Text" tab (not "Visual") in the top-right of the editor.

You must be in Text mode to add HTML code

2. Paste Widget Code

Copy the widget code and paste it where you want the button to appear in your content.

You can switch back to Visual mode after pasting to continue editing

3. Update/Publish

Click "Update" or "Publish" to save your changes.

Page Builder Integration

Works with popular WordPress page builders

🎨

Elementor

1.Drag an "HTML" widget to your page
2.Paste the widget code in the HTML Code field
3.Click "Update" to save

🔧

Divi Builder

1.Add a "Code" module to your layout
2.Paste the widget code in the Code field
3.Save & Exit

📦

WPBakery

1.Add "Raw HTML" or "Raw JS" element
2.Paste the widget code
3.Save changes

🦫

Beaver Builder

1.Add an "HTML" module
2.Paste the widget code
3.Publish your changes

Replacing Existing Buttons

How to replace your current CTA buttons with Widgetfied widgets

Locate the Button

Find the button you want to replace in your editor (e.g., "Get a Free Quote", "Book Now", etc.)

Delete the Button

Click on the button block and delete it (press Delete key or click the trash icon)

Add HTML Block

Click the "+" where the button was and add a Custom HTML block

Paste Widget Code

Paste your Widgetfied widget code with display-mode="button"

The widget will automatically style itself to match your white-label settings

Configuration Options

Customize widget behavior with data attributes

data-widgetRequired

Widget type

estimatebookingjobportalpayment

data-tenantRequired

Your tenant ID

YOUR_TENANT_ID

Get this from your Widgetfied dashboard

data-containerRequired

Unique container ID

Any unique string

Must be unique if using multiple widgets on same page

data-display-mode

How the widget appears

buttonmodalinline

Default: button

Multiple Widgets on Same Page

You can add multiple widgets to the same page

<!-- Estimate Widget -->
<script src="https://cdn.widgetfied.com/portal.js"></script>
<div id="estimate-widget"
  data-widget="estimate"
  data-tenant="YOUR_TENANT_ID"
  data-container="estimate-widget"
  data-display-mode="button">
</div>

<!-- Booking Widget (further down the page) -->
<div id="booking-widget"
  data-widget="booking"
  data-tenant="YOUR_TENANT_ID"
  data-container="booking-widget"
  data-display-mode="button">
</div>

Only include the <script> tag once, even with multiple widgets

Styling & Positioning

Control widget placement and appearance

Center the Button

<div style="text-align: center;">
  <script src="https://cdn.widgetfied.com/portal.js"></script>
  <div id="estimate-widget"
    data-widget="estimate"
    data-tenant="YOUR_TENANT_ID"
    data-container="estimate-widget"
    data-display-mode="button">
  </div>
</div>

Add Spacing

<div style="margin: 40px 0;">
  <!-- Widget code here -->
</div>

Full Width Button

<div style="width: 100%; max-width: 400px; margin: 0 auto;">
  <!-- Widget code here -->
</div>

Domain Whitelisting

Required for your widget to function on your WordPress site

Widgetfied requires you to whitelist your domain for security. This ensures your widgets only run on authorized domains.

1.Log in to your Widgetfied dashboard
2.Go to Settings → Allowed Domains
3.Enter your WordPress domain (without https://)
4.Click Save

Example Domain Formats

Local Development:

URL: http://developer.local/wp-admin/post.php?post=123

Whitelist entry: developer.local

Live WordPress Site:

URL: https://www.acmeplumbing.com/services/emergency-repair/

Whitelist entry: acmeplumbing.com

WordPress.com Hosted:

URL: https://mybusiness.wordpress.com/contact/

Whitelist entry: mybusiness.wordpress.com

Only add the domain portion, not the full URL with paths. For www domains, you can use either with or without www.

Troubleshooting

Widget button not appearing

Verify YOUR_TENANT_ID is replaced with your actual tenant ID
Ensure your domain is whitelisted in Widgetfied settings
Check browser console for JavaScript errors
Ensure the script tag is included before the div
Clear WordPress cache if using caching plugins

Widget appears but doesn't open

Check that data-widget value matches your enabled widgets
Verify your tenant has the widget type enabled
Ensure no JavaScript conflicts with theme/plugins

Styling conflicts with theme

Widget styles are isolated and shouldn't conflict
Try wrapping in a div with specific styling
Contact support if theme overrides are too aggressive

Widget not working in page builder

Make sure you're using HTML/Code module, not text
Some builders require "Raw HTML" or "Custom HTML" specifically
Try adding to a WordPress HTML block instead of builder element

Best Practices

Test on Mobile

Always preview your pages on mobile devices to ensure widgets display correctly

Use Descriptive IDs

Use clear container IDs like "hero-estimate-widget" or "sidebar-booking-widget"

Cache Considerations

Clear cache after adding widgets if using caching plugins (W3 Total Cache, WP Rocket, etc.)

SEO Friendly

Widgets load asynchronously and don't impact page load speed or SEO

Backup First

Always backup your page content before making changes

Common Use Cases

Hero Section CTA

Replace your main call-to-action button in the hero/header area

Above the fold, prominently displayed

Service Pages

Add estimate widgets to individual service pages

After service description, before testimonials

Contact Page

Offer multiple contact options with booking and estimate widgets

Alongside contact form or contact information

Sidebar Widget

Add to sidebar for persistent availability

WordPress widget area using Custom HTML widget

Footer CTA

Final call-to-action before users leave

Footer widget area or before footer

Need Help?

Our support team is here to help you integrate widgets into your WordPress site.

View All Docs Contact Support

React & Next.js

Framework integration

Squarespace

Squarespace integration