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>
​Example Code

Example Code
