Skip to main content Help with accessibility Skip to main navigation
Article number: 1641Updated on: 04-10-2019

Embed widgets into your Umbraco pages

Web Parts used in this article

  

  Code

Introduction:

Within Umbraco we've got a range of Web Parts, or Grid Editors as our Applications Development team call them. This article briefly details how you can use the Code web part on your site to embed Widgets and Tools from the NHS Developer portal.

The Code web part exists to allow users with admin access to Umbraco the ability to easily add Widgets, be they NHS or not, to their websites without the need for any specific knowledge of how to write code. Other widgets you may be interested in embedding include the CQC Widgets and other web platforms you've created content on; such as Flickr, Pinterest, Google Charts and so on.

Note: For Youtube/Vimeo videos & Google Maps there's no need to use the Code web part with their embed code because we've got a web parts to handle content from these sources.

Example:

  1. Register & log-in to the NHS Developer Portal. This is home to over 20 different widgets that NHS Organisations can integrate into their websites. 
  2. Go the to the Widgets section of the NHS Developer Portal
  3. In this example we'll select the Blood Pressure widget
  4. At the bottom of the page they provide Embed Code, copy this*
    *tip, if you keep the tab open you can easily get back to the embed code if needed later on.
  5. Now it's time to head to your Umbraco site and then log into the administrative area of the site.
  6. From within backoffice/admin area of your Umbraco site select the page you wish to add the widget
  7. Within the Content tab click on the "Add Content" link, this enables you to pick a variety of different types of content to add to your pages.
  8. Select the "<> Code" web part
  9. On the right hand side of the screen a box will appear asking for HTML Content, paste your embed code within this box.
  10. Click on Update in the bottom right hand corner.
  11. You can now either save and publish the page or you may wish to add some narrative around the web part by adding a Rich Text Editor box above/below the widget.
    Remember you can drag and drop to re-order your web parts on a page and there's no limit to what you can have on one page, so your widget could easily sit on a page that also contained a document library webpart, images, text and RSS Consumer or whatever else you want on the page you're creating. 
  12. Once you're happy, click on Save and publish and you'll be able to view the content live on your website.

The below is what will appear on the page, it's a really quick and easy way to add interactive content to your site which you know is of reliable origin.