Rich Embed Codes for Knowledge Articles - Vanilla Success
<main> <article class="userContent"> <p>Starting with <a href="https://success.vanillaforums.com/kb/articles/331" rel="nofollow noreferrer ugc">release 2020.019</a> and the introduction of embed code support for Knowledge Base (<strong>KB</strong>) articles, Rich Editor is more powerful than ever!</p><p>You can now use <strong>iFrame <em>embed codes</em></strong> to incorporate <em>widgets</em>, <em>media</em>, <em>feeds</em>, and other external content into your knowledge base articles. This is in addition to the existing link-based content embeds that <a href="https://success.vanillaforums.com/kb/articles/330-rich-embeds" rel="nofollow noreferrer ugc">Rich Editor already supports</a>.</p><p>📝 <strong>NOTE</strong>: 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<em>.</em></p><h2 data-id="what-is-an-embed-code">What is an embed code?</h2><p>An embed code is a <em>snippet of code</em> -- from an external source -- that can be added to a web page in order to embed content that is hosted on that external source.</p><div class="blockquote"><div class="blockquote-content"><p class="blockquote-line">An <strong>iFrame</strong> (<strong>inline frame</strong>) tag is an HTML tag that contains another HTML element by means of that elements code being embedded.</p></div></div><p>You may have used an embed code before in <a href="https://success.vanillaforums.com/kb/articles/19-pockets" rel="nofollow noreferrer ugc">Vanilla Pocket</a> or a content management system. Embed codes can be used to display a variety of content from an external site.</p><p>Below is an example of embed code.</p><pre class="code codeBlock" spellcheck="false" tabindex="0"><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> </pre><h2 data-id="how-do-i-use-an-embed-code">How do I use an embed code?</h2><p>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.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/5022541/uploads/GEJ770TDCJRD/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/5022541/uploads/GEJ770TDCJRD/image.png" alt="User: "Rich Editor Embed Menu"" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p></p><p><br></p><h2 data-id="how-are-embed-codes-different-from-rich-embeds">How are embed codes different from Rich Embeds?</h2><p>Embed codes use the same underlying system as <a href="https://success.vanillaforums.com/kb/articles/330-rich-embeds" rel="nofollow noreferrer ugc">Rich Embeds</a>, but are a bit more complex, and a lot more flexible.</p><p><strong>Rich Embeds</strong> 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.</p><p>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:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"Engage your customers with a vibrant and modern online customer community forum. A customer community helps to increases loyalty, reduce support costs and deliver feedback.","photoUrl":"https:\/\/vanillaforums.com\/images\/metaIcons\/vanillaForums.png","url":"https:\/\/vanillaforums.com","embedType":"link","name":"Online Community Software and Customer Forum Software by Vanilla Forums"}"> <a href="https://vanillaforums.com" rel="nofollow noreferrer ugc"> https://vanillaforums.com </a> </div><p><strong>Embed Codes </strong>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 <strong><em>anything</em></strong> 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.</p><h2 data-id="are-there-security-risks-when-using-an-embed-code">Are there security risks when using an embed code?</h2><p>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:</p><ul><li>Ensure you trust the external service you are embedding. If you embed a malicious site it could put your user's at risk.</li><li>Only embed content from reputable vendors.</li><li>Vanilla cannot vouch for the safety of external services.</li></ul><h2 data-id="what-types-of-embed-codes-are-available">What types of embed codes are available?</h2><p>Vanilla supports <strong><em>iframe</em></strong> type embed codes from any service. Although any service can offer or built these, here's a few examples from popular service providers.</p><h2 data-id="qualtrics-survey">Qualtrics Survey</h2><pre class="code codeBlock" spellcheck="false" tabindex="0"><iframe src="https://qwebsite.qualtrics.com/jfe/form/SV_8IaLCn6CngOqXsx"></iframe> </pre><div class="js-embed embedResponsive" data-embedjson="{"height":900,"width":1600,"url":"https:\/\/qwebsite.qualtrics.com\/jfe\/form\/SV_8IaLCn6CngOqXsx","embedType":"iframe"}"> <a href="https://qwebsite.qualtrics.com/jfe/form/SV_8IaLCn6CngOqXsx" rel="nofollow noreferrer ugc"> https://qwebsite.qualtrics.com/jfe/form/SV_8IaLCn6CngOqXsx </a> </div><h2 data-id="google-calendar">Google Calendar</h2><p>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.</p><pre class="code codeBlock" spellcheck="false" tabindex="0"><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> </pre><div class="js-embed embedResponsive" data-embedjson="{"height":900,"width":1600,"url":"https:\/\/calendar.google.com\/calendar\/embed?src=en.canadian%23holiday%40group.v.calendar.google.com&ctz=America%2FToronto","embedType":"iframe"}"> <a href="https://calendar.google.com/calendar/embed?src=en.canadian%23holiday%40group.v.calendar.google.com&ctz=America%2FToronto" rel="nofollow noreferrer ugc"> https://calendar.google.com/calendar/embed?src=en.canadian%23holiday%40group.v.calendar.google.com&ctz=America%2FToronto </a> </div><h2 data-id="google-sheets">Google Sheets</h2><pre class="code codeBlock" spellcheck="false" tabindex="0"><iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQeo7wTMNN-_gOJ3lpErO41NWXcIq0jMeqH_MT5XRHk1-LnfxPHfnFXaCbHnL5zYKXYu52wYoiYVXZm/pubhtml?gid=937430537&amp;single=true&amp;widget=true&amp;headers=false"></iframe> </pre><div class="js-embed embedResponsive" data-embedjson="{"height":900,"width":1600,"url":"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vQeo7wTMNN-_gOJ3lpErO41NWXcIq0jMeqH_MT5XRHk1-LnfxPHfnFXaCbHnL5zYKXYu52wYoiYVXZm\/pubhtml?gid=937430537&single=true&widget=true&headers=false","embedType":"iframe"}"> <a href="https://docs.google.com/spreadsheets/d/e/2PACX-1vQeo7wTMNN-_gOJ3lpErO41NWXcIq0jMeqH_MT5XRHk1-LnfxPHfnFXaCbHnL5zYKXYu52wYoiYVXZm/pubhtml?gid=937430537&single=true&widget=true&headers=false" rel="nofollow noreferrer ugc"> https://docs.google.com/spreadsheets/d/e/2PACX-1vQeo7wTMNN-_gOJ3lpErO41NWXcIq0jMeqH_MT5XRHk1-LnfxPHfnFXaCbHnL5zYKXYu52wYoiYVXZm/pubhtml?gid=937430537&single=true&widget=true&headers=false </a> </div><h2 data-id="google-forms">Google Forms</h2><pre class="code codeBlock" spellcheck="false" tabindex="0"><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> </pre><div class="js-embed embedResponsive" data-embedjson="{"height":900,"width":1600,"url":"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSeJpM3jqwvJjx0ykq9K6AvqdX2Yl0VsN8PVrVvmvZFGjnyUaQ\/viewform?embedded=true","embedType":"iframe"}"> <a href="https://docs.google.com/forms/d/e/1FAIpQLSeJpM3jqwvJjx0ykq9K6AvqdX2Yl0VsN8PVrVvmvZFGjnyUaQ/viewform?embedded=true" rel="nofollow noreferrer ugc"> https://docs.google.com/forms/d/e/1FAIpQLSeJpM3jqwvJjx0ykq9K6AvqdX2Yl0VsN8PVrVvmvZFGjnyUaQ/viewform?embedded=true </a> </div><h2 data-id="others">Others</h2><p>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. <strong><em>Always make sure you are embedding from an official and trusted source.</em></strong></p> </article> </main>