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

  1. Go to the Google Sites page that you’d like to embed HTML in.
  2. Go to the Insert menu and select HTML Box.
  3. In the dialog that opens, add HTML, CSS and/or Javascript code.
  4. When you’re done, click Save.
  5. 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.
  • You can link script tags to jQuery (For example, https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js). Versions 1.6 and newer are supported.

Example code for the HTML Box tool

The example code is for a 3-slide animated carousel with two slides of text and one slide of an image. It includes next and previous buttons to animate the carousel from one slide to the next.

example slide carousel

Code (HTML, CSS, and JavaScript)


 
<style>
 .carousel {
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
  background-color:black;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
 }
 .items {
  width: 1200px;
  position: absolute;
 }
 .items > div {
  width: 400px;
  height: 180px;
  font-size: 20px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
 }
 .nav {
  position: absolute;
  bottom: 5px;
  right: 15px;
 }
 .button {
  cursor: pointer;
  font-weight: bold;
 }
</style>
<div class="carousel" style="display:none;">
 <div class="items">

  <div>
    Content for slide one.
  </div>

  <div>
    Content for slide two.
  </div>

  <div>
    <img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png">
  </div>

 </div>
 <div class="nav">
  <span class="button left-button">prev</span>
  &nbsp;&nbsp;
  <span class="button right-button">next</span>
 </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>
<script>
 var current_slide = 0; // zero-based
 var slide_count = 3;
 var slide_size = 400;

 var Direction = {
  LEFT: -1,
  RIGHT: 1
 };

 /**
 * Moves to the next slide using the direction (dx) parameter.
 */
 var nextSlide = function(dx) {
  current_slide = (current_slide + slide_count + dx) % slide_count;

  // Calculate the new value for css 'left' property and animate.
  var left_offset = '-' + (current_slide * slide_size) + 'px';
  $('.items').animate({'left': left_offset}, 300);
 };

 $('.right-button').click(nextSlide.bind(null, Direction.RIGHT));
 $('.left-button').click(nextSlide.bind(null, Direction.LEFT));


 $('.carousel').show();
</script>

Unsupported features

The HTML Box tool currently doesn't support the following features:

  • iframes
  • JavaScript code can't create any script, image or link tags
  • Document/window onload and onready functions. You can place any JavaScript at the end of code that needs to load after the document loads.