X
Think Differently. Think Visually. Receive weekly expert tips on becoming a better visual
communicator, right in your inbox.


Please leave this field empty.

We don't share your personal info with anyone.
Payman Taei

Written by: Payman Taei

November 4, 2014

How to Embed an iframe code to a presentation and infographic

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 provider.

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!

90% of all information transmitted to our brains is visual.
People remember...
Become a more effective visual communicator. With Visme, you can create, share or download your visuals with no design training. It's free! Take a tour.

Warning: Invalid argument supplied for foreach() in /home/vismeco/public_html/blog/wp-content/themes/blog/single.php on line 644



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 Do It Yourself platform allowing everyone to easily create, manage professional presentations & infographics.

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

2 responses to “How to Embed an iframe code to a presentation and infographic”

  1. Nice Blog, thanks for sharing this kind of information.

  2. Great blog! Everyone loves free stuff! Keep up the good work!

Leave a Reply

Your email address will not be published. Required fields are marked *