Assign iframe id to a custom widget

Ask the community
,
1

I want to embed a widget in an html element. The widget requires the id of the iframe passed on to it as a parameter;

mountPoint: document.getElementById(“my-superset-container”)

I understand that Wix doesnt allow direct access to the underlying html components. Is there a workaround? The widget that I want to embed is this: @superset-ui/embedded-sdk - npm

2

Why you need the html-component?
Why not directly installing the NPM-Package?

Using npm:

npm install --save @superset-ui/embedded-sdk

EXAMPLE:

import { embedDashboard } from "@superset-ui/embedded-sdk";

embedDashboard({
  id: "abc123", // given by the Superset embedding UI
  supersetDomain: "https://superset.example.com",
  mountPoint: document.getElementById("my-superset-container"), // any html element that can contain an iframe
  fetchGuestToken: () => fetchGuestTokenFromBackend(),
  dashboardUiConfig: { // dashboard UI config: hideTitle, hideTab, hideChartControls, filters.visible, filters.expanded (optional), urlParams (optional)
      hideTitle: true,
      filters: {
          expanded: true,
      },
      urlParams: {
          foo: 'value1',
          bar: 'value2',
          // ...
      }
  },
});
3

I installed the npm package already. The question is about how to get the mount point, since I getelementbyid will not work in Wix. I need to find a container inside the page that I need to pass it back to the superset API which will then load the widget in the container.

4

In your case, it is a little bit more tricky (complex).

  1. Yes indeed you can’t get → mountPoint ← just like all the other values, since you can not use the → document.getElementByID() - command.

  2. Also not sure if you can get the id of the iFrame itself.

But there are still possibilities…

  1. You could use a CUSTOM-ELEMENT instead, where you can clearly define the ID/NAME of the custom element…

  2. Or you still use the HTML-Component and try to figure out the ID of the iframe —> searching in the Dashboard → Custom-Code-Settings for the iFrame ID of the HTML-Component.

  3. Last option could be to push all information/data you got to the HTML.Comp itself, but since i do not know the counter-part-code you have for the HTML-EMBEDDING, it is a bit difficult for me to provide you more assumtions.

1 Like