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>

If you try the above steps and our script does not load, you might need to separate the pieces of your custom code and put them in separate custom code blocks within Builder. A lot of code snippets to embed things have both a script tag and an element. For example, this is what Klarna embed code looks like:

<script type="text/javascript" src="https://osm.klarnaservices.com/lib.js" data-environment="production" data-client-id="some-id"></script>
<div>
  <klarna-placement data-key="some-key" data-locale="en-US" data-theme="dark"></klarna-placement>
</div>

In order to make it work in builder, you need to take the script element and put it in it’s own custom code block (with replace nodes set to true under the advanced settings for the custom code block):

<script type="text/javascript" src="https://osm.klarnaservices.com/lib.js" data-environment="production" data-client-id="some-id"></script>

Then, take the div block and put it in a different custom code block with the advanced setting scripts client only set to true:

<div>
  <klarna-placement data-key="some-key" data-locale="en-US" data-theme="dark"></klarna-placement>
</div>
2 Likes

Hey Korey,
I tried everything you mentioned and none of it works, I am just trying to add a custom vertical tabs section using HTML and there is a JS script involved, it works fine locally on my code editor but not working on my staging environment. Please Help.

Page Link: https://8i2w0p1q.channelprogram.com/test-new-home-jefin

<!DOCTYPE html>
<html>

<head>
    <style>
        .tab {
            display: block;
            margin: 15px 0px;
            border: none;
            width: 525px;
            line-height: 40px;
            text-align: left;
            vertical-align: middle;
            cursor: pointer;
            font-size: 16px;
            padding: 10px 0 10px 15px;
        }
        
        .tab.active {
            color: #fff;
            font-weight: bold;
            border-left: 2px solid #73B0F9;
        }
        
        .tab-content {
            display: none;
            padding: 10px;
            border-top: none;
            font-size: 16px;
        }
        
        .tabs {
            display: flex;
            flex-direction: row;
        }
        
        .tab-section {
            display: flex;
            flex-direction: column;
            flex-basis: 20%;
        }
        
        .content-section {
            flex-basis: 10%;
            padding-left: 0px;
        }
        
        .active .tab-content-button {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: 18px;
            line-height: 120%;
            letter-spacing: 0.5px;
            background: linear-gradient(98.6deg, #F48D42 13.14%, #FF6120 52.3%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
            opacity: 1;
            text-align: left;
            padding: 10px 0;
            border-bottom: 1px solid #F48D42;
        }
        
        .tab-content-button {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: 18px;
            line-height: 120%;
            letter-spacing: 0.5px;
            background: linear-gradient(98.6deg, #F48D42 13.14%, #FF6120 52.3%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
            opacity: 0;
            padding: 10px 0;
            border-bottom: 1px solid #F48D42;
        }
        
        .tab-content-para {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: 18px;
            line-height: 160%;
            letter-spacing: 0.5px;
            padding: 15px 0;
            color: transparent;
        }
        
        .active .tab-content-head {
            font-family: 'Roc-Grotesk';
            font-style: normal;
            font-weight: 400;
            font-size: 56px;
            line-height: 120%;
            color: #FFFFFF;
            opacity: 1;
        }
        
        .tab-content-head {
            font-family: 'Roc-Grotesk';
            font-style: normal;
            font-weight: 400;
            font-size: 56px;
            line-height: 120%;
            color: #FFFFFF;
            opacity: 0.3;
        }
        
        .active .tab-content-para {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: 18px;
            line-height: 160%;
            letter-spacing: 0.5px;
            padding: 15px 0;
            color: #FFFFFF;
        }
    </style>
</head>

<body>
    <div class="tabs">
        <div class="tab-section">
            <div class="tab active" onclick="showTab(0)">
                <p class="tab-content-head">Reviews</p>
                <p class="tab-content-para">
                    Be an influence, have a voice, and share your thoughts through User Reviews.
                </p>
                <button class="tab-content-button">
                    Start reviewing
                    <svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M5.99935 0.166748L5.05935 1.10675L8.77935 4.83341H0.666016V6.16675H8.77935L5.05935 9.89341L5.99935 10.8334L11.3327 5.50008L5.99935 0.166748Z"
                            fill="url(#paint0_linear_206_987)" />
                        <defs>
                            <linearGradient id="paint0_linear_206_987" x1="0.666015" y1="10.8334" x2="9.51603"
                                y2="12.1726" gradientUnits="userSpaceOnUse">
                                <stop stop-color="#F48D42" />
                                <stop offset="0.53125" stop-color="#FF6120" />
                            </linearGradient>
                        </defs>
                    </svg>
                </button>
            </div>
            <div class="tab" onclick="showTab(1)">
                <p class="tab-content-head">Explore</p>
                <p class="tab-content-para">
                    Be an influence, have a voice, and share your thoughts through User Reviews.
                </p>
                <button class="tab-content-button">
                    Start reviewing
                    <svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M5.99935 0.166748L5.05935 1.10675L8.77935 4.83341H0.666016V6.16675H8.77935L5.05935 9.89341L5.99935 10.8334L11.3327 5.50008L5.99935 0.166748Z"
                            fill="url(#paint0_linear_206_987)" />
                        <defs>
                            <linearGradient id="paint0_linear_206_987" x1="0.666015" y1="10.8334" x2="9.51603"
                                y2="12.1726" gradientUnits="userSpaceOnUse">
                                <stop stop-color="#F48D42" />
                                <stop offset="0.53125" stop-color="#FF6120" />
                            </linearGradient>
                        </defs>
                    </svg>
                </button>
            </div>
            <div class="tab" onclick="showTab(2)">
                <p class="tab-content-head">Channel Pitch</p>
                <p class="tab-content-para">
                    Be an influence, have a voice, and share your thoughts through User Reviews.
                </p>
                <button class="tab-content-button">
                    Start reviewing
                    <svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M5.99935 0.166748L5.05935 1.10675L8.77935 4.83341H0.666016V6.16675H8.77935L5.05935 9.89341L5.99935 10.8334L11.3327 5.50008L5.99935 0.166748Z"
                            fill="url(#paint0_linear_206_987)" />
                        <defs>
                            <linearGradient id="paint0_linear_206_987" x1="0.666015" y1="10.8334" x2="9.51603"
                                y2="12.1726" gradientUnits="userSpaceOnUse">
                                <stop stop-color="#F48D42" />
                                <stop offset="0.53125" stop-color="#FF6120" />
                            </linearGradient>
                        </defs>
                    </svg>
                </button>
            </div>
        </div>
        <div class="content-section">
            <div class="tab-content active">Content for Tab 1</div>
            <div class="tab-content">Content for Tab 2</div>
            <div class="tab-content">Content for Tab 3</div>
        </div>
    </div>
</body>
<script>
    function showTab(n) {
        // Get all the tab content and hide them
        var tabContent = document.getElementsByClassName("tab-content");
        for (var i = 0; i < tabContent.length; i++) {
            tabContent[i].classList.remove("active");
        }
        // Get all the tabs and remove the active class
        var tab = document.getElementsByClassName("tab");
        for (var i = 0; i < tab.length; i++) {
            tab[i].classList.remove("active");
        }
        // Show the current tab content and add the active class to the current tab
        tabContent[n].classList.add("active");
        tab[n].classList.add("active");
    }
</script>

</html>