Need help? Looking for tips and tricks?

This knowledge base contains 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 third party sites into my editable pages?

Kate Laine-Toner -

About 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 your Dialogue site.  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. 

Step 1: Copy 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.  For example, in YouTube there are sharing options underneath the main video window.  This is what the YouTube embed code looks like.  Copy this embed code to your clipboard:

Picture_6.png

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 click Site Settings at the top of the screen, then select Editable Pages, and then Homepage.

For one of the challenge pages, click on Discussions at the top of the screen, then click on the title of the challenge you want and select edit from its dashboard.

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

In the What is this discussion about? box (or the page text box on the homepage), click on the Source option, which looks like this:

original.png

Once you click on the Source icon, the code editor box will open: 

page_only_code.png

Place your cursor where you want to paste the embed code. In this case, we want the video to go above the text, so we'll put our cursor at the start of the code, and paste the embed code. The result will look like this:

code_for_page_and_video.png

If the embed code starts with '//' you will need to add 'http:'infront of the URL i.e

<iframe width="350" height="197" src="//www.youtube.com/embed/ev58eVjp_II" frameborder="0" allowfullscreen></iframe>

Would need updating to this:

<iframe width="350" height="197" src=“http://www.youtube.com/embed/ev58eVjp_II" frameborder="0" allowfullscreen></iframe>

Click Save, and you will see the video in your discussion:

 final_result.png

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

Step 3: Viewing embedded content

Whenever anyone visits a page on your dialogue that contains embedded content, a yellow bar appears at the top of the page asking whether they want to display the content. This ensures that Dialogue App complies with 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:

Picture 11.png

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:

Picture_9.png

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]

Powered by Zendesk