Higher Logic Vanilla (Vanilla) automatically embeds external content from many social media sites in the knowledge base and post-creation editors. This type of embedding is known as Smart Embed.
- Smart Embeds are always allowed, as they are from pre-approved, "safe" sites, such as YouTube, Vimeo, etc.
📝 NOTE: It's also possible to embed iFrame content from external sources, if your Vanilla community uses Rich Editor. There is more nuance and security involved with this embed type, to ensure users cannot bring content into your Vanilla community from unapproved, and potentially unsafe, sources. Check out this article to learn more about iFrame embeds, including how to use them and examples of iFramed content in action.
The process to use Smart Embeds is a little different depending on which editor you're using (e.g., Rich Editor, Advanced Editor, etc.). The process for each is detailed in its associated section below.
Rich Editor
For Rich Editor, the embedding happens automatically while editing.
🛑 IMPORTANT: While some sites offer different types of embed codes, unrecognized parameters may stop Vanilla from correctly parsing the URL. Use the methods outlined in the Supported embeds section of this article to ensure your content is correctly embedded.
Rich Editor example
In Rich Editor, pasting a link automatically embeds it.
Legacy editors
When creating a post, simply paste the URL into the editor, like you see below:
If the URL is from a supported site and has the proper identifier, the content will automatically embed into the post body when published.
🛑 IMPORTANT: While some sites offer different types of embed codes, unrecognized parameters may stop Vanilla from correctly parsing the URL. Use the methods outlined in the Supported embeds section of this article to ensure your content is correctly embedded.
Supported embeds
Listed below are the media types you can embed in Rich Editor, along with an example of what each embed looks like.
Links
With links, titles, descriptions, and images are fetched from the linked URL.
https://success.vanillaforums.com/kb/articles/13
Twitter
Use the full URL of a tweet to embed it. Expanding a tweet in your timeline should provide the correct URL in your address bar.
✔️ TIP: To embed a tweet from a thread, click the specific tweet's timestamp.
https://twitter.com/vanilla/status/814160323867447296
YouTube
To embed a video that will play from the beginning, copy its full URL and paste it into the editor:
https://www.youtube.com/watch?v=JP0nFayBWIU
To a embed a video and have it start at a specific time, use the following format:
https://youtu.be/JP0nFayBWIU?t=50
To retrieve this special embed URL, click the Share button, check the Start at box, enter a time, and then copy the URL.
Vimeo
Use the numerical ID for a Vimeo video:
https://vimeo.com/31976384
Wistia
Wistia is a video-hosting website that focuses on the professional needs of businesses. Because Wistia videos have increased privacy settings, the process of embedding them is a bit more involved.
First, you want to find the project that you’d like to share from.
In that project, find the specific video that you’d like to embed in a post.
Click on the video and copy the URL from the address bar.
You can also click on Video Actions and select the Social Sharing option from the list. That will give you this screen which also provides the full URL.
When you have the URL copied, go back to the post that you are writing and paste the link right into the body of the text - exactly where you want the video to appear.
📝 NOTE: Wistia’s embed does not respect starting at a specific time. This is a limitation within the embed code from Wistia.
Other video embeds
Videos display as a large thumbnail. Once the play button is clicked, the video will play directly in the post. Rich Editor currently supports:
SoundCloud
Both playlists and individual tracks will embed from SoundCloud when you insert a URL into a post.
This URL will start with the first song and then continue to play the contents of the set:
https://soundcloud.com/lauramakesart/vanilla-silence
This URL will play a specific track from the playlist. You can grab a specific track URL by clicking its name in the player at the bottom of your screen:
https://soundcloud.com/lauramakesart/vanilla-silence?in=lauramakesart/sets/vanilla-example
MURAL
You can embed MURAL boards by inserting the board's embed URL into your posts.
https://app.mural.co/embed/f68fa13f-5bf2-4c02-ba22-113f8a5a29a4
⭐️ EXAMPLE: Try it out! You can pan the board below by clicking and dragging and zoom in/out with your mouse wheel. You can also perform these actions by clicking the icon at the bottom right
Codepen
You can insert Codepen URLs into your posts to embed Pens.
https://codepen.io/mrtairea/pen/yJapwv
Other embeds
Rich Editor also supports:
- Giphy
- Instagram
- Getty Images
- Brightcove
What causes the warning icon while inserting a Rich Embed?
Users attempting to embed content while using a browser with strict privacy settings or adblockers may not be able to load a Rich Embed from certain sites in their browser. The warning icon indicates that all the data necessary to render the embed is present in the editor, but the user’s browser is not allowing the embed to be created.
These embeds will be still be able to load for users with a more permissive browser, even on the same post.
