Custom Elements in Flatsome UX Builder

Flatsome is my favorite theme, hands down. No question asked. It's the best, and yes, I drink that Flatsome Kool-Aid.

Did you know you can easily add custom elements into that Flatsome UX Builder, aka shortcodes?

Let's take a look on what we will be building in this article.

First, It's important to know that the Flatsome builder creates a shortcode. So for this to work, let's make our plugin, create our shortcode and add attributes to it, in-which will the attributes can by the UX Builder. The below code is snippets of a complete plugin that can be downloaded on GitHub:

Download on GitHub

For this post let's look at the folder structure on what the plugin will look like.


Let's kick this off my creating a plugin and with a shortcode for now.

Plugin Name: ClipReply Embed
Plugin URI:
Description: Embed your ClipReply Flows and videos on WordPress using shortcodes.
Version: 1.0.0
Author: ClipReply
Author URI:
Text Domain: clipreply-embed
Network: true

 * Exit if accessed directly

if (!defined('ABSPATH')) exit; // EXIT

// Define plugin path
define('CLIPREPLY_EMBED_PATH', plugin_dir_path(__FILE__));

class ClipReplyEmbed

    public function __construct()
        add_shortcode('clipreply_iframe', [$this, "iframe_shortcode"]);

     * iframe shortcode

    public function iframe_shortcode($atts)

        // This is the attributes I was reffering to. These can be changed by the UX Builder
        $atts = shortcode_atts(
                'url'      => '',
                'height'      => '500px',
                'width'      => '100%',


        require(CLIPREPLY_EMBED_PATH . 'public-html/iframe-embed.php');

        $output = ob_get_clean();

        return $output;


new ClipReplyEmbed();

Create the file for our html markup public-html/iframe-embed.php

  title="ClipReply IFrame"
  id="<?php echo esc_url($atts['url']); ?>"
  src="<?php echo esc_url($atts['url']); ?>"
  allow="camera *; microphone *; autoplay *; encrypted-media *; fullscreen *; display-capture *;"
  frameborder="0" width="<?php echo esc_attr($atts['width'] . '%'); ?>"
  height="<?php echo esc_attr($atts['height'] . 'px'); ?>"
  style="border: none; border-radius: 20px">

Great! Now our shortcode can be used on WordPress's pages.

[clipreply_iframe url="" width="100" height="500"]

Now we will add some PHP code under new ClipReplyEmbed(); in our main plugin file this only included our integration file of the theme is running on Flatsome.

 * Flatsome Integration

$theme = wp_get_theme(); // gets the current theme
if ('Flatsome' == $theme->name || 'Flatsome' == $theme->parent_theme) {

        function () {

            require_once CLIPREPLY_EMBED_PATH . 'integrations/flatsome.php';

In the plugin folder integration/flatsome.php here is that our file looks like

Now for Flatsome let's super charge our short and let users add it in the UX Builder


// clipreply_iframe is our shortcode name. Really Important
add_ux_builder_shortcode('clipreply_iframe', array(
    'name' => __('ClipReply IFrame', 'clipreply-embed'),
    'category' => __('ClipReply'),
    'thumbnail' =>  "",
    'options' => array(
        // Example input field
        'url' => array(
            'type' => 'textfield',
            'full_width' => true,
            'default' => '',
            'heading' => 'ClipReply URL',
            'description' => 'Enter in the url to your ClipReply Flow.',
        // Slider
        'height' => array(
            'type' => 'slider',
            'vertical' => true,
            'heading' => 'Height',
            'default' => 500,
            'max' => 800,
            'min' => 300,
            'on_change' => array(
                'style' => 'height: {{ value }}px'

        // Slider
        'width' => array(
            'type' => 'slider',
            'heading' => 'Width',
            'responsive' => true,
            'default' => '100',
            'unit' => '%',
            'max' => '100',
            'min' => '0',
            'on_change' => array(
                'style' => 'width: {{ value }}%'


Now you can do so much more and use all of Flatsome's builder input types. See how Flatsome did some fields in inc/builder/shortcodes

That's all for now.

Cheers to amazing websites built on Flatsome!