By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

403 Server Error when adding JS using HTML Widget

W

westara23

New Member
I cannot click update without getting a 403 server error after adding a simple JavaScript tag using the Elementor HTML widget.

Has anyone ever had a similar issue?

Are there any plugins that would conflict with this?
 
elementor official
Community

Community

Administrator
Staff member
Yes I get it all the time for various embeds, scripts etc. The best way ive found is to create a custom elementor widget with the script and then adding the widget to the page.
 
elementor official
W

westara23

New Member
Yes I get it all the time for various embeds, scripts etc. The best way ive found is to create a custom elementor widget with the script and then adding the widget to the page.
Thank you. Do you have any good instructions on creating a custom widget to add my script? Is it challenging (do you need to touch the files)?
 
elementor official
Community

Community

Administrator
Staff member
You will need to add some code to your themes function.php

Here is my example which we use to embed JSON-LD schema markup into a page dynamically with ACF.
PHP:
 add_action( 'elementor/widgets/widgets_registered', function( $widgets_manager ){/**
     * Elementor_Alt_HTML_Widget Elementor Custom Widget.
     */
    class Elementor_Alt_HTML_Widget extends \Elementor\Widget_Base {
        /**
         * Get widget name.
         */
        public function get_name(){return 'alt-html';
        }
        /**
         * Get widget title.
         */
        public function get_title(){return __( 'Rivmedia Micro Data', 'plugin-name' );
        }
        /**
         * Get widget icon.
         */
        public function get_icon(){return 'fa fa-code';
        }
        /**
         * Get widget categories.
         */
        public function get_categories(){return [ 'general' ];
        }
        /**
         * Register Alternate Text widget controls.
         */
        protected function _register_controls(){$this->start_controls_section(
                'section_editor',
                [
                    'label' => __( 'Rivmedia Micro Data', 'plugin-name' ),]
            );
            $this->add_control(
                'editor',
                [
                    'label' => '',
                    'type' => \Elementor\Controls_Manager::TEXTAREA,
                    'dynamic' => [
                        'active' => true,
                    ],
                    'default' => __( 'Place your code here.', 'plugin-name' ),]
            );
            $this->end_controls_section();
        }
        /**
         * Render Alternate Text widget output on the frontend.
         */
        protected function render(){$settings = $this->get_settings_for_display();
            echo '<div class="rivmedia-microdata"><script type="application/ld+json">';
            echo ( $settings['editor'] ) ? $settings['editor'] : '';
            echo '</script></div>';
        }
    }
    $widgets_manager->register_widget_type( new Elementor_Alt_HTML_Widget() );
} );
Notice this part :

Code:
            echo '<div class="rivmedia-microdata"><script type="application/ld+json">';
            echo ( $settings['editor'] ) ? $settings['editor'] : '';
            echo '</script></div>';
The top line is our custom class so we can style it if needed, then the start of the script tag.

The last line is the end of the script tag and the div class.

You would then goto your page, find the Widget ( It will be down the bottom ) and add all the code between your script tags.

There is a more straight forward way by editing the widget code above to basically insert the exact code as a widget so its all hard coded. But it isnt as flexible if you have different scripts being embedded on different pages.

So once you've edited the 2 lines, paste that code into your functions.php and you should see the widget to paste the rest.
 
elementor official
elementor official
Top