Install widgets on the host site

Installation-aware widgets, public APIs and embeddable product experiences for Disposable Discounter.

Search widget flow

Paste the bundle and mount the autocomplete host

The search widget behaves like the storefront autocomplete: product suggestions appear while visitors type, product rows show the shopper-facing details and result handoff stays inside the configured flow.

Open hosted search widget test page
Chatbot widget flow

Paste one GTM-ready snippet for the floating launcher

The chatbot embed works as a single script block for Google Tag Manager or raw HTML. It creates the floating launcher, opens only when needed and keeps the assistant isolated from the host page.

Open hosted chatbot widget HTML test page
Search widget

Use the search bundle for catalogue discovery. It auto-mounts from the host element attributes, validates the origin, renders inside Shadow DOM, and keeps paginating suggestions while the user scrolls.

<div
  data-didi-search-widget
  data-api-base-url="https://public.disposablediscounter.com"
  data-publishable-key="pk_didi_live_6a44a70629e2befdc49723e9"
  data-locale="nl"
  data-placeholder="Zoek producten, SKU of materiaal"
  data-initial-query="nitril handschoenen"
  data-limit="8"
></div>
<script defer src="https://public.disposablediscounter.com/widgets/search.js"></script>
Chatbot widget

Use the chatbot bundle for the floating launcher and panel. Paste the snippet as a single Custom HTML tag in GTM or directly into the site, and the widget will create its own floating mount point. The assistant stays isolated inside an iframe and communicates with the host only through explicit bridge actions.

<script>
  (function () {
    var config = {
      publishableKey: 'pk_didi_live_6a44a70629e2befdc49723e9',
      locale: 'nl'
    };
    var hasMounted = false;

    function mount() {
      if (hasMounted) {
        return true;
      }

      if (!window.DidiChatbotWidget) {
        return false;
      }

      window.DidiChatbotWidget.mount(config);
      hasMounted = true;
      return true;
    }

    if (mount()) {
      return;
    }

    var existingScript = document.querySelector('script[data-didi-chatbot-widget-script]');
    if (!existingScript) {
      existingScript = document.createElement('script');
      existingScript.src = 'https://public.disposablediscounter.com/widgets/chatbot.js';
      existingScript.defer = true;
      existingScript.setAttribute('data-didi-chatbot-widget-script', 'true');
      (document.head || document.body || document.documentElement).appendChild(existingScript);
    }

    existingScript.addEventListener('load', mount, { once: true });

    var retries = 0;
    var interval = window.setInterval(function () {
      retries += 1;
      if (mount() || retries > 40) {
        window.clearInterval(interval);
      }
    }, 250);
  })();
</script>