Hello, how can we help you?

A Visme can be easily embedded to any website or blog.  The process is very similar to how one embeds other third party objects such as from Youtube.

1
 From Publish window, click on the Embed to a site or Blog tab.

embed to a site or blog

2
Copy the HTML code (also called “embed code”) and then paste to your website or blog.

copy code

Tip:
You need to insert this into the HTML code of your website.  Nearly all site builders, and CMS (Content management systems) have the ability to insert HTML code snippets to web pages.    If you are not sure how to insert this, refer to your website’s documentation or contact your webmaster / web designer for assistance.

For example, if your content management system is WordPress (currently the most popular CMS) here’s how you can embed to your site:

3
Login to your WordPress admin area, and find the post you want to insert the content to.   Then switch to the Text mode located on top right of your editor as shown below.

Screen Shot 2014-12-28 at 10.57.55 AM

4
Paste the embed code from Visme to the editor in the location you want to insert it.(as shown below)

Screen Shot 2014-12-28 at 11.01.54 AM

5
Switch back to Visual tab and you can see the area occupied by the Visme project. (You will need to Preview/Publish your project on WordPress to view the project)

Screen Shot 2014-12-28 at 11.02.05 AM


What is the difference between Responsive and Fixed Width?

Responsive is where your visme will automatically adjust to the width of the the container it is inserted in.  On the other hand a Fixed width will be exactly the width of the Visme project.

For example if your Visme is 450 pixels and your website’s container (or column) it is inserted onto is 600 pixels;  your project will appear this way:

embed_visme-fixed-size

And if you set your Visme to Responsive (which is the default setting) and your website’s container (or column) it is inserted onto is 600 pixels;  your project will appear this way:

embed_visme-responsive

Want to learn other ways to use Visme online?  Visit this topic to learn various methods to publish for the web.

NOTE: 
Some platforms or hosts do not support embeds of third party codes or pose limitations.  For example WordPress websites hosted on WordPress.com pose such restrictions.

Sometimes you want to use a third party service and insert content from an external application to your Visme.

Using the iframe widget you can pretty much insert content from any trusted third party provider that gives you iframe 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 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 iframe?

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.

1
Select the iframe widget from left panel

This is done by clicking the blue </> icon on the left panel of your Visme editor.

2
Grab the iframe code from your favorite platform

Today most web based content providers allow 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 example of a iframe from Wufoo, a free form provider.

iframe

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

iframe-paste

Once the iframe widget is launched, you would need to paste the external iframe content. (Copy and paste).

Embed third party widget code to Visme

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


4
Customize your iframe on project area (Optional)

You can  play with the customization using Visme design features and 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.

arrange-for-iframe

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

Didn't find the answer to your question? Contact us using the form below: