HTML Insert Widget

The HTML code widget allows the insert of HTML directly into your webpage.

The common use for this is to insert third party widgets and video. All video and the "latest news" blog on MyEduWebsite are delivered using HTML code inserted using the HTML widget.

Inserting video from YouTube

  1. Visit the YouTube page with the video you wish to insert
  2. Right mouse click and select the "copy embed code/HTML" option
  3. Past this code in the HTML Widget and click confirm

Inserting video from Vimeo

  1. Visit the Vimeo page with the video you wish to insert
  2. Click on the "Share" link in the top right hand corner of the video
  3. Select the code in the "Embed" box
  4. Past this code in the HTML Widget and click confirm

Inserting video from Schooltube

  1. Visit the Schooltube page with the video you wish to insert
  2. Click on the "Share" link in the top left hand corner of the video
  3. Select the code in the "Embed" box and click the copy button
  4. Past this code in the HTML Widget and click confirm

Resizing video

You can resize the video by altering two attributes in the embed code.

In the code you have pasted into the HTML widget look for the Height and Width attributes.

By default YouTube is width="640" height="360"; Vimeo is width="500" height="281" and Schooltube is width="500" height="375". Adjust these according to you size requirement. However try and keep these in proportion.

Inserting a Map

  1. Find your location on Google or Bing Maps
  2. Google: Click on the link icon next to the map. Bing: Click on the share link in the top right of the map 
  3. Select and copy the HTML code to embed in website
  4. Past this code in the HTML Widget and click confirm

Inserting an RSS feed

There are various third party widgets that will convert RSS to insertable HTML. MyEduWebsite uses http://www.webrss.com/ to insert our latest news blog (there are other services available).

We use this as an example as many sites choose to host their blog externally, or have an existing blog prior to building their website.

Create an account at http://www.webrss.com/, following their instructions on creating you own RSS feed. As with the video embed code, copy and paste the widget code into the HMTL widget and click confirm. 

Inserting a Twitter Feed

  1. Log into your Twitter account
  2. Go to Settings
  3. Select Widgets from the menu
  4. Configure your widget
  5. Copy the embed code underneath the widget preview
  6. Cut and Past this into the HTML widget and click confirm

Inserting a MailChimp Sign-up Form

  1. Login to you Mailchimp account
  2. Select lists from the menu on the left
  3. On your preferred list, select "Sign-up Forms" from the dropdown menu on the right-hand side
  4. Select "Embedded Forms"
  5. Customize your form, then select the embed code from the bottom box
  6. Paste this into the HTML widget and click confirm

Positioning the HTML Code

Sometimes the HTML may be in the wrong position on the page. By default, it will align left. However, this may look oddif it doesn't reach all the way across the page (As the example below shows the default width for Google Maps is 425px).

To align use this code, followed by your HTML:

<div align="left">

<div align="center">

<div align="right">

 

For example the following code will embed a Google Map (as shown below):

<div align="center"><iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Emmanuel+College,+Sa
int+Andrew's+Street,+Cambridge&amp;aq=1&amp;oq=emmanuel&amp;sll=52.83
82,-2.327815&amp;sspn=11.214279,28.54248&amp;ie=UTF8&amp;hq=
Emmanuel+College,+Saint+Andrew's+Street,+Cambridge&amp;t=m&amp;ll=52.2
04007,0.125112&amp;spn=0.006295,0.006295&amp;output=embed">
</iframe><br /><small><a href="https://maps.google.co.uk/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Emmanuel+College
,+Saint+Andrew's+Street,+Cambridge&amp;aq=1&amp;oq=emmanuel&amp;sll=
52.8382,-2.327815&amp;sspn=11.214279,28.54248&amp;ie=UTF8&amp;hq=
Emmanuel+College,+Saint+Andrew's+Street,+Cambridge&amp;t=m&amp;ll=52.
204007,0.125112&amp;spn=0.006295,0.006295" style="color:#0000FF;text
-align:left">View Larger Map</a></small>