A good way to make your project more engaging and informative for your audience is by embedding third-party elements like videos, presentations, social posts, surveys, etc. into your project description.
The content builder currently supports a wide range of embeddable content options. In this article, we will walk you through the steps you will need to take to make the most out of this feature.
Log into your Citizen Lab platform account
Go to the project description tab of a specific project you are trying to edit
Enable the content editor
Click on the embed code component on the left side of the application
Locate the embed URL link from provider -> please, see the instructions in the section below!
Copy and paste it into the content builder embed field
Pro tip: Always test if your embedded URL is working, by opening an incognito/private window to verify public access.
You are good to go!
Obtaining the embed URL link
Our embed functionality currently requires a URL link. Below, you will find a comprehensive list of the third-party tools and services that are currently part of the whitelist of allowed domains that can be embedded.
Embedding surveys
It will require you to copy and paste the default sharing link into the embed field on the content builder. Among the domains allowed for survey embedding, we find:
Typeform: You will need to copy the default sharing link and paste it into the embed field on the content builder.
SurveyMonkey: You will need to copy the default sharing link and paste it into the embed field on the content builder.
Enalyzer: You will need to copy the default sharing link and paste it into the embed field on the content builder.
Qualtrics: You will need to copy the default sharing link and paste it into the embed field on the content builder.
SmartSurvey: You will need to copy the default sharing link and paste it into the embed field on the content builder.
Snap surveys: You will need to copy the default sharing link and paste it into the embed field on the content builder.
SurveyXact: You will need to copy the default sharing link and paste it into the embed field on the content builder.
Embedding documents
Google Docs will require you copy and paste the default sharing link into the embed field on the content builder.
Google Slides will require you copy and paste the default sharing link into the embed field on the content builder.
Google Sheets will require you copy and paste the default sharing link into the embed field on the content builder.
PDFs require you simply copy the default URL and paste it into the embed field on the content builder.
Slideshare
In your Slideshare, first, click on the “Share” icon. You will be directed to a form that contains the embed code you need to extract the URL link from.
Important: you cannot simply copy and paste the ‘Link’ URL (at the bottom of the screenshot) into the content builder, you must copy the URL from the embed code, which will require you to edit this link slightly by deleting the first part of the link that includes the text <iframe = src=" and deleting the last part of the link (starting from " width=).
Microsoft (Word/Excel/Powerpoint):
First, click on the “Share” icon. You will be directed to a form that contains the embed code you need to extract the URL link from.
Important: you cannot simply copy and paste the ‘Link’ URL into the content builder, you must copy the URL from the embed code, which will require you to edit this link slightly by deleting the first part of the link that includes the text <iframe = src=" and deleting the last part of the link (starting from " width=).
Konveio will require you copy and paste the default sharing link into the embed field on the content builder.
Embedding maps
Google maps: First, click on the “Share” icon. You will be directed to a form that contains the embed map code you need to extract the URL link from.
Important: you cannot simply copy and paste the ‘Link’ URL into the content builder, you must copy the URL from the embed code, which will require you to edit this link slightly by deleting the first part of the link that includes the text <iframe = src=" and deleting the last part of the link (starting from " width=).
Arcgis: You will need to copy the default sharing link and paste it into the embed field on the content builder. The URL should like similar to this: https://www.arcgis.com/apps/View/index.html?appid=6b6a075eca8d4899958fb273710a6806
You can find more information about the right URL from Arcgis here.
Embedding data visualizations
Tableau: Go to the view in Tableau Public. Select the option "Share" at the bottom of the view and copy the URL link provided in the embed section. When embedding Tableau Public into the content builder, the URL must include the following parameters:
showVizHome=no
embed=true
Google Data Studio: first, click on the “Share” icon. You will be directed to a form that contains the embed code you need to extract the URL link from.
Important: you cannot simply copy and paste the ‘Link’ URL into the content builder, you must copy the URL from the embed code, which will require you to edit this link slightly by deleting the first part of the link that includes the text <iframe = src=" and deleting the last part of the link (starting from " width=).
Embedding social posts
Facebook: first, click on the “Share” icon. You will be directed to a form that contains the embed code you need to extract the URL link from.
Important: you cannot simply copy and paste the ‘Link’ URL into the content builder, you must copy the URL from the embed code, which will require you to edit this link slightly by deleting the first part of the link that includes the text <iframe = src=" and deleting the last part of the link (starting from " width=).
Eventbrite: will require you copy and paste the default sharing link into the embed field on the content builder.
Unfortunately, neither Tweets nor Instagram posts can be embedded. This has to do with those companies’ policies and is not something we have any control over.
Embedding videos
You can embed a clickable video in your content builder by clicking the video icon in the editor and pasting the URL link of the video. Make sure to use the correct url, which can differ per video tool. Here's some noteworthy info:
Youtube: first, click on the “Share” icon. You will be directed to a form that contains the embed code you need to extract the URL link from.
Important: you cannot simply copy and paste the ‘Link’ URL into the content builder, you must copy the URL from the embed code, which will require you to edit this link slightly by deleting the first part of the link that includes the text <iframe = src=" and deleting the last part of the link (starting from "title=).
Vimeo: first, click on the “Share” icon. You will be directed to a form that contains the embed code you need to extract the URL link from.
Important: you cannot simply copy and paste the ‘Link’ URL into the content builder, you must copy the URL from the embed code. The embed URL should contain the 'video ID' and would look like this: https://player.vimeo.com/video/<video_id>.
Daily Motion: First, click on the “Share” icon. You will be directed to a form that contains the embed code you need to extract the URL link from.
Important: you cannot simply copy and paste the ‘Link’ URL into the content builder, you must copy the URL from the embed code, which will require you to edit this link slightly by deleting the first part of the link that includes the text <iframe = src=" and deleting the last part of the link (starting from " width=).
Dreambroker: First, copy the default sharing link. For Dreambroker embed links, you will need to manually add the word iframe into the URL you are about to paste into the embed field on the content builder
<https://www.dreambroker.com/channel/3lkvmi5h/33jxadml> would need to be edited to: <https://www.dreambroker.com/channel/3lkvmi5h/iframe/33jxadml>
Wistia will require you copy and paste the default sharing link into the embed field on the content builder.