Navigation

Getting Started

Store Builder

Admin Settings

Business Hub

Customer Account Area

FAQs & Troubleshooting

Other Resources

  1. DecoNetwork Help
  2. FAQs
  3. Admin - Websites

How Do I... Embed DecoNetwork With iFrames

Avatar
Lee Prazner
Updated
Follow

Why Embed?

Need an e-commerce platform supported by DecoNetwork’s Business Hub from your existing website? Plug in a simple iFrame on your current website and you’ll have a full e-commerce platform in no time. We will encourage you to actually move your entire website for economical and maintenance reasons. We are not big fans of iFrames in general (such an SEO waste) but, if embedding your DecoNetwork store into an existing website is what you’re looking to accomplish, here is a guide to get it done.

What is an iFrame?

The iFrame is used to embed content from website A into website B by embedding an HTML document inside another HTML document. This allows the end-user to interact with content from website A directly from within website B.

To embed your DecoNetwork site using an iFrame:

  1. DecoNetwork disables iframe embedding by default. To enable it you'll need to visit the Domain Settings admin page for the site you're looking to embed and enable Allow Embedding In IFRAME.
  2. Most likely you want to display the Online Designer but other pages might make sense too. You need to know the URLs to use and how to optimize for iFrame use. Below is a list of pages and the example embed URL. You can access and customize each page using the Website Editor by navigating to Website > Edit Website > Website Pages and selecting a page.
    IMPORTANT:
    Make sure your embed URL includes the iFrame mode parameter, as shown in the examples below (?_ifm=true). This mode does not use cookies as some browsers like Safari won't allow cookies on pages embedded in an iFrame, unless the domain has been visited by the user directly.

    If your embed URL already includes some parameters you might need to add it as &_ifm=true instead.

    NOTE: Not including this parameter leads to issues with checkout, like the cart showing empty when attempting to checkout.

    • Home: https://×××××.secure-decoration.com/?_ifm=true
    • Create: https://×××××.secure-decoration.com/create?_ifm=true
    • Products: https://×××××.secure-decoration.com/shop?_ifm=true
    • Designs: https://×××××.secure-decoration.com/designs?_ifm=true
    • Designer: https://×××××.secure-decoration.com/designer/customize?_ifm=true
    • Request a Quote: https://×××××.secure-decoration.com/request_quote?_ifm=true
  3. You may have noticed that links from above are using secure protocol (https). Use the secure domain on your URL for the iFrames. This is necessary so that your iFrame will work with any external page, including ones running over SSL.

    Make sure you use your own site's secure domain name instead of the example above. If you don’t know your domain name or if you wish to change your domain name, navigate to Website > Domain Settings and click Edit.

  4. Create and add your iFrame HTML into your existing website. You can copy and paste the iFrame HTML listed below into your own website's HTML. Remember to update the URL to that of the page you wish to embed. You can adjust the width and height values as needed. 
    <iframe src="YOUR-URL-HERE" width="870px" height="700px"></iframe>
  5. OPTIONAL: Streamline the store layout by removing the header and footer. From Website > Edit Website > Customize Template HTML, remove all unnecessary elements. Since you are using an iFrame, you don’t want the DecoNetwork menu or footer to display as this can create confusion. Your custom HTML code should look like this after the code reduction:

    Using DN8 theme:

    <!DOCTYPE html>
<html class="wf-loading">
  <head>
<[{"snippet":"system_style_sheets"}]>
<[{"snippet":"system_head_js"}]>
  <title><[{"snippet":"title"}]></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
  <[{"snippet":"system_head_meta_tags"}]>
<[{"snippet":"favicon"}]>
  </head>
  <body class="dn-site">
<div class="dn-content">
  <[{"snippet":"alerts"}]>
  <[{"snippet":"application"}]>
</div>
  </body>
</html>

    Using DN7 theme:

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <!--SID: R.I-->
   <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
   <title><page-title></page-title>
</title>
   <meta-data></meta-data>
   <theme-css></theme-css>
</head>
<body >
   <shopping-cart></shopping-cart>
   <application></application>
</body>
</html>

     

  6. OPTIONAL From Website > Edit Website > Customize Template CSS & Customize Template HTML, you can also make adjustments to stylize your pages so the embedded page blends in with the look and feel from the main site where this is being embedded.

Related articles

Comments

0 comments

Please sign in to leave a comment.