Back to Community

How to Use Third-Party Widgets and Shortcodes in Pagelayer

Content

Integrating third-party plugins and widgets is a common need when building a website. If you're using the Page Builder: Pagelayer – Drag and Drop website builder, you might be wondering how to incorporate external tools like SmartSlider or booking forms into your designs. This guide explains the two primary methods for doing this effectively.

The Problem: Missing Widgets in the Pagelayer Panel

You have a specific functionality in mind for your site, but the native Pagelayer widgets don't cover it. Perhaps you need an advanced slider, a complex booking system, or a specialized events calendar from another plugin. The widget doesn't appear in Pagelayer's left-hand widget panel, leaving you unsure how to proceed.

Why This Happens

Pagelayer can automatically detect and list widgets that are properly registered with the WordPress core. However, not all plugin developers register their widgets in this way. Some plugins instead provide functionality through a shortcode, which is a small piece of code placed between square brackets (e.g., [myshortcode]) that outputs content when the page is rendered.

Solution 1: Use the WordPress Widgets Section

If the third-party plugin correctly registers its widget with WordPress, it will be available within the Pagelayer editor itself.

  1. Open the page or template in the Pagelayer editor.
  2. Look on the left-hand sidebar for the widget menu.
  3. Find and expand the "WordPress" section.
  4. Drag and drop the desired third-party widget from this section onto your page, just like any native Pagelayer widget.

Solution 2: Use the Shortcode Widget

This is the most versatile method and works for nearly any plugin that provides a shortcode.

  1. Install and configure your third-party plugin (e.g., SmartSlider, a booking plugin, etc.).
  2. Within that plugin's settings or documentation, locate the specific shortcode it provides for the feature you want to use (e.g., [smartslider3 slider="1"]).
  3. Open your page in the Pagelayer editor.
  4. From the widget menu on the left, find and drag the "Shortcodes" widget onto your page.
  5. Click on the Shortcode widget you just placed. In its settings panel on the left, paste the exact shortcode provided by your third-party plugin into the content box.
  6. Save or update your page. The shortcode will be rendered, displaying the output from your other plugin seamlessly within your Pagelayer-designed page.

Important Considerations

  • Compatibility: While this method works for most plugins, some may have styling or script conflicts. It's always a good idea to test the page after adding the shortcode.
  • No Direct Import: It is not possible to directly import templates or blocks from other page builders like Elementor or Beaver Builder into Pagelayer. The Shortcode widget is the recommended way to integrate their output if they provide a shortcode.

By using these two methods, you can significantly extend the functionality of your Pagelayer pages, combining its powerful drag-and-drop editing with the specialized features of thousands of other WordPress plugins.