Hello! How can we help?

Search our knowledge base for loads of useful advice and answers to common questions

If you're still stuck you can always submit a support request and we'll get back to you ASAP

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

Support -

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.

Note that embedded media requires the visitor's browser to support JavaScript, and may reduce the accessibility of your site.  To protect the security of the site and its users, members of the public cannot embed rich media into ideas or comments. 

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:

An example embed code from youtube

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:

The challenge editing page with the tool bar showing the rich media icon highlighted in red

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

the embedding content form showing where to add in your embed code, description, and provider info

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 - e.g. 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:

 The editing challenge page with the text editor with a rich media embed successfully entered - it shows a grey square with the rich media icon in it

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:

The yellow embedded content warning bar

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:

What the page shows when there is embedded content which has not yet been approved to be shown by the user, it provides a message with what the content is and an option to load it

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]