How To : Embed DecoNetwork With IFrames

Google+ Pinterest LinkedIn Tumblr +

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 a 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 HTML inside another HTML document. This allows the end-user to interact with content from website A directly from within website B.

Lets Begin! 

Step 1 of 5
Most likely you want to display the Online Designer but other pages might make sense too. You need to know the URL’s 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 by navigating to Website > Website Pages and selecting a page.

  • 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

Step 2 of 5
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 your iframe will work any external page including ones running over SSL.

Make sure you use your own sites’ 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, navigating to Website > Edit Domain Name and click Edit.

IMPORTANT:
Make sure your embed URL includes the iframe mode parameter as shown in the examples above (?_ifm=true). This mode does not use cookies as some browsers like Safari wont allow cookies on pages embedded in a iframe unless the domain has been visited by the user directly.

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

Step 3 of 5
From 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:

<!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>

From Website > Customize Template CSS, you can also make adjustments to stylize your pages if needed. This would be optional but a great way to blend the look and feel from website A and B.

Step 4 of 5
From Website > Website Page Options, disable the Breadcrumbs option. This hides the breadcrumb navigation and helps prevent confusion once a page is embed inside your current website.

From Website > Online Designer Settings, enable Allow Online Designer option. This displays the Online Designer so that your customers can customize products online.

Step 5 of 5
Last but not least, create and add your iframe HTML into your existing website. You can copy and paste the iframe HTML listed below into your own websites HTML. Remember to update the URL to that of the page you wish to embed. Cheers!

<iframe src="YOUR-URL-HERE" width="870px" height="700px"></iframe>

Similar Blog Posts

Share.

4 Comments

  1. nick hooykaas on

    HI
    i already have a whole setup with a designer and store from another independent package.
    I am interested in working together with a company that uses deconetwork. I don’t want to change my site / system over to deconetwork but am interested to know if i can use an Iframe to link the order process …. cart … to them so they can fufill my dropship reqirements?

    • Hey Nick would that happen to be Shopify by chance?? Just wondering, because I’m looking for someone that can instruct me how to embed my deconetwork designer into my Shopify westorr?? Thank you

  2. Hi. What’s most common in this scenario is clients start a new affiliate store dedicated to iFrame and skin it back with CSS to remove unwanted elements within the iFrame.

Leave A Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.