Starting in release 2020.019, Rich Editor is more powerful than ever, with the capability to embed any external iFrame embed code in additional to the built-in link-based Rich Embeds.
Please note, that this feature is currently limited to knowledge base only in order to keep ensure user content is safe and secure. A future release may bring a more limited or permission gated version of this feature the Rich Editor in the community.
What is an Embed Code?
Embed codes are snippets from external services that you can use to embed various widgets in your site. You may have used one of these before in Vanilla Pocket or content management system. When used an embed code can display some widget, media, feed or other content from an external site.
They look kind of like this:
<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
In the KB article editor of Vanilla 2020.019 or greater you can simply paste an embed code into the Rich Editor's embed menu and click "Insert". You will see the embed appear at your current cursor position in the editor.
How are Embed Codes different from Rich Embeds?
Embed codes use the same underlying system as Rich Embeds, but are a bit more complex, and a lot more flexible.
Rich Embeds work by inserting a URL. This URL is passed to Vanilla's APIv2 which parses the URL and detects if it is a supported embed type or not. If it is a supported embed type, Vanilla will automatically generate a known, safe version of an embed code. This is what makes Rich Embeds safe to use for general user content in a community.
Any unsupported URLs causes a Vanilla Forums server to try and visit the site and extract various a summary from it. This will generate a link embed. It looks like this:
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 be embedded without Vanilla needing to know about that particular service. Because anything can be embedded, this functionality needs to be carefully restricted to only trusted users. At the moment this means only Article Editors can make use of this feature.
Are there security risks when using an embed code?
Embed Codes are only ever rendered in an iframe which gives some measure of isolation between Vanilla and the external service. Despite this iframes still serve content from another site that could change at any time without your knowledge. As a result, when you make use of this functionality you should keep the following in mind:
- Ensure you trust the external service you are embedding. If you embed a malicious site it could put your user's at risk.
- Only embed content from reputable vendors.
- Vanilla cannot vouch for the safety of external services.
What Types of Embed Codes are available?
Vanilla supports iframe type embed codes from any service. Although any service can offer or built these, here's a few examples from popular service providers.
Qualtrics Survey
<iframe src="https://qwebsite.qualtrics.com/jfe/form/SV_8IaLCn6CngOqXsx"></iframe>
Google Calendar Embed
When viewing the settings for a Google Calendar you can find an embed code. Please note that private calendars will only be viewable by user's that 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>
Others
Many web services offer embeds besides the ones listed here. These can generally be found by consulting documentation for the external service or by searching for "<MY SERVICE> Embed Code" online. Always make sure you are embedding from an official and trusted source.
