{"id":188,"date":"2020-03-17T10:06:06","date_gmt":"2020-03-17T08:06:06","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=188"},"modified":"2025-06-15T22:00:33","modified_gmt":"2025-06-15T19:00:33","slug":"html-widget","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/html-widget\/","title":{"rendered":"HTML widget"},"content":{"rendered":"\n

Inside the HTML Widget<\/strong> you can embed HTML, CSS, Shortcodes, and also include JS scripts.<\/p>\n\n\n\n

[callout type=”warning”]The code added to an HTML widget can potentially contain malware so access to the widget is restricted to admins. This can be changed in the Role Manager but care should be taken when granting permission to upload these files. For more information, see Role Manager<\/a>.[\/callout]<\/p>\n\n\n\n

Drag The Widget<\/h2>\n\n\n\n

From the widget library choose the Elementor HTML widget with the <\/> icon. Drag it to the desired location on your page editor indicated by the blue line.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Add your Code<\/h2>\n\n\n\n

Enter your HTML, Script, or Shortcodes into the text area. Elementor will attempt to notify you of any errors in your code. The panel window may be resized for larger amounts of code to be viewed.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Advanced<\/h3>\n\n\n\n

Set the Advanced options<\/a> that are applicable to this widget<\/p>\n\n\n\n

Using Elementor AI with the HTML widget<\/h2>\n\n\n\n

Elementor AI boosts the power of the HTML widget by allowing all users to create their HTML code with the power of AI. <\/p>\n\n\n\n

Learn more about getting started with Elementor AI<\/a>.<\/p>\n\n\n\n

Note: Elementor Pro subscribers can use Elementor AI to create Custom CSS<\/a> and Custom Code<\/a>.<\/p>\n\n\n\n

General guidelines to using Elementor AI for coding<\/h3>\n\n\n\n