Embed / Iframe MyOrderDesk into your website Follow

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

Embed or IFrame a MyOrderDesk website.

In the screenshot, the area below the "Catalog" text is a MyOrderDesk website that has been customized and simplified to make it look as if it belongs to The Print Shop WordPress website. To the untrained eye, it's virtually impossible to tell that the MyOrderDesk website is embedded.

mceclip1.png

How to Embed - WordPress

There are two methods that can be used for embedding MyOrderDesk, one for WordPress, and the other for any other situation.

To embed MyOrderDesk into your WordPress website, we recommend that you use the MyOrderDesk plugin in the WordPress plugin directory. You can find it here: https://wordpress.org/plugins/myorderdesk/

Navigate to your WordPress administration page, then navigate to Plugins > Add New. From there, search for "MyOrderDesk", then install and activate the plugin. From there, click the "MyOrderDesk" tab in the administration menu.

To configure your plugin you need your:

  1. MyOrderDesk Provider ID
  2. Site Hosted address
  3. WordPress configured landing page.

To find your Provider ID, log into your MyOrderDesk website with an administrator account. Open the administration menu by clicking the three horizontal lines in the top left corner of the screen. You will see a dropdown menu that says “[#####] Your Company Name” The numbers inside of the square brackets will be your Provider ID.

Your Hosted Address can be found from the administration menu by visiting SIte Settings > Home Page & Domain. This should in most cases always be a custom domain. If you have no custom domains setup you can learn more about that in this article covering Custom Domains

Your Landing Page is the WordPress page that contains a shortcode for MyOrderDesk that handles incoming link requests. Typically this will be /w2p. This page should not be nested (/not/like/this).

Once you successfully enter your information, the page layout should change and you should see a list of shortcodes that can be used to display specific pages based on that Provider ID.

How to Embed - Iframe Code

If you are unable to use the plugin you can just use iframes, we have provided the code below for this situation. If you are using the plugin ignore all the steps below!

Setting up the Header

This code must be included in the header of the website on every page.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/2.4.8/iframeResizer.min.js"></script>
<script type="text/javascript" src="//www.myorderdesk.com/scripts/MODSkinService/MODSkinService.js"></script>
<script type="text/javascript"> document.addEventListener('DOMContentLoaded', async () => {iFrameResize({scrolling:false, checkOrigin:false}, "#mainFrame");});addEventListener("load", function(){ MODSkinService("mainFrame", null, "[landing_page]", "[custom_domain]"); }); </script>

[landing_page] is the page you want to use for notification URLs. This page is set up in some of the next steps and we recommend using /w2p.
[custom_domain] is the domain that is being framed. This will be your default custom domain found from your MyOrderDesk website under Home Page & Domains. If you have no custom domains setup you can learn more about that in this article covering Custom Domains

Once that is in place you must set up a page on your site that can be used when you or your users click on email links. On your website, create a new page and name it w2p.

The direct URL to this webpage should resemble the following: http://www.example.com/w2p

<div>
    <iframe id="mainFrame" name="mainFrame" src="//[custom_domain]/Settings.asp?Provider_ID=####" sandbox="allow-storage-access-by-user-activation allow-forms allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-modals allow-downloads allow-top-navigation" scrolling="no" allowtransparency="true" allow="fullscreen" style="border: 0px solid gray; background-color: transparent; width: 100%; height: 590px; overflow: hidden;" onload="window.parent.parent.scrollTo(0,0)"></iframe>
</div>
  1. [custom_domain] is the domain that is being framed in. This will be your default custom domain found from your MyOrderDesk website under Home Page & Domains.
  2. Provider_ID=#### will be your Provider ID. To find your Provider ID, log into your MyOrderDesk website with an administrator account. Open the administration menu by clicking the three horizontal lines in the top left corner of the screen. You will see a dropdown menu that says “[#####] Your Company Name” The numbers inside of the square brackets will be your Provider ID.

Setting up the additional pages

There is typically a minimum of 7 additional pages listed below that we will be setting up. If you want to link to additional pages like specific catalogs or order forms you can do so by making more pages and including those as well. Below is code you can edit and reuse for all of these pages as well as an example of a specific order forms Iframe code. Below are the URLs to replace in the following code for each page.

  1. My Account [/Settings.asp]
  2. Sign Out [/SignOut/]
  3. Job History [/Jobs.asp]
  4. Main Ordering Page [/JobSubmit.asp]
  5. A specific Order Form [/FormV2.asp?OrderFormID=####&]
    1. The Order Form ID can be found from Add/Edit Order Forms from the search bar or the URL.
  6. A specific Catalog [/catalog/?CatalogID=####&]
    1. The Catalog ID can be found in your URL when viewing or editing a catalog.
  7. The shopping cart page [/Carts.asp]
<div>
    <iframe id="mainFrame" name="mainFrame" src="//[custom_domain][page_url]?Provider_ID=####"  sandbox="allow-storage-access-by-user-activation allow-forms allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-modals allow-downloads allow-top-navigation" scrolling="no" allowtransparency="true" allow="fullscreen" style="border: 0px solid gray; background-color: transparent; width: 100%; height: 590px; overflow: hidden;" onload="window.parent.parent.scrollTo(0,0)"></iframe>
</div>

NOTE: Be sure to replace the [custom_domain], [page_url], and Provider_ID=#### with the information you have already collected for all of the following pages.

EXAMPLE:mceclip0.png

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")
  3. Turn off your MyOrderDesk navigation if you will be using your website's 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

  4.  In Myorderdesk Insert this code in the <head> area under Site Settings > SEO/CODE > Code 
    <style type="text/css">
    .FooterPolicy { display:none; }
    .FooterCopyright { display:none; }
    </style>

Related articles

Powered by Zendesk