How do I add rich media from other sites into my Dialogue?

About embedding rich media

Many third-party sites provide 'embed codes' which are snippets of code that you can copy and paste to include their content in other websites.  All Dialogue sites include the ability to embed rich media in this way.  For example, you can embed videos from YouTube, maps or interactive street views from Google Maps, PDF documents or slideshows from Slideshare.

What is an embed code?

It's a little bit of code that contains the URL to the media you're embedding inside a frame to display it. Commonly, embed codes will start with <iframe> or <script> (but, helpfully, not always!). It's best if you can get this code straight from the provider of the media.

Step 1: Getting the embed code

Go to the media you wish to embed to get the embed code you will need. Different sites show this in different places though most have this in a 'share' option if it's anywhere.  For example, in YouTube there is the 'Share' option underneath the main video window. Select this and you then need to choose the 'Embed' option which will give you the code.

This is what the YouTube embed code looks like.  Copy the embed code to your clipboard:

Step 2: Embed the code into your pages

You can add rich media to any of the editable pages in your site - generally this will either be the homepage, or one of your challenge pages.

Once you have logged in to your Dialogue site, go to the page you want to edit. For the homepage, you would need to choose Site Settings at the top of the screen, then select Editable Pages, and then Homepage.

For one of the challenge pages, select Challenges at the top of the screen, then select the title of the challenge you want and 'Edit Challenge Details' from its dashboard.

You will now be able to edit the page using the text editor. 

In the What is the challenge? box (or the page text box on the homepage), select the Rich media option, which looks like a little film reel:

Once you choose this option, the editor box will open: 

• Paste the embed code into the top box.
• Put a description of what you're embedding in the description box.
• Put in the provider's name - for example, YouTube.
• Enter the link to the provider's site - this needs to be their full URL including the https://, e.g. https://youtube.com.

Once done, select OK, and you will see a little grey square with the rich media icon now appears in your text field:

To delete rich media content, when in the editor (as in the image above), select the embedded code, delete it, and Save.

You can see what it looks like by visiting the public side of the site.

Restrictions on viewing embedded content

In some cases, if someone visits a page on your Dialogue that contains embedded content, a yellow bar may appear at the top of the page asking whether they want to display this. This will be dependent on whether you originally asked us to enable or disable this option on your site.

This warning bar was there to ensure that our products complied with original EU privacy regulations in regard to third-party cookies.  Visitors can optionally save a setting that automatically loads all embedded content on the site for the rest of their visit:

More cautious visitors can read more about each item of embedded content before loading it.  A placeholder appears instead of the item, with a brief description and a button to load the content:

If the EU Privacy Law does not affect you, you may prefer to load all embedded content automatically without warning visitors first. This privacy feature can be disabled sitewide by Delib on request.  However, you should check your territory's privacy and cookie regulations before doing this.

[Disclaimer: this article does not constitute legal advice]