Embedding IdeaRoom on Your Website

Typically you will add IdeaRoom to your website using a link (such as idearoom.mycompany.com), which opens IdeaRoom using a subdomain of your existing domain. This approach is the most efficient and easiest way to deploy your IdeaRoom site.

However, you may want to embed IdeaRoom on a page on your website, rather than using a subdomain link. This may be appropriate if you have unique SEO requirements or you want flexibility in how you manage your website pages.

A few notes on embedding IdeaRoom on your website:

The IdeaRoom script must be added to a completely blank page. Any content that exists on the page will interfere with the IdeaRoom styles, causing it to not perform properly. This is particularly acute in mobile experiences.
You cannot add your header or footer to the IdeaRoom page. We understand that this is a desired integrated experience, but IdeaRoom currently doesn’t support this configuration. It is an untested deployment scenario, and IdeaRoom won’t fix issues caused by attempts to integrate with your header or footer.

To Embed IdeaRoom

Copy and paste the script below for your product to the blank page on your website. Note the following:

You may change the text between the <title> tags
You must replace “vendorKey” with the specific key provided by your Customer Success Manager

IdeaRoom for Sheds

<!DOCTYPE html>

<html style="height: 100%; width: 100%; margin: 0">

   <head>

      <meta name="viewport" content="width=device-width, initial-scale=1" />

      <title>IdeaRoom for Sheds</title>

   </head>

   <body style="width: 100%; height: 100%; margin: 0">

      <script async src="https://js.idearoom.com" charset="UTF-8"></script>

      <div id="shedview-configurator" data-v="vendorkey"></div>

   </body>

</html>

IdeaRoom for Carports

<!DOCTYPE html>

<html style="height: 100%; width: 100%; margin: 0">

   <head>

      <meta name="viewport" content="width=device-width, initial-scale=1" />

      <title>IdeaRoom for Carports</title>

   </head>

   <body style="width: 100%; height: 100%; margin: 0">

      <script async src="https://js.idearoom.com" charset="UTF-8"></script>

      <div id="carportview-configurator" data-v="vendorkey"></div>

   </body>

</html>

IdeaRoom for Buildings

<!DOCTYPE html>

<html style="height: 100%; width: 100%; margin: 0">

   <head>

      <meta name="viewport" content="width=device-width, initial-scale=1" />

      <title>IdeaRoom for Buildings</title>

   </head>

   <body style="width: 100%; height: 100%; margin: 0">

      <script async src="https://js.idearoom.com" charset="UTF-8"></script>

      <div id="carportview-configurator" data-v="vendorkey"></div>

   </body>

</html>