Using this gadget, you can insert custom HTML or JavaScript code into a page or template. You might want to insert code to embed an audio or video clip, or to embed a third-party widget from Google or Twitter.
You can also add custom HTML or JavaScript code to content gadgets using the Snippet function. For more information, see Inserting and modifying HTML or JavaScript.
You can insert the gadget into a page on your site, or into a page template so that all pages that use that template will automatically display the gadget. For instructions on inserting, moving, and deleting gadgets, see Gadgets.
If your custom code includes references to third-party code – code stored on another website such as Facebook – you will not be able to preview it in edit mode. To view the gadget in action, you must save any changes to the page.
Inserting your code
To insert code in a custom HTML gadget, click the Edit code button within the gadget's settings panel. You can enter up to 2,048,000 characters of code. Make sure your code does not violate any of the code restrictions (below).
For instructions on using the code editor, click here.
Custom HTML gadget settings
After you have inserted the custom HTML gadget, you can use its settings to enter the code and control its appearance.
For instructions on displaying gadget settings, see Gadgets.
The following settings are available for custom HTML gadgets:
Edit code
Click this button to display a dialog where you can enter the HTML or JavaScript code. You can enter up to 2,048,000 characters of code. Make sure your code does not violate any of the code restrictions (below).
Gadget title
If you specify a gadget title, the title will appear specially formatted within the gadget. Depending on the gadget style you choose, the title may appear in a heading box. If you want to add a description under the title, do not enter a gadget title, but instead, create a content gadget with a title and description, and place the content gadget ahead of this gadget.
For Kaleidoscope themes, use a Headline gadget instead of specifying a gadget title.
Gadget style
The gadget style determines the physical appearance of the gadget. The style you choose will determine the color and format of the gadget title, the gadget content, and the gadget border. You can choose from theme-specific styles and styles that are common to all themes.
Margins
The amount of space – in pixels – that appears outside the gadget. You can set top, bottom, left, and right margins separately.
Padding
(Kaleidoscope themes only) The amount of space – in pixels – that appears between the content of the gadget and the outer limits of the gadget. You can set top, bottom, left, and right padding separately. If you have set a fixed height for the gadget, the bottom padding will be ignored.
Advanced
Within the Advanced section, you can enter CSS code or classes to further control the appearance and behavior of the gadget. For more information, see Advanced gadget settings.
Code restrictions
Do not include any of the following commands within your custom code, since they can conflict with our code and cause the system to hang:
- document.write()
- document.writeln()
- document.open()
- object.write()
- object.writeln()
- object.open()
where object is the name of a target object.
