Skip to main content

WPCode Wordpress Embed

  1. Install and activate WPCode Lite
  2. Click "Code Snippets" from the Plugins > Installed Plugins page

WP Code

  1. Click "Add New", then select "HTML Snippet"

WP Code

  1. Add a title i.e. "3D Shed Builder"

  2. Paste the following code into the "Code" field:

    a. Change customer: "webshed" // Change this to your customer name. to your customer name.

    b. Adjust the --nav-bar-height: 67px; to the height of your nav bar.

    c. Breakpoints (@media screen and (max-width: 768px) {) are required for mobile/ipads if the nav bar changes size.

<style type="text/css">
#shed-root {
  /**
    * Your nav bar size.
    */
  --nav-bar-height: 67px;
  
  top: var(--nav-bar-height);
  height: calc(100vh - var(--nav-bar-height));
  position: absolute;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100vw !important;
  overflow: hidden;
  z-index: 100;
  margin: 0;
  padding: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100%;
  max-height: 100%;
}

/** 
  * Optional: if the nav bar changes size on mobile / ipad, adjust top and height to suite.
  */
@media screen and (max-width: 768px) {
  #shed-root {
  /**
    * Your nav bar size.
    */
  --nav-bar-height: 166px;
  
  top: var(--nav-bar-height);
  height: calc(100vh - var(--nav-bar-height));
  }
}
</style>

<div id="shed-root"></div>

<!-- Keep the id, required for IE -->
<script id="webshed-loader" src="https://webshed.unda.com.au/loader.js"></script>
<script>
  var app = new unda.App("shed-root", {
    customer: "webshed" // Change this to your customer name.
  });

  // Use submitted form data here or trigger conversion.
  app.addEventListener("form:submit", function(data) {
    console.info(data);
  });
</script>
  1. Click ShortCode, then Save

WP Code

  1. Copy the shortcode and paste it into the page you want to embed the builder on.

WP Code

  1. Ajust the CSS of the WPCode snippet to suite your needs.

WP Code