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 Wordpress and 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!

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?
 
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.
 
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)?
 
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.
 
Tamiep

Tamiep

New Member
I am wondering if this would solve my problem, as well. I wanted to add this fun widget to a website, but get this 403 error.

<script type="text/javascript" src="h-t-t-p-s://affinitynumerology.com/calculation/serve/PersonalDayCalendarWidget.php"></script>


It happened with a product affiliate link for an Amazon, too.

I do not know much about coding. Can you please tell me exactly which parts of the code you posted should be changed? (I have less than 20 posts so this would not let me post a link, though I was not trying to, so I had to type it weird)
 
indigetal

indigetal

New Member
I created the custom elementor widget but it did not resolve the issue with the 403 server error not letting me publish/update. I used the Code Embed plugin to do it.
 

Latest Resources

Other Elementor Resources

elementor official
Top