Embedding a MyOrderDesk web-to-print website into your Wordpress website - MKB 0090

    Follow

    In this knowledge base article we'll go over how to embed a MyOrderDesk website into a Wordpress website (or any other website).

     

    What does it mean to "embed a MyOrderDesk website"?

    Below you'll see several images of a website. The area inside the green square is a MyOrderDesk website that has been customized and simplified to make it look as if it belongs to the Printvia Wordpress website. To the untrained eye it's virtually impossible to tell that the MyOrderDesk website is embedded.

     

    IMAGE 1 (The Sign in Page)

    FWP1.png

     

    IMAGE 2 (An Ordering Page)

    FWP2.png 

     

    IMAGE 3 (A Job Form)

    FWP3.png

     

     

    How to Embed

    Many different pages can be embedded, but we'll start with something simple like the My Account page.

    1. Create a new page on your Wordpress website and assign it a name such as: My Account

    2. Copy and paste the code below into that the "Text" tab of the Wordpress editor (see image below). NOTE: Be sure to replace the ##### in the code with your MyOrderDesk account number which can be found in the upper right hand corner of your MyOrderDesk website after signing in. This will be common for all code pieces and you must be sure to replace the pound symbols.

    <div>
    <iframe id="mainFrame" style="border: 0px solid gray; width: 100%; height: 1200px; background-color: transparent;" src="https://www.myorderdesk.com/settings.asp?Provider_ID=######" name="mainFrame" width="300" height="150" scrolling="no"></iframe>
    </div>
    <script src="//www.myorderdesk.com/scripts/davidjbradshaw-iframe-resizer-a22ff52/js/iframeResizer.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    iFrameResize({scrolling:false, checkOrigin: false,}, '#mainFrame');
    </script>
    <script src="//www.myorderdesk.com/Scripts/MODSkinService/MODSkinService.js"></script>
    <script>//
    MODSkinService('mainFrame'); 
    </script>

     

    Edit_Page___My_Blog___WordPress_2015-12-30_18-01-01.png

     

    3. You are now ready to save the changes and view the page. If everything was done correctly above, then you should see your MyOrderDesk sign in page. IMAGE 1 at the top of this article is an example of the Sign in page. After signing in, your profile will be displayed.

     

    IMPORTANT NOTE: Email Notifications

    You must setup a page on your Wordpress site that can be used when you or your users click on email links.

    In your Wordpress website, create a new page and name it: w2p

    Paste the code below onto that page and save the page. When the MyOrderDesk techs take your site live they will setup the configuration within your MyOrderDesk website.

    <!-- DO NOT DELETE this page. It is used for all the notification links that come from MyOrderDesk -->
    <div>
    <iframe id="mainFrame" name="mainFrame" src="https://www.myorderdesk.com/settings.asp?Provider_ID=#####" scrolling="no" allowtransparency="true" style="border:0px solid gray; background-color:transparent; width:100%; height:1600px" onload="window.parent.parent.scrollTo(0,0)"></iframe>
    </div> <script src="//www.myorderdesk.com/scripts/davidjbradshaw-iframe-resizer-a22ff52/js/iframeResizer.min.js" type="text/javascript">
    </script> <script type="text/javascript">
    iFrameResize({scrolling:false, checkOrigin: false,}, '#mainFrame'); // NOTE - might be '#mainFrame'
    </script> <script src='//www.myorderdesk.com/Scripts/MODSkinService/MODSkinService.js'>
    </script> <script> MODSkinService('mainFrame');
    </script>

     

    Embedding other MyOrderDesk pages into your Wordpress website

    In the example above we demonstrated how to embed the Sign In page into your Wordpress website. 

    In the image below, you'll see that we've created links in our Wordpress menu to other MyOrderDesk pages.

    FWPMenu.png

     

    Below is a complete list of MyOrderDesk pages that can be embedded into Wordpress web pages:

    My Account

    Sign Out

    Job History

    Main Ordering Page

    A specific Job Form

    A specific Catalog

    The shopping cart page

     

    Below is the associated code pieces for the list above.

    For the My Account Page

    <div>
    <iframe id="mainFrame" name="mainFrame" src="https://www.myorderdesk.com/settings.asp?Provider_ID=#####" scrolling="no" allowtransparency="true" style="border:0px solid gray; background-color:transparent; width:100%; height:1600px" onload="window.parent.parent.scrollTo(0,0)"></iframe>
    </div>
    <script src="//www.myorderdesk.com/scripts/davidjbradshaw-iframe-resizer-a22ff52/js/iframeResizer.min.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    iFrameResize({scrolling:false, checkOrigin: false,}, '#mainFrame');
    </script>
    <script src='//www.myorderdesk.com/Scripts/MODSkinService/MODSkinService.js'>
    </script>
    <script> MODSkinService('mainFrame');
    </script>

    For the Sign out Page

    <div>
    <iframe id="mainFrame" name="mainFrame" src="https://www.myorderdesk.com/logout.asp?Provider_ID=######" scrolling="no" allowtransparency="true" style="border:0px solid gray; background-color:transparent; width:100%; height:1600px" onload="window.parent.parent.scrollTo(0,0)"></iframe>
    </div>
    <script src="//www.myorderdesk.com/scripts/davidjbradshaw-iframe-resizer-a22ff52/js/iframeResizer.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    iFrameResize({scrolling:false, checkOrigin: false,}, '#mainFrame');
    </script>
    <script src="//www.myorderdesk.com/Scripts/MODSkinService/MODSkinService.js">
    </script>
    <script>
    MODSkinService('mainFrame'); 
    </script>

    For the Main Order page

    <div>
    <iframe id="mainFrame" name="mainFrame" src="https://www.myorderdesk.com/jobsubmit.asp?Provider_ID=######&force=1" scrolling="no" allowtransparency="true" style="border:0px solid gray; background-color:transparent; width:100%; height:1600px" onload="window.parent.parent.scrollTo(0,0)" ></iframe>
    </div>
    <script src="//www.myorderdesk.com/scripts/davidjbradshaw-iframe-resizer-a22ff52/js/iframeResizer.min.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    iFrameResize({scrolling:false, checkOrigin: false,}, '#mainFrame');
    </script>
    <script src='//www.myorderdesk.com/Scripts/MODSkinService/MODSkinService.js'>
    </script>
    <script> MODSkinService('mainFrame');
    </script>

    To reference a specific Job Form (Like "Send a File" or "Request an Estimate" or "ABC Hospital Business Card)
    Be sure to replace the ******* symbols below with the Job Form ID

    <div>
    <iframe id="mainFrame" name="mainFrame" src="https://www.myorderdesk.com/jobsubmit.asp?Provider_ID=#####&OrderFormID=*******" scrolling="no" allowtransparency="true" style="border:0px solid gray; background-color:transparent; width:100%; height:1600px" onload="window.parent.parent.scrollTo(0,0)" ></iframe>
    </div>
    <script src="//www.myorderdesk.com/scripts/davidjbradshaw-iframe-resizer-a22ff52/js/iframeResizer.min.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    iFrameResize({scrolling:false, checkOrigin: false,}, '#mainFrame');
    </script>
    <script src='//www.myorderdesk.com/Scripts/MODSkinService/MODSkinService.js'>
    </script>
    <script> MODSkinService('mainFrame');
    </script>

    To reference a specific Catalog:
    Be sure to replace the #### and ****** symbols below with the Catalog ID

    <div>
    <iframe id="mainFrame" name="mainFrame" src="https://www.MyOrderDesk.com/Catalog/?Provider_ID=######&CatalogID=****" scrolling="no" allowtransparency="true" style="border:0px solid gray; background-color:transparent; width:100%; height:1600px" onload="window.parent.parent.scrollTo(0,0)" ></iframe>
    </div>
    <script src="//www.myorderdesk.com/scripts/davidjbradshaw-iframe-resizer-a22ff52/js/iframeResizer.min.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    iFrameResize({scrolling:false, checkOrigin: false,}, '#mainFrame');
    </script>
    <script src='//www.myorderdesk.com/Scripts/MODSkinService/MODSkinService.js'>
    </script>
    <script> MODSkinService('mainFrame');
    </script>

    For the Job History Page

    <div>
    <iframe id="mainFrame" name="mainFrame" src="https://www.myorderdesk.com/Jobs.asp?provider_id=######" scrolling="no" allowtransparency="true" style="border:0px solid gray; background-color:transparent; width:100%; height:1600px" onload="window.parent.parent.scrollTo(0,0)" ></iframe>
    </div>
    <script src="//www.myorderdesk.com/scripts/davidjbradshaw-iframe-resizer-a22ff52/js/iframeResizer.min.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    iFrameResize({scrolling:false, checkOrigin: false,}, '#mainFrame');
    </script>
    <script src='//www.myorderdesk.com/Scripts/MODSkinService/MODSkinService.js'>
    </script>
    <script> MODSkinService('mainFrame');
    </script>

    For the Shopping Cart Page

    <div>
    <iframe id="mainFrame" name="mainFrame" src="https://www.myorderdesk.com/carts.asp?Provider_ID=#####" scrolling="no" allowtransparency="true" style="border:0px solid gray; background-color:transparent; width:100%; height:1600px" onload="window.parent.parent.scrollTo(0,0)" ></iframe>
    </div>
    <script src="//www.myorderdesk.com/scripts/davidjbradshaw-iframe-resizer-a22ff52/js/iframeResizer.min.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    iFrameResize({scrolling:false, checkOrigin: false,}, '#mainFrame');
    </script>
    <script src='//www.myorderdesk.com/Scripts/MODSkinService/MODSkinService.js'>
    </script>
    <script> MODSkinService('mainFrame');
    </script>
     

    Additional Steps when embedding:

    1. Disable your logo (Admin Menu > Site Settings >  Logo > uncheck "Display my logo")

    2. Disable your footer (Admin Menu > Elements > uncheck "Site Footer")

    2. Turn off your MyOrderDesk navigation, as you will be using your Wordpress navigation to get to different pages. (Admin Menu > Site Settings > Elements > set menu to "Classic Tab Menu" > uncheck boxes: See image below)

    ABC_Schools_-_Display_Elements_2015-12-30_17-43-43.png

    3. Insert this code in the <head> area

    <style type="text/css">
    .FooterPolicy { display:none; }
    .FooterCopyright { display:none; }
    </style>

    For further assistance please start a support ticket my logging into your MyOrderDesk account and using the Get Help or Contact Support link found at the bottom of the page or by calling 866-770-7567.

     

    Comments

    Powered by Zendesk