{"id":6485,"date":"2020-12-14T06:55:58","date_gmt":"2020-12-14T06:55:58","guid":{"rendered":"https:\/\/modelo.io\/blog\/?p=6485"},"modified":"2024-06-20T03:38:09","modified_gmt":"2024-06-20T03:38:09","slug":"embedding-sketchup-models-into-your-website-with-modelo","status":"publish","type":"post","link":"\/blog\/index.php\/2020\/12\/14\/embedding-sketchup-models-into-your-website-with-modelo\/","title":{"rendered":"Embedding Sketchup Models into your website with Modelo."},"content":{"rendered":"\n<p>Looking for a stable and easy method of embedding Sketchup models into websites? Use Modelo!  Modelo is the leading platform to <strong>publish, share, and integrate 3D content anywhere on the webs.<\/strong><\/p>\n\n\n\n<h1>Embed 3D models to your website<\/h1>\n\n\n\n<div class=\"modelo-wrapper\"> <div style=\"width: 100%; padding-bottom: 56.25%; position: relative\"> <div style=\"position: absolute; top: 0; bottom: 0; left: 0; right: 0;\"> <iframe src=\"https:\/\/app.modelo.io\/embedded\/Wx1AFR7L1r?viewport=true&amp;autoplay=true&amp;autoRotate=true&amp;hideTools=false\" style=\"width:100%;height:100%;\" frameborder=\"0\" mozallowfullscreen=\"\" webkitallowfullscreen=\"\" allowfullscreen=\"\"><\/iframe> <\/div> <\/div> <\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/modelo.io\/?utm_source=newsletter&amp;utm_medium=blog&amp;utm_campaign=embed\"><img loading=\"lazy\" width=\"300\" height=\"57\" src=\"\/blog\/wp-content\/uploads\/2020\/12\/SIGNUP-TO-MODELO-300x57.png\" alt=\"Register for a Free Modelo Account\" class=\"wp-image-5127\"\/><\/a><\/figure><\/div>\n\n\n\n<h3>1. View your Model in Modelo<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" src=\"\/blog\/wp-content\/uploads\/2020\/12\/1-1-300x151.png\" alt=\"\" class=\"wp-image-5858\" width=\"580\" height=\"292\"\/><\/figure><\/div>\n\n\n\n<p>Drag and upload your Sketchup models on Modelo. Once you upload your model, navigate to the 3D view page, which looks like the screenshot above. <\/p>\n\n\n\n<h3>2. Click the Share icon and select &#8220;Embed&#8221;<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" width=\"214\" height=\"352\" src=\"\/blog\/wp-content\/uploads\/2020\/12\/embed.png\" alt=\"\" class=\"wp-image-6506\" srcset=\"\/blog\/wp-content\/uploads\/2020\/12\/embed.png 214w, \/blog\/wp-content\/uploads\/2020\/12\/embed-182x300.png 182w, \/blog\/wp-content\/uploads\/2020\/12\/embed-122x200.png 122w\" sizes=\"(max-width: 214px) 100vw, 214px\" \/><\/figure><\/div>\n\n\n\n<p>Click the share icon at the far right of the toolbar and select the &#8220;Embed&#8221; option. This will open an Embed Options popup, which provides you with your html code for the iframe. <\/p>\n\n\n\n<h3>3. Choose your Embed options<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" width=\"661\" height=\"780\" src=\"\/blog\/wp-content\/uploads\/2020\/12\/embed-option.png\" alt=\"\" class=\"wp-image-6507\" srcset=\"\/blog\/wp-content\/uploads\/2020\/12\/embed-option.png 661w, \/blog\/wp-content\/uploads\/2020\/12\/embed-option-254x300.png 254w, \/blog\/wp-content\/uploads\/2020\/12\/embed-option-169x200.png 169w\" sizes=\"(max-width: 661px) 100vw, 661px\" \/><figcaption><br><\/figcaption><\/figure><\/div>\n\n\n\n<p>Modelo provides many display options in the embedding window. They can help you display models perfectly in different situations. Please read &#8220;<a href=\"https:\/\/modelo.io\/blog\/index.php\/2020\/12\/14\/modelo-embedding-options\/\">Modelo Embedding Option<\/a>&#8221; for more details.   <\/p>\n\n\n\n<h3>4. Copy and Paste your Embed iframe html<\/h3>\n\n\n\n<p>With your Embed settings selected from Step 3 copy the iframe text (which will change slightly based on your preferred settings). Switch to the page in your blog or website in which you want to embed, select the embed option and paste!<\/p>\n\n\n\n<p>Keep in mind: You will probably need to play around with the settings a bit and explore the embed support options within your own publishing platform.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/modelo.io\/?utm_source=newsletter&amp;utm_medium=blog&amp;utm_campaign=embed\"><img loading=\"lazy\" width=\"300\" height=\"57\" src=\"\/blog\/wp-content\/uploads\/2020\/12\/SIGNUP-TO-MODELO-300x57.png\" alt=\"Register for a Free Modelo Account\" class=\"wp-image-5127\"\/><\/a><\/figure><\/div>\n\n\n\n<p><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Looking for a stable and easy method of embedding Sketchup models into websites? Use Modelo! Modelo is the leading platform to publish, share, and integrate 3D content anywhere on the webs. Embed 3D models to your website 1. View your Model in Modelo Drag and upload your Sketchup models on Modelo. Once you upload your &hellip; <\/p>\n<p class=\"link-more\"><a href=\"\/blog\/index.php\/2020\/12\/14\/embedding-sketchup-models-into-your-website-with-modelo\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Embedding Sketchup Models into your website with Modelo.&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":6506,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[63],"tags":[],"_links":{"self":[{"href":"\/blog\/index.php\/wp-json\/wp\/v2\/posts\/6485"}],"collection":[{"href":"\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"\/blog\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=6485"}],"version-history":[{"count":11,"href":"\/blog\/index.php\/wp-json\/wp\/v2\/posts\/6485\/revisions"}],"predecessor-version":[{"id":7901,"href":"\/blog\/index.php\/wp-json\/wp\/v2\/posts\/6485\/revisions\/7901"}],"wp:featuredmedia":[{"embeddable":true,"href":"\/blog\/index.php\/wp-json\/wp\/v2\/media\/6506"}],"wp:attachment":[{"href":"\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=6485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=6485"},{"taxonomy":"post_tag","embeddable":true,"href":"\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=6485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}