Remove widget with SDK

[Dominik_Zborowski]

• Issue description:

Hello! We are using Elfsight widgets on our website where users can add them to own profiles. While it’s easy to display them, it’s not easy to remove them when users navigate to someone else profile that doesn’t use the widget. Since we use SPA app when user transition to different route then already injected DOM elements (Elfsight widgets) are not removed like it would happen in normally reloaded pages. We tried to use SDK ElfsightEmbedSDK.removeWidget(id) but that has some issues:

• it fire confirmation which is undesirable effect
• it doesn’t remove injected DOM elements from the page
• each injected code is different and doesn’t contain widget id so it’s not possible to simply find it within DOM elements and remove manually with one function

Do you have any recommendations how resolve this problem?

• Link to the page with the widget in question:

Universal Profile

[Max]

Welcome to the Community, @Dominik_Zborowski

I’ve passed your request to the devs! Currently, they’re out of the office, so, we’ll update you here on Monday

[Rena (Renata)]

Hey @Dominik_Zborowski, this is Renata stepping in for Max while he is on vacation

Our devs reported that using the SDK won’t help in this case. The main issue is that our widgets don’t have a built-in “destroy” method that completely removes everything the widget adds to the DOM.

What our devs would recommend is installing the widgets through an iframe. This way, all the widget content will be encapsulated within the iframe, making it easier to manage

Please let me know if this solution will work for you!

[Dominik_Zborowski]

Thanks @Rena for quick response! iframe solution seem fine for “in place” widgets, but the problem is with positioning “floating” ones. For instance spin wheel widget no longer appear at the top of the page

[Rena (Renata)]

@Dominik_Zborowski, unfortunately, iframes won’t work correctly with floating widgets, you are right. We’re truly sorry for the inconvenience, but at the moment, we don’t have an alternative to suggest other than using an iframe

Our devs suggested that you could try using a MutationObserver to remove unwanted elements when the page changes. Here’s an example script you can adapt:

const addedNodes = [];
const observer = new MutationObserver(function (mutations) {
  mutations.forEach((mutation) => {
    addedNodes.push(...Array.from(mutation.addedNodes));
  });
});
observer.observe(document.body, {
  childList: true
});

const handleRouteChange = () => {
  const elfsightAddedNodes = addedNodes.filter(
    (node) => node?.id === '__EAAPS_PORTAL' // any condition, portals for example
  );
  elfsightAddedNodes.forEach((node) => node.remove());
};

Please let me know if this explains things

[Dominik_Zborowski]

Ok thanks!