How can we help you?

Popular Topics : The Basics, Tips & Tricks , and Designing & Editing

Menu +

Embedded Projects On A Website

A Visme can be easily embedded to any website or blog.  The process is very similar to embedding objects from other popular third-party platforms (i.e., YouTube)

1
Once your project is completed, select Share from the top right of the Editor window of your Project, then click on the Embed tab.

2
Copy the HTML code (also called the embed code) and then paste it to the content management system (CMS) of your website or blog.

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

Here’s an example of how embed code is added to WordPress, which is the most popular open source blogging/website platform.

3
Locate the page in which you want to add your HTML code. Click on the Text tab shown.

Now paste the embed code that you copied from your Visme Project.


What is the difference between Responsive and Fixed Width?

Responsive is where your Visme project automatically adjusts to the width of the embed container.

If you set your project to Responsive (the default setting) and your website’s container (or column) is 600 pixels wide, your project will appear like this:

 

On the other hand, A Fixed Width will instruct the code to display your content using the exact pixel width you set for your Project in the Editor window. So how will a fixed width look if the width is different from its container? For example, if your Visme Project is 450 pixels wide and your website’s container (or column) is 600 pixels wide, then your project will appear like this:

Embed Project in Fixed Width

If needed, you can edit this width by navigating to the menu at the top left of the Editor above the sidebar, and selecting Canvas Size.

Viewer Functionality after Embed is complete

1
After your Project has been embedded to your website, streamlined controls will be available for the viewer.

2
Using the arrow buttons, the viewer can navigate through the slides both forwards and backwards.

3
To the right of the control bar, the viewer can also choose to Mute/Unmute the Project, Share it, or expand it to a Fullscreen view.

4
Remember, if you don’t want your viewers to be able to use the Control Bar, you can disable it. In the Editor window, navigate to the top left menu above the sidebar and select Publish Settings.

Click the Advanced Settings tab, then set the Control Bar to OFF. This will remove the control bar from the embed bar from the embed code of your project.

NOTE:
Some third-party platforms and hosts do not support embeds of third party codes, or pose limitations to those embeds. For example, WordPress websites hosted on WordPress.com pose such restrictions.
Back to home
Home
Publish & Download
  • The Basics
  • Getting Started
  • Common Questions & Answers
  • Creating & Editing 101
  • Publish & Download
  • Account & Plans
  • For Print
  • Project Types
  • Presentations
  • Infographics
  • Reports and Ebooks
  • Printables
  • Web Graphics
  • Social Graphics
  • Designing & Editing
  • Text & Text Widgets
  • Shapes & Icons
  • Photos
  • Charts & Widgets
  • Video
  • Tables
  • Audio & Music
  • External Content (i-frames)
  • Backgrounds
  • Animation
  • Make content Interactive
  • Grides & Guides
  • Content Blocks
  • Collaboration and Team Features
  • Apps and Integrations
  • Workspaces
  • My Brand
  • Analytic Tools & Insights
  • Tips & Tricks
  • Productivity Tools
Visme 101

Learn how Visme will change the way you create stunning content.

Reserve your seat
  • Live Q&A
  • New Features
  • Cool Tips