Intégrer votre menu Menutech sur votre site web
Intégration iframe
Collez le code HTML suivant n'importe où sur votre site web, à l'endroit où vous souhaitez que votre iframe s'affiche :
<iframe src="ENTER YOUR MENU URL HERE" frameborder="0" style="overflow:hidden;width:100%;display:block;" height="100%" width="100%"></iframe>
✏️ Veillez à remplacer ENTER YOUR MENU URL HERE par l'URL de votre menu numérique Menutech.
Activation des fonctionnalités avancées :
Pour vous assurer que l'iframe ait exactement la hauteur de son contenu, et pour prendre en charge des fonctionnalités plus avancées (définir l'iframe à la hauteur complète pour éviter le défilement, prendre en charge les dialogues d'images), collez ce code n'importe où sur votre site web, ou directement après l'élément 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>
Intégration basée sur l'API
Une intégration basée sur l'API se trouve directement dans votre site web et peut être davantage stylisée par votre webmaster. Placez le code suivant n'importe où sur votre site web, à l'endroit où vous souhaitez que le menu s'affiche :
<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 => {
document.getElementById('menutech-container').innerHTML = data;
})
.catch((error) => {
console.error('Error:', error);
});
});
</script>
✏️ Veillez à remplacer ENTER YOUR MENU URL HERE par l'URL de votre menu numérique Menutech.
ℹ️ Pour charger le menu immédiatement, ajoutez l'élément <script>...</script> dans l'en-tête de votre HTML.
⚠️ L'intégration basée sur l'API n'inclut pas l'en-tête et le pied de page repliable.
Intégration isolée
Pour isoler le code incorporé et éviter tout débordement de styles et de scripts, le menu peut être incorporé dans un "Shadow DOM", qui est pris en charge par tous les navigateurs modernes (environ >95% des utilisateurs couverts).
<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>
✏️ Veillez à remplacer ENTER YOUR MENU URL HERE par l'URL de votre menu numérique Menutech.
ℹ️ Pour charger le menu immédiatement, ajoutez l'élément <script>...</script> dans l'en-tête de votre HTML.
⚠️ L'intégration basée sur l'API n'inclut pas l'en-tête et le pied de page repliable.
Ajouter une animation de chargement
Pour ajouter une animation de chargement à une intégration basée sur l'API, pendant que le contenu est en cours de récupération, remplacez votre élément <div id="menutech-container"></div> par le suivant :
<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>
Intégrations basées sur l'API avec images agrandissables
Si vous activez l'affichage des images dans les dialogues, vous devez étendre le code ci-dessus comme suit :
Intégration 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>
Intégration isolée :
<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>
Intégration basée sur l'API
Une intégration basée sur l'API se trouve directement dans votre site web et peut être davantage stylisée par votre webmaster. Placez le code suivant n'importe où sur votre site web, à l'endroit où vous souhaitez que le menu s'affiche :
<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 => {
document.getElementById('menutech-container').innerHTML = data;
})
.catch((error) => {
console.error('Error:', error);
});
});
</script>
✏️ Veillez à remplacer ENTER YOUR MENU URL HERE par l'URL de votre menu numérique Menutech.
ℹ️ Pour charger le menu immédiatement, ajoutez l'élément <script>...</script> dans l'en-tête de votre HTML.
⚠️ L'intégration basée sur l'API n'inclut pas l'en-tête et le pied de page repliable.
Intégration isolée
Pour isoler le code incorporé et éviter tout débordement de styles et de scripts, le menu peut être incorporé dans un "Shadow DOM", qui est pris en charge par tous les navigateurs modernes (environ >95% des utilisateurs couverts).
<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>
✏️ Veillez à remplacer ENTER YOUR MENU URL HERE par l'URL de votre menu numérique Menutech.
ℹ️ Pour charger le menu immédiatement, ajoutez l'élément <script>...</script> dans l'en-tête de votre HTML.
⚠️ L'intégration basée sur l'API n'inclut pas l'en-tête et le pied de page repliable.
Ajouter une animation de chargement
Pour ajouter une animation de chargement à une intégration basée sur l'API, pendant que le contenu est en cours de récupération, remplacez votre élément <div id="menutech-container"></div> par le suivant :
<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>
Intégrations basées sur l'API avec images agrandissables
Si vous activez l'affichage des images dans les dialogues, vous devez étendre le code ci-dessus comme suit :
Intégration 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>
Intégration isolée :
<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>