How to Embed an iframe code to a presentation and infographic

How to Embed an iframe code to a presentation and infographic

Written by:
Payman Taei

Nov 04, 2014

embed code

Visme provides thousands of assets and various Media features (including images, icons, graphs, video and audio) to add to your project.    With that said, sometimes you want to use a third party service and insert content from an external application to Visme. This is now easy is as 1, 2, 3!

What does this mean for you?

You can pretty much insert content from any trusted third party provider that gives you i-frame code (which is virtually any established provider from  Wufoo for forms,  SlideShare for Slides,  Spotify for Audio and the list goes on and on....)

What is an i-frame?

If you are not a techie, let me explain what an i-frame is in the most basic terms.   Think of it as a digital frame.

In the brick and mortar world, a frame is defined as a rigid structure that surrounds or encloses something such as a door or window.   In case of the internet we have what's called an iframe and this allows one to insert framed content from virtually anywhere on the web into their own website.

And in case of Visme we've enabled this feature so you can embed external content to your Presentations, Infographics, Animations and virtually anything else you create with the Visme platform.

here's how you can use iframe widget on Visme to add your own external content.

Select the iframe widget on left panel

embed-iframe-web-project

Grab your iframe code from your favorite platform

These days pretty much every content provider allows you to utilize their iframe code to insert content to other sites (or in this case to Visme).   This includes Youtube, Vimeo, Spotify, Wufoo (for forms), and thousands of other providers.   Even Visme provides it's own embed code that you can insert to another site or even another of your projects.

Below is an examply of a iframe from Wufoo, a free form builder.

copy-iframe-code

Copy and Paste the embed code in the iframe widget input box

add-embed-code-presentation

paste-iframe-code-to-presentation-or-infographic

Click done and your third party content will be inserted right in your project canvas area.

Customize your iframe on project area

The beauty of Visme comes into play with the customization and internal assets.   This means even though you may have a boring looking piece of content,  assuming it is see through (transparent as is case with the form below) you can add background color and various objects near or around your form to make it stand out more.

Of course you don't want to overdo it.   In example below an otherwise boring form has been enhanced by placing a solid shape with a color assigned to it and moved under the form inserted to the page.

customize-iframe-design

You can insert simple shapes and apply transparency to make your content standout.  In the example below the user added a simple gear icon and then via the "FX" setting of the object reduced the opacity of the object.

It's all about clean design and simplicity.  You want to have a balance and don't let your design ideas take over the purpose of your content.

customize-iframe-design-code

 

Make sure you take advantage of iframe and other widgets provided through Visme to create better content.   Your audience will love you for it!

Create Stunning Content!

Design visual brand experiences for your business whether you are a seasoned designer or a total novice.

Try Visme for free

    We’re stingy and don’t share emails with anyone.

    About the Author

    Payman Taei is the founder of Visme (he doesn’t like using the word ”CEO”—it’s way too formal), a DIY platform that allows everyone to create and manage presentations, infographics, reports and other visual content.

    He’s also the founder of HindSite Interactive, an award-winning web design and web development company.