Jotter Community

How to add and use embedded code

 

This help sheet explains how to use code from another website to add features or content, for example, a video or game, onto your website.

 

These step by step instructions will guide you through this process. You will need to be signed in to your school website and be on the page that you wish to add the resource to.

You can add a number of resources from other websites or your in school digital resources such as Espresso. You can also add widgets to count the number of hits or your website or particular pages on your website.

 

1. Click on the Edit Page button.

 

2. Click on the Insert Item and select Embedded Code.

 

 

3. Select where you want your resource to be located by clicking on any of the black Insert resource here bars.

 

 

 

 

4. There are four parts to the embedded code window, which are shown below.

 

Search

 

 

Educational

 

Miscellaneous

 

 

 

Embedded Code

 

 

Search

 

This allows you to add a search engine feature to your website so that your audience can do a search without moving to the search engine page.

a) You simply click on the search engine icon from the list and it is added to your webpage.

b) A toolbar will appear and you can select your alignment or if you chose the wrong search engine you can click on the small box with three dots in, to the right of the Resource name and select another search engine to use. If you alter these boxes, click on the blue Update button.

 

 

c) Click on the Save Page button and select Save and Publish Page.

 

 

 

d) To use the search engine resource on your page, just enter text in the search box and when you click search a new window will open in your browser with a selection of results.

 

 

Educational

 

This allows you to add a link to predefined education resource to your website so that your pupils can move to the resource quickly and easily.

a) You simply click on the educational website icon from the list and it is added to your webpage.

b) A toolbar will appear and you can select your alignment or if you chose the wrong website you can click on the small box with three dots in, to the right of the Resource name and select another search engine to use. If you alter these boxes, click on the blue Update button.

 

 

c) Click on the Save Page button and select Save and Publish Page.

 

 

d) To use the educational resource on your page, just click on the correct option and a new window will open in your browser with the webpage and activities chosen.

Miscellaneous

 

This allows you to use predefined resources such as counters and translation services to your website.

a) You simply click on the miscellaneous icon from the list and it is added to your webpage.

b) A toolbar will appear and you can select your alignment or if you chose the wrong item you can click on the small box with three dots in, to the right of the Resource name and select the correct item to use. If you alter these boxes, click on the blue Update button.

 

 

A website or webpage counter will look like this.

 

The Google Translator will look like this.

c) Click on the green Save Page button and select Save and Publish Page.

d) To use the translator resource on your page, just click on the language of your choice and your website will be presented to the viewer in that language - great for a modern foreign language lesson!

 

Your counter will be displayed on your web page for all to see.

 

Custom

 

This allows you to add any video, presentation or education resource to your website so that your pupils can move to the resource quickly and easily.

a) You simply click on the Custom tab on the left hand side of the box and you are presented with a text box. When you are on the website which has the resource you want to embed on your webpage you are looking for the Embed code which is sometimes shown as <>.You will copy the code to paste it into the text box. See below for examples of embed codes.

 

BBC Bitesize Resource YouTube Video Slideshare Presentation

Vimeo Video Prezi Presentation

 

All Espresso videos and activities have embed codes towards the bottom of the page.

 

This is embed coding copied from YouTube. Paste the code into the box and click OK. The resource will then be added to your webpage.

 

b) A toolbar will appear and you can select your alignment or if you chose the wrong website you can click on the small box with three dots in, to the right of the Resource name and select another search engine to use. If you alter these boxes, click on the blue Update button.

 

 

 

 

c) Click on the Save Page button and select Save and Publish Page.

 

 

d) The video can be viewed in the box or made full screen. The buttons at the bottom of the box control the presentation.