Example Code
<!DOCTYPE html>
<html>
<head>
<script>
let charts = [];
let availableChartTemplates = [];
const messageListener = (e) => {
// Check origin of message before reading
if (e.origin != "https://app.explo.co") return;
switch (e.data.event) {
case "dashboardReadyToLoad":
// Resize IFrame so no there's no scrollbar inside of it
document.getElementById("exploIframe").style.height =
e.data.detail.dashboardHeight + "px";
break;
case "dashboardUpdated":
// Resize IFrame so no there's no scrollbar inside of it
document.getElementById("exploIframe").style.height =
e.data.detail.dashboardHeight + "px";
break;
case "editableSectionUpdated":
charts = [...e.data.detail.charts];
availableChartTemplates = [
...e.data.detail.availableChartTemplates,
];
console.log(charts, availableChartTemplates);
break;
case "editableSectionChartAdded":
console.log(e.data.event, e.data.detail);
break;
case "editableSectionChartRemoved":
console.log(e.data.event, e.data.detail);
break;
default:
console.log(e.data.event, e.data.detail);
}
};
// Change chartTemplateId to one of the ones in availableChartTemplates
function handleAdd() {
if (!availableChartTemplates.length) return;
const exploIframe = document.getElementById("exploIframe");
exploIframe.contentWindow.postMessage(
{
event: "addEditableSectionChart",
detail: { chartTemplateId: availableChartTemplates[0].id },
},
"*"
);
}
// Change chartId to one of the ones in charts
function handleDelete() {
console.log(charts.length);
if (!charts.length) return;
const exploIframe = document.getElementById("exploIframe");
exploIframe.contentWindow.postMessage(
{
event: "removeEditableSectionChart",
detail: {
chartId: charts[0].id,
},
},
"*"
);
}
window.addEventListener("message", messageListener);
window.addEventListener("DOMContentLoaded", () => {
document.getElementById("addBtn").addEventListener("click", () => {
handleAdd();
});
document.getElementById("deleteBtn").addEventListener("click", () => {
handleDelete();
});
});
</script>
</head>
<body>
<iframe
id="exploIframe"
src="REPLACE_WITH_YOUR_EMBED_IFRAME_URL"
style="width: 100%; border: none; height: 300px"
>
</iframe>
<button id="addBtn">Add First Chart Template</button>
<button id="deleteBtn">Delete First Chart</button>
</body>
</html>