Rich Editor 2 supports the embedding of iFrame content from external sources, both in your community's:
- knowledge base
- and posts and comments.
This enables you and your users to incorporate widgets, media, feeds, and other external content across your Higher Logic Vanilla (Vanilla) community, such as Google Maps or Calendars, videos from Vidyard, content from Spotify, and so much more.
📝 NOTE: In addition to iFrame embeds, Rich Editor also supports Smart Embeds, which you can learn more about in this article.
🛑 Are there security risks when embedding iFrame content?
Yes, because iFrame embeds serve content from an external source that could change without your knowledge. Generally speaking, remember the following when embedding iFrame content:
- Vanilla cannot vouch for the safety of external sources.
- Embed content only from external sources that you trust; malicious code could put your users at risk.
Also, the security regarding iFrame embeds differs depending on where you're embedding them:
- In knowledge base articles, no security measures are in place, as articles are created and managed by your staff (and potentially a few trusted users). Your staff should adhere to the general guidelines above.
- However, because posts and comments can be posted freely by your users, a level of security is introduced: they'll only be able to embed iFrame content from sites you've specifically added to your Trusted Domains list. This is done intentionally to ensure users cannot bring content into your Vanilla community from unapproved, and potentially unsafe, sources.
What is an iFrame embed?
An iFrame embed 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. In this case, you'll be adding them to a knowledge base article or post/comment.
Here's an example:
<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 embed iFrame content?
First, on the Dashboard > Settings > Posts > Posting page, make sure the Post Format is set to Rich.
Then, when creating a knowledge base article or post/comment:
- Place your cursor where you want to insert the iFrame content.
- Click the insert media icon (< >).
- Paste the iFrame embed code in the Insert Media popup and click Insert.
The code for the external media is embedded at your chosen location in the editor, and the iFrame content will display at this location when the article or post is viewed.
Examples of iFrame embeds
Vanilla supports iFrame embed codes from any external source that offers them. Below are examples of some embedded iFrame content.
Check out how, right in this article, you can interact with a survey, a calendar, and forms that are embedded iFrames.
Qualtrics Survey
Embed code:
<iframe src="https://qwebsite.qualtrics.com/jfe/form/SV_8IaLCn6CngOqXsx"></iframe>
Insert Media result:
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 external source and the file it embeds, and each external source 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 external source or consult its support documentation.
In addition to the examples provided above, many external sources offer their own embed codes, which might be available in their user or support documentation. Another option is to search on "<external_source_name> embed code", as in the following examples.
Australian Rules Football
PBS
NBA
