Guidance on using the Discover Uni widget

How to set up the widget

The widget can be embedded in a webpage using either the HTML5+JavaScript snippet or an iFrame.

Depending on your content security settings, you may need to contact the team managing the website you are using to whitelist the 'https://discoveruni.gov.uk' domain for either of these two methods to work.

The widget can be displayed at fixed dimensions either vertically (this is the default), horizontally or responsive.

Course information

There are three essential pieces of course information which need to be set for the widget to display data for the relevant course. These are:

This information can be obtained from the URL for a course on the Discover Uni website as set out below:

1. Search for your institution and select the course on the Discover Uni website

2. Copy and paste the URL for the course page, for example:
   https://discoveruni.gov.uk/course-details/10796291/K00592/FullTime/

3. Our URLs are constructed in the format
   https://discoveruni.gov.uk/course-details/PUBUKPRN/KISCOURSEID/KISMODE/

   Therefore, in the example above you would configure the widget with these settings:

   PUBUKPRN = 10796291

   KISCOURSEID = K00592

   KISMODE = FullTime

If your KISCOURSEID contains any of the following characters: '/', '|', ':', '&', '.', '>', '+', '#', ';', '?', '@' and '=' then you will need to replace these characters with an underscore '_' when configuring the widget. For example, if your KISCOURSEID is ABCD/34 then the KISCOURSEID used for the widget will need to be ABCD_34.

The widget is available in English and Welsh. The language can be set to ‘en-GB' for English or ‘cy-GB’ for Welsh. If the language is not included, it will be determined from the browser settings of the user viewing the webpage hosting the widget, defaulting to ‘en-GB’ if the browser settings are neither ‘en-GB’ or ‘cy-GB’. See the C24061 widget guidance for further guidance.

Display mode

• The widget is available in horizontal, vertical, and responsive formats. It will default to vertical if not specified.
• You can use either HTML+JavaScript or an iFrame to configure your widgets. You can display your widgets using the vertical, horizontal or responsive display mode when using HTML+JavaScript; or the vertical or horizontal display mode in iFrame.
• You must ensure that all widgets are set up using the height and size styles outlined below.

HTML+JavaScript:

• Vertical: a fixed size of 190 x 500 pixels
• Horizontal: a fixed size of 615 x 150 pixels
• Responsive: The widget will adapt to the width of the containing element and expand its height as necessary. The minimum width is 190 pixels.

iFrame:

The iFrame snippet can only display the widget in vertical or horizontal mode. The responsive mode is no longer supported.

• Vertical: a fixed size of 198 x 508 pixels
• Horizontal: a fixed size of 624 x 158 pixels

Embedding the widget

For best compatibility with mobile devices, the hosting page should also contain the following meta tag in the 'head' section.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

To enable the HTML+JavaScript widget on a page, this script must be added at the bottom of the page before the closing </body> tag. This is not required if you are using iFrame.

<script>

    (function (d) {

      "use strict";

      var widgetScript = d.createElement("script");

      widgetScript.id = "unistats-widget-script";

      widgetScript.src = "//discoveruni.gov.uk/widget/embed-script";

      var scriptTags = d.getElementsByTagName("script")[0];

      if (d.getElementById("unistats-widget-script")) {

        return;

      }

      scriptTags.parentNode.insertBefore(widgetScript, scriptTags);

    })(document);

  </script>

Widget code

Once you have chosen your display mode, pick the corresponding widget HTML to add to your page in the position you would like it to display. In each of these widget HTML snippets, you will need to replace the words PUBUKPRN, KISCOURSEID and KISMODE as explained in the ‘Course information’ section above.

• Please do not try to override any styles relating to the widget, nor reformat the widget in any way. This will cause presentation issues with the widget or cause it to fail.
• Do not try to place a widget in a container smaller than the required size for the widget (refer to sizes above).
• Do not remove the inline height/width styles.
• Do not try to relocate the script (<script>) for the HTML+JavaScript widget to the <head> or another file. The script must be placed after the widget code in the page (we recommend placing at the bottom of the page before the closing </body> tag).
• Ensure KISCOURSEID is set correctly as per the Discover Uni course page URL.

If the widget is configured correctly, it will display data for the relevant course and clicking on it will take the user to that course on the Discover Uni website. If it is not configured in a way that corresponds with a course on the website, it will display a standard error message and link to the website homepage.