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>