Humanitarianresponse Logo

To embed content from external websites such as interactive maps and dashboards, videos from YouTube, or specific web page, use the HTML inline frame (iframe) feature in HR.info.

Example 1: Embed an iframe on a page

In the following steps we will use the “Disaster severity estimation index” interactive map as an example from CartoBD website and insert it into Nepal HR.info website.

  1. Login to Nepal website.
  2. Create a new page as shown in the screenshot below or open an existing page where you need to insert the interactive map.

    Screenshot of the top bar menu

  3. Provide title of the page for instance “Nepal - Disaster severity estimation index”
  4. Underneath the Body section from the ‘Text format’ drop-down list, select ‘HR WYSIWYG’. If not selected the iframe will not display correctly in the page.
  5. In the editor, click on the "Source" button so that the editor displays raw HTML code. See the screenshot below.

    Screenshot of the HR.info admin interface showing the title field and the source HTML code button

  6. Paste your iFrame code which you have copied from your content source into the editor window, it should look similar to the example below:

    <iframe allowfullscreen width='640' height='520' frameborder='0' src='URL'></iframe>

    Next, copy the code below and paste it into the editor window, then take the URL of your iframe and insert it into the code you just copied. Delete your original iframe code and keep just the code below:

    <div class="embed-responsive embed-responsive-4by3">
        <iframe class="embed-responsive-item" allowfullscreen src='URL'></iframe>
    </div>

    This code will ensure that your embedded iframe will adapt to different screen sizes. If your content (dashboard, video, etc.) has a ratio of 16:9, replace embed-responsive-4by3 with embed-responsive-16by9. It may not be a perfect fit, but select whichever ratio fits your content best.

    Note: If you want your dashboard to allow for a full screen display, you need to include the allowfullscreen attribute in the iframe code, as per the example above. The attribute can also be added as allowfullscreen="true" or allowfullscreen="yes".

    Note: the URL for the iframe must use the HTTPS protocol, not HTTP, for the iframe to display. HumanitarianResponse.info uses a secure protocol (HTTPS). If the page you want to embed is not available via HTTPS, you will need to provide a link as newer browsers will prevent HTTP iframes from being displayed. This is because of a security feature in web browsers which prohibits insecure pages (HTTP) from being embedded into secure pages (HTTPS). Additional technical details are available if you would like to read more about it.

  7. Set other page parameters as required and publish the page.

  8. If you have followed the above steps correctly, then you should be able to see the newly embedded map below.

    Screenshot of an embedded iframe about the Nepal earthquake

Example 2: Embed an iframe into a content block

  1. If you would like to add an iframe within a content block onto your space/page, then click on customize button at the bottom of your space/page
  2. click on the "+" button and select "Custom content" and then "Free text":

  3. Follow steps 3 to 6 as indicated above
  4. Click on Finish
  5. Remember to hit Save at the bottom of your space/page