Steegle logo

Insert HTML, JavaScript and CSS - new Google Sites

Embed your own custom code to add Twitter Timelines, Newsletter sign up forms and more

Instructions

Insert HTML, JS & CSS - Embed Code

  1. On the Insert panel use the Embed option

  2. Choose the EMBED CODE tab

  3. Type or paste the custom HTML, JavaScript and CSS into the code box

  4. Use the NEXT button to preview how your code will look

  5. Use the INSERT button to add the code to the page

Notes

  • If you do not see the preview you expect use the Edit code button (looks like a pencil) that overlays the preview and edit the code to correct the issue

  • Embedded code does not get indexed in the site search

  • Sites displays the embedded code in an iframe so if the code tries to get the URL of the page it will get the iframe URL, not the site's page URL.

Availability

The embed code feature is on a 15 day rollout for Google Workspace domains on rapid release and if you're on scheduled release the 15 day rollout will start on 02 January 2018.

Important note: this feature is far better than HTML Box in classic Google Sites as it is less restrictive and you can reference external JavaScript and CSS files, so you can embed things like Twitter Timelines and use custom fonts.

Need some custom code developed for your Google Site?

Steegle has developed all kinds of custom code for new Google Sites: many of our clients enjoy using the Google Drive Gadget to provide an embedded and searchable My Drive folder or Team Drive in their Google Site. If you need something like this contact Steegle, the Google Sites Experts.

Sample Embedded Code

MailChimp Signup Form

Facebook Like and Share Buttons

Twitter Timeline

Disqus Commenting

Feedback

Please let us know if this article helped or if you know of of any improvements.

Keep up-to-date

Join the Sites Update Group on the Google Sites Classic Comparison to get email notifications about New Google Sites updates.

Newsletter

Subscribe to our newsletter for emails about all things Steegle.com

Learn about Steegle Products

Springboard Intranet
for Google Workspace

We provide a well-designed and well-structured intranet to enable your employees to: start work with the right tools; find people with appropriate skills; collaborate with the their teams; access authorized resources; thank and recognize heroic colleagues and coworkers.

Steegle People for Google Workspace Logo

Steegle People
for Google Workspace

Searchable staff directory for Google Workspace, with real-time search results, that automatically generates org charts to show your organisation structure - Steegle People.
Steegle Share for Google Drive Logo

Steegle Share
for Google Drive

If the standard Google Drive Folder embed does not give you everything you need, take a look at the Steegle Share for Google Drive that offers search, sorting, download links and more...
Steegle News Gadget for Google Sites Logo

Steegle News
for Google Sites

Display headlines, snippets and metadata linked to your news articles and blog pages on your Google Site and filter by tags added to the news gadget. See the Steegle News Gadget.

Steegle Heroes
for Google Workspace

Employee recognition system: Steegle Heroes allows you to thank and recognise your colleagues, coworkers and employees spotlight a hero as an Employee of the month.