Rich Embed Codes for Knowledge Base Articles
You can use iFrame embed codes to incorporate widgets, media, feeds, and other external content into your knowledge base articles. This is in addition to the existing link-based content embeds that Rich Editor already supports.
π NOTE: This feature is currently limited to KBs only in order to ensure the security of user content. A future release might introduce a limited or permissions-gated version of this feature into the community.
What is an embed code?
An embed code is a snippet of code -- from an external source -- that can be added to a web page in order to embed content that is hosted on that external source.
An iFrame (inline frame) tag is an HTML tag that contains another HTML element by means of that elements code being embedded.
Embed codes can be used to display a variety of content from an external site.
Below is an example of an embed code.
<iframe src="https://calendar.google.com/calendar/embed?src=en.canadian%23holiday%40group.v.calendar.google.com&ctz=America%2FToronto" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
How do I use an embed code?
π NOTE: Make sure that your (Dashboard > Settings > Discussions > Posting) Post Format is set to Rich.
Now, in the KB-article editor (release 2020.019 and later):
1. Place your cursor where you want to insert the external media.
2. Click the insert media icon (< >).
3. Paste the embed code in the field of the Insert Media popup and click Insert.
The code for the external media is embedded at the location of your cursor in the editor and the media displays at this location when the KB article is viewed.
How are embed codes different from Rich Embeds?
Embed codes use the same underlying system as Rich Editor embed codes, but they are a bit more complex and a lot more flexible.
Rich Editor embed codes work by inserting a URL. This URL is passed to Vanilla's APIv2 which parses the URL and determines whether the embed type supported.
If the embed type is supported, Vanilla automatically generates a known, safe version of an embed code. This is what makes Rich Embeds safe to use for general user content in a community.
If the embed type is not supported, a Vanilla Forums server tries to visit the site and extract a summary from it. This generates a link embed which looks like the following:
Embed codes work by using a pre-made embed code from an external service. Any service that works with an iFrame is supported and will successfully embed without Vanilla having to know about that service.
π NOTE: only certain users (e.g., article editors) are able to use this functionality.
Are there security risks when using embed codes?
Yes, because iFrame embed codes serve content from an external site that could change without your knowledge. Therefore, when you use them remember:
Vanilla cannot vouch for the safety of external services.
Embed content only from externals services that you trust; malicious code could put your users at risk.
Embed content from reputable external services only.
Examples of iFrame embed codes
Vanilla supports iFrame embed codes from any external service. The sections that follow provide examples of some iFrame embed codes from external services.
Try it!
Note how -- right in this article -- you can interact with the survey, the calendar, and the form.
Qualtrics Survey
<iframe src="https://qwebsite.qualtrics.com/jfe/form/SV_8IaLCn6CngOqXsx"></iframe>
Google Calendar
Private calendars are viewable only by users who are authenticated with Google and have access to that calendar.
<iframe src="https://calendar.google.com/calendar/embed?src=en.canadian%23holiday%40group.v.calendar.google.com&ctz=America%2FToronto" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
Google Sheets
<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQeo7wTMNN-_gOJ3lpErO41NWXcIq0jMeqH_MT5XRHk1-LnfxPHfnFXaCbHnL5zYKXYu52wYoiYVXZm/pubhtml?gid=937430537&single=true&widget=true&headers=false"></iframe>
Google Forms
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeJpM3jqwvJjx0ykq9K6AvqdX2Yl0VsN8PVrVvmvZFGjnyUaQ/viewform?embedded=true" width="640" height="1487" frameborder="0" marginheight="0" marginwidth="0">Loadingβ¦</iframe>
How do I find an embed code?
Each embed code is unique to the host site and the file it embeds, and each host site/external service has a unique process for retrieving its embed codes.
π NOTE: As these processes are unique and proprietary (and subject to change), Vanilla recommends that you check with the host site or consult its support documentation.
In addition to the examples provided above, many external services offer their own embed codes, which might be available in the service's user or support documentation. Another option is to search on "<external_service_name> embed code", as in the following examples.
Australian Rules Football
PBS
NBA
Community TeamCommunity Team
