MyListing Embed Listing Page
The {CODICTS} MyListing Embed Listing Page plugin lets listing owners generate embeddable code snippets for their MyListing listing pages. These snippets can be pasted into any external website to display a fully interactive version of the listing — complete with images, maps, contact forms, and all content blocks — inside an auto-resizing iframe.
Installation & Activation
Start by downloading the plugin from the Downloads page on your dashboard on the CoDicts website.
After downloading, install and activate the plugin in WordPress by navigating to “Plugins” > “Add New” > “Upload Plugin” and selecting the downloaded zip file. Click “Install Now” and then “Activate”.
Once activated, navigate to “Embed Listing Page” in the WordPress admin sidebar and create at least one Embed Tag Form to enable the embed feature for your listing owners.
Key Features
| Feature | Description |
|---|---|
| Embeddable Listings | Listing owners get a simple code snippet they can paste into any external website to display their listing. |
| Per-Listing-Type Targeting | Create different embed configurations for different listing types (e.g., Restaurants vs. Hotels). |
| Per-Package Targeting | Optionally restrict embed availability to listings with specific WooCommerce listing packages or subscriptions. |
| Configurable Options | Control whether listing owners can toggle options like custom logo, open links in new tab, and disable taxonomy links. |
| Auto-Resizing Iframe | The embedded listing automatically adjusts its height to fit its content — no scrollbars. |
| Header/Footer Stripping | The theme’s header, footer, and admin bar are automatically hidden inside the embed. |
| Full Listing Functionality | Image galleries, maps, contact forms, and interactive blocks all work inside the embed. |
| Mobile Responsive | The embed is fully responsive and adapts to any screen size. |
How It Works
The plugin works in three stages:
1. Admin configures Embed Tag Forms — You create one or more “Embed Tag Forms” in the WordPress admin. Each form defines which listing types and packages can use the embed feature, and what options listing owners can configure.
2. Listing owner generates embed code — On the My Listings dashboard, an “Embed” button appears next to eligible listings. Clicking it opens a modal where the listing owner can toggle options and copy a generated code snippet.
3. External website displays the listing — The snippet is pasted into any external website’s HTML. It loads a small script from your WordPress site that creates an auto-resizing iframe showing the full listing page (minus header and footer).
Admin Setup: Creating Embed Tag Forms
Embed Tag Forms control which listings can be embedded and what options are available. You need at least one form for the embed feature to work.
Step 1: Create a New Form
Navigate to Embed Listing Page → Add New in the WordPress admin.
Step 2: Enter a Title
Give the form a descriptive name (e.g., “Restaurant Embed Form”). This is for your internal reference only — listing owners won’t see it.
Step 3: Set Listing Type Filters
In the Target Listing Type(s) field, select which MyListing listing types this embed form applies to. Leave blank to apply to all listing types.
Step 4: Set Package Filters (Optional)
In the Target Listing Package(s) field, select which WooCommerce listing packages or subscriptions this form applies to. Leave blank to apply to all packages. This lets you offer embedding as a premium feature for specific pricing tiers.
Step 5: Configure Embed Options
Set default values and visibility for each embed option (see the reference table below).
Step 6: Save
Click “Save”. The embed feature is now active for matching listings.
Form Settings Reference
Each Embed Tag Form has several configurable options. For each option, you set a default value and choose whether to show it to the listing owner on the frontend.
| Setting | Description | Default |
|---|---|---|
| Target Listing Type(s) | Which listing types can use this embed form. Leave blank for all types. | All types |
| Target Listing Package(s) | Which WooCommerce listing packages can use this form. Leave blank for all packages. | All packages |
| Use logo URL? | Whether the embed should display a custom logo replacing the site’s default logo. | No |
| Default logo URL | The URL of the replacement logo image. | Empty |
| Open links in new tab? | Whether links inside the embedded listing open in a new browser tab instead of navigating within the iframe. | No |
| Disable taxonomy links? | Whether category, tag, and other taxonomy links are made non-clickable inside the embed. | No |
The “Show on Frontend” Toggle
Each option has a paired “Show this option on frontend?” checkbox:
| Setting | Behavior |
|---|---|
| Checked | The listing owner sees this option in the embed modal and can change it. |
| Unchecked | The admin’s default value is enforced silently. The listing owner cannot see or change this option. |
This gives you full control over what listing owners can customize. For example, you might want to always enforce “Open links in new tab” without giving the listing owner the choice.
Using Multiple Embed Tag Forms
You can create multiple Embed Tag Forms for different scenarios. For example:
A “Restaurant Embed” form targeting only the “Restaurant” listing type, with taxonomy links disabled by default.
A “Premium Embed” form targeting only the “Gold Package”, with all options visible to the listing owner.
A “Basic Embed” form with no filters (applies to all remaining listings) and minimal options.
If a listing matches multiple forms, the first match is used.
Managing Embed Tag Forms
Navigate to Embed Listing Page → Embed Tag Forms to see all your forms in a list.
| Feature | Description |
|---|---|
| Search | Search forms by title. |
| Sort | Sort by Title, Author, or Date. |
| Edit | Click a form title to open the editor. |
| Duplicate | Create a copy of a form (appends “_copy” to the title). |
| Delete | Permanently delete a form. |
| Bulk Delete | Select multiple forms and delete them at once. |
Listing Owner Experience
The Embed Button
When a listing owner visits their My Listings dashboard, an “Embed” action button appears next to each eligible listing. A listing is eligible when:
1. Its status is published.
2. Its listing type matches an Embed Tag Form’s target types (or the form targets all types).
3. Its listing package matches an Embed Tag Form’s target packages (or the form targets all packages).
The Embed Modal
Clicking the “Embed” button opens a modal with the available options (based on which toggles the admin has enabled) and a text area containing the generated embed code.
The available toggles (depending on admin configuration) are:
| Option | What It Does |
|---|---|
| Use logo URL? | Replaces the site logo with a custom image in the embedded listing. |
| Logo URL | The URL of the replacement logo image. |
| Open links in new tab? | Links inside the embed open in a new browser tab instead of navigating within the iframe. |
| Disable taxonomy links? | Category, tag, and term links become non-clickable inside the embed. |
The embed code in the textarea updates in real time as the listing owner toggles options. They simply copy the code and paste it into their external website’s HTML.
How the Embed Works on External Sites
When the embed snippet is pasted into an external website:
1. A small JavaScript file is loaded from your WordPress site.
2. An iframe is created that loads the listing page directly from your site, with the header and footer automatically removed.
3. The iframe automatically resizes its height to match the listing content, eliminating scrollbars.
4. Interactive elements like image galleries (PhotoSwipe), maps, contact forms, and accordion blocks all work normally inside the embed.
5. Google Maps and WhatsApp links always open in a new tab regardless of the link settings.
Server Requirements for Embedding
Important: For the embed to work on external websites, your WordPress server must allow its pages to be loaded inside iframes on other domains. If your server sends
X-Frame-Options: SAMEORIGINorDENYheaders, the embed will be blocked by the browser.
Check with your hosting provider or security plugin to ensure iframe embedding is allowed. Common solutions include removing or modifying the X-Frame-Options header, or using the Content-Security-Policy: frame-ancestors header to allow specific domains.
Frequently Asked Questions
Can I create multiple Embed Tag Forms?
Yes. Create as many as you need, each targeting different listing types and/or packages with different default options.
What if a listing matches multiple forms?
The plugin uses the first matching form. Forms with specific type/package filters are prioritized over forms that target all types/packages.
Can listing owners change the embed options?
Only the options you’ve enabled with the “Show this option on frontend?” toggle. Options without the toggle checked use your default values and are hidden from the listing owner.
Does the embed work on any website?
Yes, as long as your WordPress server allows iframe embedding (see Server Requirements above). The external website just needs to support HTML and JavaScript.
Does the embed preserve all listing functionality?
Yes. The embed shows the full listing page minus the header and footer. Image galleries, maps, contact forms, tabs, and interactive blocks all work normally.
Is the embed mobile responsive?
Yes. The iframe is set to 100% width and auto-resizes its height. The listing content inside is fully responsive.
Does the plugin affect SEO?
No. The embed snippets are rendered client-side via JavaScript and iframes, which search engines generally don’t index. Your original listing pages remain fully indexable.
Can I customize the loading spinner?
The spinner uses CSS classes .codicts-mlelp-loader and .lds-ring. You can override these styles on the external website to customize the appearance.
Troubleshooting
Embed Shows a Blank Page or Error on External Sites
| Cause | Solution |
|---|---|
| X-Frame-Options header | Your server is sending X-Frame-Options: SAMEORIGIN or DENY, which blocks iframe embedding. Remove or modify this header. See your hosting provider’s documentation or this guide for instructions. |
| Content-Security-Policy header | The frame-ancestors directive in your CSP may be blocking iframe embedding. Check your server or security plugin configuration. |
| Mixed content (HTTP/HTTPS) | If your site uses HTTPS and the external site uses HTTP (or vice versa), the browser may block the iframe. Ensure both sites use HTTPS. |
Embed Button Not Appearing on My Listings Dashboard
| Cause | Solution |
|---|---|
| No Embed Tag Form created | Create at least one Embed Tag Form in Embed Listing Page → Add New. |
| Listing not published | The embed button only appears for listings with publish status. |
| Listing type doesn’t match | If your Embed Tag Form targets specific listing types, verify the listing’s type is included. |
| Listing package doesn’t match | If your form targets specific packages, verify the listing’s package is included. |
Logo Not Replacing in the Embed
| Cause | Solution |
|---|---|
| “Use logo URL?” is set to No | Set it to “Yes” in the Embed Tag Form, or enable the toggle so the listing owner can turn it on. |
| Invalid logo URL | Verify the logo URL points to a valid, publicly accessible image. |
“MyListing Theme Not Detected” Error
The MyListing theme must be installed and active. Go to Appearance → Themes to verify. The plugin’s settings and functionality do not load without MyListing.
Settings Page Not Appearing
| Cause | Solution |
|---|---|
| MyListing not active | Install and activate the MyListing theme first. |
| Plugin not activated | Verify the plugin is active in Plugins → Installed Plugins. |
For further support, visit codicts.com or contact us at support@codicts.com.