Helpshift Web Widget / Code Below <body>

I’m using the Helpshift Web Widget on my webflow site (gamecake.webflow.io). It works great on web, but it doesn’t seem to work so well on mobile. Specifically, the entire widget opens up on it’s own for a second or two on page load.

Part of the problem might be that Helpshift’s documentation says the web widget code should be inserted AFTER the body tag, but Webflow doesn’t give me that option.

Is there a way to insert code after the body tag? That’s probably a good place to start.

For Webflow, most custom code should go before the closing body tag.

Understood. Unfortunately the Helpshift code is designed to go after the body tag, which creates some glitchy incompatibilities. Is there a trick that can be used to insert the Helpshift code where it was intended to go?

Alternatively, is there a modification that can be made to the Helpshift code that allows it function properly when placed before the closing body tag?

Here’s the code:

<script>
  (function (d) {
var s = d.createElement("script");
s.setAttribute("src", "//s.helpshift.com/static/build/external/hsftWebSdk.js");
s.addEventListener ("load", function () {
  hsft.init ({
    url: "gamecake.helpshift.com/",
    config: {
      contact: false,
      platform: "all", language: "en",
      /* Customize the below fields as required */
      direction: "right", // direction where the help button is placed bottom-left/ bottom-right
      buttonColor: "#3AB54A", // color of the help button
      buttonIconColor: "#FFFFFF" // color of icon on the help button
    }
  });
});
d.head.appendChild (s);
  }(document));
</script>

Code looks fine to be placed in the recommended location.

Unfortunately not.

Please contact developer of said script.

Helpshift is looking into the issue. I’ll keep this thread updated.

So far, this is what I’ve gotten from Helpshift. Doesn’t look like it’s related to Webflow.

We have an update from our team on this. This is a known Safari iOS (mobile) browser issue. We don’t have a workaround for this just yet, but we’re working on it and will get back to you as soon as we do.

In the meantime, if you are interested, you can refer to the following links to explain the root cause of this issue:
css - Prevent flicker on webkit-transition of webkit-transform - Stack Overflow
iPhone WebKit CSS animations cause flicker - Stack Overflow

The two linked Stack Overflow questions seem to be CSS issues, not JavaScript. I do not see how they are related to your original question.

According to HelpShift, it’s not a JS issue. Originally, I thought the bug might be because I wasn’t able to place the HelpShift widget code in the Webflow recommended spot, but it doesn’t seem as though that is the case. My last post was a direct copy+paste from what Helpshift Support sent me. They diagnosed the problem as a CSS issue, not what I had originally guessed it might be.

Alright, try pasting this in the footer code of your site and republish:

<script>
$.getScript('//s.helpshift.com/static/build/external/hsftWebSdk.js', function() {
  hsft.init ({
    url: "gamecake.helpshift.com/",
    config: {
      contact: false,
      platform: "all", language: "en",
      /* Customize the below fields as required */
      direction: "right", // direction where the help button is placed bottom-left/ bottom-right
      buttonColor: "#3AB54A", // color of the help button
      buttonIconColor: "#FFFFFF" // color of icon on the help button
    }
  });
});
</script>

Demo: Edit fiddle - JSFiddle - Code Playground

Same issue. I just published it, check out www.gamecakestudios.com on your mobile device (iPhone, specifically). The HelpShift widget appears to glitch out for a second before going away.

I noticed your jsfiddle demo does not exhibit this behavior on my phone, but it’s also not really using a mobile layout or anything.