Hiding a <script> on mobile

treyb

I am using widgetbot on my forum, but the icon covers up important information on mobile. Is there a way to hide this only on mobile? The script has been added into the header via admin panel.

I have tried using CSS and the below. Any ideas? I feel like I am missing something so simple.

Original:

<script src='https://cdn.jsdelivr.net/npm/@widgetbot/crate@3' async defer>
    new Crate({
        server: 'XXXXXXXXXXXXXXXXXXX', // DISCORD
        channel: 'XXXXXXXXXXXXXXX' // ⁠general
    })
 button.notify({
      content: 'Background updated',
      timeout: 1000
    })
</script>

My attempt that didn't work:

<script src='https://cdn.jsdelivr.net/npm/@widgetbot/crate@3' async defer>
function includeHTML() {
  if (mobilecheck()) {
      return;
  }
    new Crate({
        server: 'XXXXXXXXXXXXXXXXXXX', // DISCORD
        channel: 'XXXXXXXXXXXXXXX' // ⁠general
    })
 button.notify({
      content: 'Background updated',
      timeout: 1000
    })
</script>

clarkwinkelmann

treyb what's mobilecheck() ? If it doesn't exist the script will error and not load anything.

A javascript solution is better than CSS as you could skip loading the widget entirely rather than load and then hide it.

treyb

clarkwinkelmann I followed instructions I found on stackoverflow but it looks like I may have been mislead.

treyb

I figured it out. In case anyone else needs it for widgetbot.

<script>
    function isMobileDevice() {
        return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
    }
    if (!isMobileDevice()) {
        var script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/@widgetbot/crate@3';
        script.async = true;
        script.defer = true;
        document.head.appendChild(script);
        script.onload = function() {
            new Crate({
                server: 'XXXXXXXXXXXXXXXXXX', // DISCORD
                channel: 'XXXXXXXXXXXXXXXXXXXXX' // ⁠general
            });
            button.notify({
                content: 'Background updated',
                timeout: 1000
            });
        };
    }
</script>