Integra il tuo menù scritto su Menutech nel tuo sito web
Integrazione Iframe
Incolla il seguente codice HTML in qualsiasi punto del tuo sito web, dove desideri che l'iframe venga visualizzato:
<iframe src="ENTER YOUR MENU URL HERE" frameborder="0" style="overflow:hidden;width:100%;display:block;" height="100%" width="100%"></iframe>
✏️ Assicurati di sostituire ENTER YOUR MENU URL HERE con l'URL del tuo menù digitale Menutech.
Abilitare funzionalità avanzate:
Per assicurarti che l'iframe abbia esattamente l'altezza del suo contenuto e per supportare funzionalità più avanzate (impostare l'iframe all'altezza completa per evitare lo scorrimento, supportare finestre di dialogo per immagini), incolla questo codice in qualsiasi punto del tuo sito web, o direttamente dopo l'elemento iframe:
<script>
window.addEventListener(
"message",
function (event) {
if (event.data[0] === "setIframeHeight") {
var iframe = document.getElementsByTagName("iframe")[0];
iframe.height = event.data[1] + 1 + "px";
iframe.style.height = event.data[1] + 1 + "px";
} else if (event.data[0] == "requestHeightPosition") {
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var iframe = document.getElementsByTagName("iframe")[0];
iframe.contentWindow.postMessage(["setParentHeight", height - 100], "*");
var scrollPosition = window.scrollY || document.documentElement.scrollTop;
iframe.contentWindow.postMessage(["setScrollPosition", scrollPosition], "*");
}
},
false
);
window.onload = function () {
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var iframe = document.getElementsByTagName("iframe")[0];
iframe.contentWindow.postMessage(["setParentHeight", height - 100], "*");
var scrollPosition = window.scrollY || document.documentElement.scrollTop;
iframe.contentWindow.postMessage(["setScrollPosition", scrollPosition], "*");
};
window.onresize = function () {
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var iframe = document.getElementsByTagName("iframe")[0];
iframe.contentWindow.postMessage(["setParentHeight", height - 100], "*");
};
window.onscroll = function () {
var scrollPosition = window.scrollY || document.documentElement.scrollTop;
var iframe = document.getElementsByTagName("iframe")[0];
iframe.contentWindow.postMessage(["setScrollPosition", scrollPosition], "*");
};
</script>
Integrazione basata su API
Un'integrazione basata su API si inserisce direttamente nel tuo sito web e può essere ulteriormente stilizzata dal tuo webmaster. Inserisci il seguente codice in qualsiasi punto del tuo sito web dove vorresti che il menù venga visualizzato:
<div id="menutech-container"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
let container = document.getElementById('menutech-container');
let shadow = container.attachShadow({mode: 'open'});
let url = 'ENTER YOUR MENU URL HERE';
fetch(url + '&embed=true')
.then(response => response.text())
.then(data => {
let wrapper = document.createElement('div');
wrapper.innerHTML = data;
while (wrapper.firstChild) {
shadow.appendChild(wrapper.firstChild);
}
})
.catch((error) => {
console.error('Error:', error);
});
});
</script>
✏️ Assicurati di sostituire ENTER YOUR MENU URL HERE con l'URL del tuo menù digitale Menutech.
ℹ Per caricare il menù immediatamente, aggiungi l'elemento <script>...</script> nell'intestazione HTML.
⚠️ L'integrazione basata su API non include l'intestazione e il piè di pagina richiudibile.
Integrazione isolata
Per isolare il codice incorporato e prevenire qualsiasi trasferimento di stili e script, il menù può essere incorporato in un "Shadow DOM", che è supportato da tutti i browser moderni (circa >95% degli utenti coperti).
<div id="menutech-container"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
let mtUrl = 'ENTER YOUR MENU URL HERE';
fetch(mtUrl + '&embed=true')
.then(response => response.text())
.then(data => {
let container = document.getElementById('menutech-container');
let shadow = container.attachShadow({mode: 'open'});
let wrapper = document.createElement('div');
wrapper.innerHTML = data;
while (wrapper.firstChild) {
shadow.appendChild(wrapper.firstChild);
}
})
.catch((error) => {
console.error('Error:', error);
});
});
</script>
✏️ Assicurati di sostituire ENTER YOUR MENU URL HERE con l'URL del tuo menù digitale Menutech.
ℹ Per caricare il menù immediatamente, aggiungi l'elemento <script>...</script> nell'intestazione HTML.
⚠️ L'integrazione basata su API non include l'intestazione e il piè di pagina richiudibile.
Aggiungere un'animazione di caricamento
Per aggiungere un'animazione di caricamento a un'integrazione basata su API, mentre il contenuto viene recuperato, sostituisci il tuo elemento <div id="menutech-container"></div> con quanto segue:
<div id="menutech-container">
<style>
.skeleton-screen {
background-color: #fff;
max-width: 996px;
margin: 0 auto;
padding: 30px;
}
.skeleton-screen .skeleton-item * {
border-radius: 5px;
overflow: hidden;
}
.skeleton-screen .skeleton-title {
height: 50px;
width: 50%;
margin-bottom: 20px;
}
.skeleton-screen .skeleton-subtitle {
height: 30px;
width: 20%;
margin-bottom: 60px;
}
.skeleton-screen .skeleton-title,
.skeleton-screen .skeleton-subtitle,
.skeleton-screen .skeleton-name,
.skeleton-screen .skeleton-description {
height: 20px;
}
.skeleton-screen .skeleton-name {
flex-grow: 1;
}
.skeleton-screen .skeleton-description {
flex-grow: 0;
flex-basis: 120px;
}
.skeleton-screen .skeleton-item:not(.pagetop) {
width: 100%;
margin: 30px 0;
display: flex;
gap: 30%;
}
.skeleton-screen > .skeleton-item:nth-child(3) {
gap: 40%;
}
.skeleton-screen > .skeleton-item:nth-child(4) {
gap: 20%;
}
.skeleton-screen > .skeleton-item:nth-child(5) {
gap: 50%;
}
@keyframes shimmer {
0% {
background-position: -200px 0;
}
100% {
background-position: 400px 0;
}
}
.skeleton-screen .skeleton-item * {
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: shimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(
to right,
#eeeeee 8%,
#dddddd 18%,
#eeeeee 33%
);
background-size: 800px 104px;
position: relative;
}
</style>
<div class="skeleton-screen">
<div class="skeleton-item pagetop">
<div class="skeleton-title"></div>
</div>
<div class="skeleton-item pagetop">
<div class="skeleton-subtitle"></div>
</div>
<div class="skeleton-item">
<div class="skeleton-name"></div>
<div class="skeleton-description"></div>
</div>
<div class="skeleton-item">
<div class="skeleton-name"></div>
<div class="skeleton-description"></div>
</div>
<div class="skeleton-item">
<div class="skeleton-name"></div>
<div class="skeleton-description"></div>
</div>
<div class="skeleton-item">
<div class="skeleton-name"></div>
<div class="skeleton-description"></div>
</div>
</div>
</div>
Integrazioni basate su API con immagini ingrandibili
Se abiliti la visualizzazione di immagini in finestre di dialogo, devi estendere il codice sopra come segue:
Integrazione standard:
<div id="menutech-container"></div>
<script>
let mtUrl = "ENTER YOUR MENU URL HERE";
document.addEventListener("DOMContentLoaded", function () {
fetch(mtUrl + "&embed=true")
.then((response) => response.text())
.then((data) => {
let parser = new DOMParser();
let doc = parser.parseFromString(data, "text/html");
let container = document.getElementById("menutech-container");
let shadowRoot = container.attachShadow({ mode: "open" });
let externalScripts = [];
let inlineScripts = [];
Array.from(doc.getElementsByTagName("script")).forEach((oldScript) => {
let scriptTag = document.createElement("script");
if (oldScript.src) {
scriptTag.src = oldScript.src;
externalScripts.push(scriptTag);
} else {
scriptTag.textContent = oldScript.textContent;
inlineScripts.push(scriptTag);
}
});
Array.from(doc.body.childNodes).forEach((node) => {
if (node.nodeName !== "SCRIPT") {
shadowRoot.appendChild(node.cloneNode(true));
}
});
let scriptLoadPromises = externalScripts.map((script) => {
return new Promise((resolve, reject) => {
script.onload = resolve;
script.onerror = reject;
shadowRoot.appendChild(script);
});
});
Promise.all(scriptLoadPromises)
.then(() => {
inlineScripts.forEach((script) => {
shadowRoot.appendChild(script);
});
})
.catch((error) => {
console.error("Error loading scripts:", error);
});
})
.catch((error) => {
console.error("Error:", error);
});
});
</script>
Integrazione isolata:
<div id="menutech-container"></div>
<script>
let mtUrl = "ENTER YOUR MENU URL HERE";
document.addEventListener("DOMContentLoaded", function () {
fetch(mtUrl + "&embed=true")
.then((response) => response.text())
.then((data) => {
let parser = new DOMParser();
let doc = parser.parseFromString(data, "text/html");
let container = document.getElementById("menutech-container");
let shadowRoot = container.attachShadow({ mode: "open" });
let externalScripts = [];
let inlineScripts = [];
Array.from(doc.getElementsByTagName("script")).forEach((oldScript) => {
let scriptTag = document.createElement("script");
if (oldScript.src) {
scriptTag.src = oldScript.src;
externalScripts.push(scriptTag);
} else {
scriptTag.textContent = oldScript.textContent;
inlineScripts.push(scriptTag);
}
});
Array.from(doc.body.childNodes).forEach((node) => {
if (node.nodeName !== "SCRIPT") {
shadowRoot.appendChild(node.cloneNode(true));
}
});
let scriptLoadPromises = externalScripts.map((script) => {
return new Promise((resolve, reject) => {
script.onload = resolve;
script.onerror = reject;
shadowRoot.appendChild(script);
});
});
Promise.all(scriptLoadPromises)
.then(() => {
inlineScripts.forEach((script) => {
shadowRoot.appendChild(script);
});
})
.catch((error) => {
console.error("Error loading scripts:", error);
});
})
.catch((error) => {
console.error("Error:", error);
});
});
</script>