Build a custom Elementor Widget-Wordpress

**Creating a custom Elementor Widget is not very different from creating a native WordPress widget, you basically start by creating a class that extends the Widget_Base class and fill in all the required methods.

Each widget needs to have a few basic settings like a unique name that the widget will be identified by in the code, a title that will be used as the widget label and an icon. On top of that we have some advanced settings like the widget controls which are basically the fields where the user select his custom data, and the render script that generates the final output based on the user data from the widget controls.**

<?php
/**
* Elementor oEmbed Widget.
*
* Elementor widget that inserts an embbedable content into the page, from 
any given URL.
*
* @since 1.0.0
*/
class Elementor_oEmbed_Widget extends \Elementor\Widget_Base {

/**
 * Get widget name.
 *
 * Retrieve oEmbed widget name.
 *
 * @since 1.0.0
 * @access public
 *
 * @return string Widget name.
 */
public function get_name() {
    return 'oembed';
}

/**
 * Get widget title.
 *
 * Retrieve oEmbed widget title.
 *
 * @since 1.0.0
 * @access public
 *
 * @return string Widget title.
 */
public function get_title() {
    return __( 'oEmbed', 'plugin-name' );
}

/**
 * Get widget icon.
 *
 * Retrieve oEmbed widget icon.
 *
 * @since 1.0.0
 * @access public
 *
 * @return string Widget icon.
 */
public function get_icon() {
    return 'fa fa-code';
}

/**
 * Get widget categories.
 *
 * Retrieve the list of categories the oEmbed widget belongs to.
 *
 * @since 1.0.0
 * @access public
 *
 * @return array Widget categories.
 */
public function get_categories() {
    return [ 'general' ];
}

/**
 * Register oEmbed widget controls.
 *
 * Adds different input fields to allow the user to change and customize the 
widget settings.
 *
 * @since 1.0.0
 * @access protected
 */
protected function _register_controls() {

    $this->start_controls_section(
        'content_section',
        [
            'label' => __( 'Content', 'plugin-name' ),
            'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
        ]
    );

    $this->add_control(
        'url',
        [
            'label' => __( 'URL to embed', 'plugin-name' ),
            'type' => \Elementor\Controls_Manager::TEXT,
            'input_type' => 'url',
            'placeholder' => __( 'https://your-link.com', 'plugin-name' ),
        ]
    );

    $this->end_controls_section();

}

/**
 * Render oEmbed widget output on the frontend.
 *
 * Written in PHP and used to generate the final HTML.
 *
 * @since 1.0.0
 * @access protected
 */
protected function render() {

    $settings = $this->get_settings_for_display();

    $html = wp_oembed_get( $settings['url'] );

    echo '<div class="oembed-elementor-widget">';

    echo ( $html ) ? $html : $settings['url'];

    echo '</div>';

 }

}