Home App Docs Blog Github

Why is my custom code with script tags not loading on my Builder pages?

If you are adding custom code via the custom code block to builder entries, and that code runs javascript that modifies the page to show more content, you might not see the content show up in the Builder preview. This sort of thing can happen for lots of different reasons, including needing server rendered content, or if the script modifies DOM nodes and should only be run client side.

The first thing you should do is to click on show advanced under the options for the custom code block you are working with:

Once the advanced options are shown, you will see the following options:

Try toggling replace nodes on and off, as well as scripts client only. Make sure to try the preview after each change to see if anything changes.

If modifying the advanced options on the custom code block does not help, you can try the following. Sometimes those script tags that third party services provide to you to embed content on your page might be using DOM load events to run the code to modify the page. Since the preview in Builder is done via client side JavaScript, the event is called before your custom code is even added to the page, so then your custom code never runs.

For example, if your code is using the DOMContentLoaded event, you will need to change the code so that any init logic will be run immediately, and not just when the DOMContentLoaded event is fired. So in terms of code, you would need to change something that looks like this:

<div id="fs-ambassadors"></div>
<script src="https://foursixty.com/media/scripts/fs.combined.v2.6.js"></script>
<script src="https://foursixty.com/media/scripts/ambassadors.v2.6.js"></script>
<script>
    window.addEventListener("DOMContentLoaded", function() {
       Foursixty.initAmbassadorEmbed(document.getElementById("fs-ambassadors"));
    });
</script>

to something that looks like this (notice how the addition of the if statement ensures the Foursixty method is called immediately if the Foursixty variable is available)

<div id="fs-ambassadors"></div>
<script src="https://foursixty.com/media/scripts/fs.combined.v2.6.js"></script>
<script src="https://foursixty.com/media/scripts/ambassadors.v2.6.js"></script>
<script>
  var initFoursixtyAmbassador = function() {
      Foursixty.initAmbassadorEmbed(document.getElementById("fs-ambassadors"))
  };

  if (Foursixty) {
      initFoursixtyAmbassador();
  } else {
      window.addEventListener("DOMContentLoaded", initFoursixtyAmbassador);
  }
</script>