wordpress widget based on unyson framework options

wp widget based on unyson options.php

<?php
class Widget_Online_Support extends WP_Widget {

	/**
	 * Widget constructor.
	 */
	private $options;
	private $prefix;

	function __construct() {

		$widget_ops = array( 'description' => __( 'Display online support infomation', 'project_demand' ) );
		parent::__construct( false, __( 'About Us', 'project_demand' ), $widget_ops );
		$this->options = array(
			'title'              => array(
				'type'  => 'text',
				'label' => __( 'About Title', 'project_demand' )
			),
			'f_logo_link'        => array(
				'type'  => 'upload',
				'label' => __( 'Footer Logo', 'project_demand' )
			),
			'about_description'  => array(
				'type'  => 'textarea',
				'label' => __( 'About', 'project_demand' )
			),
			'test_icon'          => array(
				'type'  => 'icon-v2',
				'label' => __( 'About', 'project_demand' )
			),
			'follow_text'        => array(
				'type'  => 'text',
				'label' => __( 'Follow Text', 'project_demand' )
			),
			'footer_social_icon' => array(
				'value'           => array(
					array(
						'f_icon_name' => '{{f_icon_name }}',

						'f_icon_link' => '',
					),
					// ...
				),
				'type'            => 'addable-popup',
				'label'           => __( 'Addable Popup', '{project_demand}' ),
				'desc'            => __( 'This is option for footer social icons', '{project_demand}' ),
				'template'        => 'Footer Icon', // box title
				'popup-title'     => 'Add Footer Icon',
				'size'            => 'small', // small, medium, large
				'limit'           => 0, // limit the number of popup`s that can be added
				'add-button-text' => __( 'Add New Icon', '{project_demand}' ),
				'sortable'        => true,
				'popup-options'   => array(
					'f_icon_name' => array(
						'label' => __( 'Text', '{project_demand}' ),
						'type'  => 'text',
						'desc'  => __( 'Set icon name', '{project_demand}' )
					),
					'f_icon'      => array(
						'type' => 'icon-v2',
					),
					'f_icon_link' => array(
						'label' => __( 'Text', '{project_demand}' ),
						'type'  => 'text',
						'desc'  => __( 'Set icon link', '{project_demand}' )
					)
				)
			),

		);
		$this->prefix  = 'online_support';
	}

	function widget( $args, $instance ) {
		/*        extract( $args );
				echo "<pre>";
				print_r($args);
				echo "</pre>";*/

		$params = array();

		foreach ( $instance as $key => $value ) {
			$params[ $key ] = $value;
		}


		$instance = $params;
//		echo "<pre>";
		fw_print( $instance );
//		echo "</pre>";


		/* echo $bofore_title.'This'.$after_title;*/
		?>
        <div class="col-md-4">
            <div id="about-us-widget" class="footer-widget widget_tn_about_us">
                <div class="content">
                    <img src="assets/images/footer-logo.png" alt="Demand">
                    <p>Quickly reintermediate viral web-readiness for them mance based users. Assertively negotiate go
                        forward system through enabled business. Globally maximize visionary opportunities vis-a-vis
                        multidisciplinary potentialities. </p>

                    <div class="follow-us">
                        <h3 class="title">Follow Us</h3>

                        <div class="social-media">
                            <ul>
                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                <li><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
                                <li><a href="#"><i class="fa fa-tumblr"></i></a></li>
                                <li><a href="#"><i class="fa fa-rss"></i></a></li>
                            </ul>
                        </div>
                    </div><!-- /.follow-us -->
                </div><!-- /.content -->
            </div>
        </div>
		<?php


	}

	function update( $new_instance, $old_instance ) {
		return fw_get_options_values_from_input(
			$this->options,
			FW_Request::POST( fw_html_attr_name_to_array_multi_key( $this->get_field_name( $this->prefix ) ), array() )
		);
	}

	function form( $values ) {

		$prefix = $this->get_field_id( $this->prefix );
		$id     = 'fw-widget-options-' . $prefix;

		echo '<div class="fw-force-xs fw-theme-admin-widget-wrap" id="' . esc_attr( $id ) . '">';
		$this->print_widget_javascript( $id );
		echo fw()->backend->render_options( $this->options, $values, array(
			'id_prefix'   => $prefix . '-',
			'name_prefix' => $this->get_field_name( $this->prefix ),
		) );
		echo '</div>';

		return $values;
	}

	private function print_widget_javascript( $id ) {
		?>
        <script type="text/javascript">
            jQuery(function ($) {
                var selector = '#<?php echo esc_js( $id ) ?>', timeoutId;

                $(selector).on('remove', function () { // ReInit options on html replace (on widget Save)
                    clearTimeout(timeoutId);
                    timeoutId = setTimeout(function () { // wait a few milliseconds for html replace to finish
                        fwEvents.trigger('fw:options:init', {$elements: $(selector)});
                    }, 100);
                });
            });
        </script>
		<?php
	}

}