Note: This is for advanced users only. Incorrect use of an iFrame may cause pages on your Website to not display properly. Adding an iFrame on your Website may be a handy way of displaying a blog on your Website. There are other uses for iFrames as well.
An iFrame is literally a window-within-a-window on your site. On a page on your site you can create a window that shows the view of a completely different site. In this way you can include the contents from another site on a page of your own site. It is relatively easy to do and offers a solution to showing content on your site that is being hosted on another site.
Here's how to create an iFrame on your site:
- Go to the website that you'd like to iFrame into your website to retrieve the URL.
- Paste the URL into this code string by replacing the "http://thedomain.com/" content with the URL you're iFraming. Ensure that you keep the quotes around the URL: <iframe src="http://thedomain.com/" width="100%" height="600" style="border:0;"></iframe>
- For this example I will be using an embedded map from Google, my code is as follows:
<iframe height="600" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2831.504254254235!2d-93.2557778841931!3d44.79091118613522!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87f6300ea6415e3b%3A0xe92574dec7d399bb!2s1548+Cliff+Rd+E%2C+Burnsville%2C+MN+55337!5e0!3m2!1sen!2sus!4v1490906238496" style="border:0;" width="100%"></iframe>
- Navigate to the page you'd like to add the iFrame to within your portal at MyVCG.com (Website > Hover over Site Content > Click on desired page).
- Click the Source button in the upper left of the web editor.
- Paste the code string where you'd like for this iFrame to appear.
- Click the Source button to toggle back to the "What you see is what you get editor". Note: The preview within the portal will not show the content within your frame, you'll want to view your website to view the iFrame content.
- Scroll down to the bottom and click Save Changes at the bottom.
- You should see your iFrame appear on the corresponding page of your website. If you're not seeing the iFrame, simply refresh your page to pull the most updated data.
Again, this article is for advanced users only and requires a basic understanding of HTML. If you have any questions or concerns about this, please do not hesitate to reach out to your support team at VCG. You can email us at VCGSupport@VCGCorporate.com or call at 800-558-3054.