Why Embed?
There are two main ways to add IdeaRoom to your website:
Subdomain Link: This is the simplest and most common method. It involves creating a link like idearoom.yourcompany.com that takes customers to your configurator.
Embedding: This means placing the configurator right on a page within your existing website. This might be a better choice if you have specific search engine optimization (SEO) needs or want more control over the page's design.
Important Considerations Before You Start
Blank Canvas: Make sure the page where you'll embed IdeaRoom is completely empty. Any other content can interfere with the configurator's design and functionality, especially on mobile devices.
No Headers or Footers: For now, IdeaRoom doesn't play well with headers or footers. We know this might be a bummer, but we're working on it!
Let's Embed!
Get Your Code: Reach out to your friendly IdeaRoom Customer Support team. They'll provide you with a special code called your "Vendor Key."
Choose Your Product: Select the code snippet below that matches your IdeaRoom product.
Customize the Title: Between the
<title>tags, you can add a title that fits your website.Add Your Vendor Key: Replace the placeholder "vendorkey" in the code with your actual Vendor Key.
Paste the Code: Copy and paste the entire code snippet onto your blank webpage.
You're Done! Save your page, and your IdeaRoom configurator should be ready to use.
Code Snippets
IdeaRoom for Sheds
HTML
<!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
HTML
<!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
HTML
<!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>
Need a Hand?
If you get stuck or have questions along the way, don't hesitate to reach out to our support team. We're always happy to help!