Include main.css, bundle.js and the assets/ folder in your html file. Create HTML container element to append the header.
<header> <div id="mindsphere-header"></div> </header>
<header> <div id="mindsphere-header"></div> <div class="mindsphere-subnavigation"> <div class="mindsphere-subnavigation-container"> <nav class=""> <div class=""> <a href="">Sub Nav Item</a> <a href="">Sub Nav Item</a> <a href="">Sub Nav Item</a> <a href="">Sub Nav Item</a> <a href="">Sub Nav Item</a> </div> </nav> </div> </div> </header>
var structure = { "navItems": [ { "href": "/content/mindsphere/en/how-it-works.html", "target": "_self", "text": "How It Works" }, { "href": "/content/mindsphere/en/live-demo.html", "target": "_self", "text": "Demo" }, { "href": "/content/mindsphere/en/partner.html", "target": "_self", "text": "Partner Portal" }, { "href": "https://www.mindsphere.io/developer", "target": "_blank", "text": "Developer" }, { "href": "https://siemens.mindsphere.io/access", "text": "Request Access" } ] }; var header = new MindsphereHeader(document.getElementById('mindsphere-header')); header.render(structure);
<footer id="mindsphere-footer"></footer>
var structure = { "signupTeaser": { "headline": "Request Access", "subHeadline": "Become part of the MindSphere community and help shape the fourth industrial revolution.", "signupButton": { "text": "Sign Up", "href": "https://siemens.mindsphere.io/access" } }, "learnMore": { "shareLinks": [ { "icon": "twitter", "href": "http://sie.ag/MindSphereIO-twitter" }, { "icon": "linkedin", "href": "http://sie.ag/MindSphereIO-linkedin" }, { "icon": "facebook", "href": "http://sie.ag/MindSphereIO-facebook" }, { "icon": "youtube", "href": "http://sie.ag/MindSphereIO-youtube" } ], "metaLinks": [ { "text": "Careers", "href": "https://www.siemens.de/jobs/mindsphere-en/Seiten/MindSphere.aspx?sitc=wwdfi10013" }, { "text": "Community", "href": "https://community.plm.automation.siemens.com/t5/MindSphere/ct-p/MindSphere?sitc=wwdfi10013" }, { "text": "Mindapps", "href": "https://www.plm.automation.siemens.com/store/en-de/mindsphere/apps/index.html?sitc=wwdfi10013" }, { "text": "Mindsphere Store", "href": "https://www.plm.automation.siemens.com/store/en-de/mindsphere/index.html?sitc=wwdfi10013" }, { "text": "Terms", "href": "https://siemens.mindsphere.io/terms" }, { "text": "Documentation", "href": "http://www.mindsphere.io/docs" } ] }, "legal": { "copyright": "Siemens MindSphere © Siemens AG, 1996 – 2017", "links": [ { "text": "Privacy Policy", "href": "https://siemens.mindsphere.io/legal-info#privacy-policy" }, { "text": "Cookie Policy", "href": "https://siemens.mindsphere.io/legal-info#cookie-policy" }, { "text": "Terms of Use", "href": "https://siemens.mindsphere.io/legal-info#terms-of-use" }, { "text": "Imprint", "href": "https://www.siemens.com/corp/en/index/corporate_info.htm?sitc=wwdfi10013" } ] } }; var footer = new MindsphereFooter(document.getElementById('mindsphere-footer')); footer.render(structure);
const header = new MindsphereHeader(document.getElementById('mindsphere-header')); header.loadJsonData('http://staging.mindsphere-staging.io/api/header.json'); const footer = new MindsphereFooter(document.getElementById('mindsphere-footer')); footer.loadJsonData('http://staging.mindsphere-staging.io/api/footer.json');