Insert custom HTML, CSS, and Javascript

Use the HTML Box tool to customize the appearance of your site.

With the HTML Box tool, you can add HTML, CSS and Javascript into a Google Sites page. The tool lets you add functional CSS and Javascript to customize the look and feel of your Google Site. For example, you could create image carousels, custom menus, submission forms and jQuery-based widgets.

This tool is different than using the HTML button in the toolbar when you’re editing a page, as the HTML button allows you to make small edits to HTML and inline CSS, but it doesn't allow you to write custom Javascript.

Insert custom HTML, CSS and Javascript

Go to the Google Sites page that you’d like to embed HTML in.

Go to the Insert menu and select HTML Box.

In the dialog that opens, add HTML, CSS and/or Javascript code.

When you’re done, click Save.

To preview your embedded HTML, click Save on the Google Site page.

Tips for writing HTML with the HTML Box tool

To make sure that your code is error free, we’ll show you errors underlined in red as you type.

You can reference any public image on the Internet in your HTML embed, such as an image hosted in Picasa. Keep Google program policies and copyright laws in mind whenever you reference a public image.

Code from one HTML box can’t interact with or refer to code outside of the HTML box, including other HTML boxes. This mean you can not include external javascript files, except jQuery files hosted at ajax.googleapis.com.