Event Registration Cap using tokens

[KaitlynNelson1]

This is the test program LP

https://merakiresources.cisco.com/SFIDProgramTemplateTest_RegistrationPage.html

[SanfordWhiteman]

Looks like you accidentally commented out all  the code. Make sure all line breaks are preserved, otherwise the whole inner text gets commented out by the old-school // <![CDATA[ wrapper. (By the way, if you‘re manually adding that wrapper, you emphatically do not need it.)

[KaitlynNelson1]

So should I just take out the <![CDATA[ part so it looks like this?

<script>// function processRegCount(current){ var cnt = current.count; var remain = {{my.Max Count}} - cnt; remain = remain.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); console.log('Current Key Count: ' + cnt); if (cnt < {{my.Max Count}}) { document.getElementById('remaining').innerHTML = remain + " spots remaining!"; } else { // do this if limit is reached document.location.href = '{{my.Sorry Page}}'; } } // ]]><script src="https://api.teknkl.com/fbcounter_v1/counter/count/event/program/{{program.id}}?public-api-key=pub:3o..."></script>

I am putting it in our template that has a footerJS section... is that right? Or should this be placed somewhere else?

[SanfordWhiteman]

You can’t just use a mktoString for this — it should be hard-coded in the template or in an editable mktoText area.

[KaitlynNelson1]

For some reason an mktoText area breaks the code and adds the CDATA part along with other unnecessary stuff around it. I had a teammate put it in the code, but for some reason it also didn't work. But when I tested it on a blank template and dragged an HTML element onto the page with form, everything worked. Any ideas on how to get it not to break?

[SanfordWhiteman]

The CDATA wrapper itself isn't a problem, it’s just old-fashioned. It's when all line breaks are removed (as with a mktoString) that the CDATA becomes a fatal problem.

This is fine and will still execute:

<script>// <![CDATA[
  function blahBlah(){
  }
// ]]></script>

This is broken:

<script>// <![CDATA[  function blahBlah(){  }// ]]></script>

[KaitlynNelson1]

Should it work in the custom head html?

[SanfordWhiteman]

Yes and no.

The code will definitely run in the head. But it expects a certain element to be in the DOM already, which it can’t be as the body hasn’t been rendered.

You can wrap the DOM update in DOMContentLoaded:

<script>
function processRegCount(current){
  var cnt = current.count;
  var remain = {{my.Max Count}} - cnt;
  remain = remain.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  console.log('Current Key Count: ' + cnt);
  if (cnt < {{my.Max Count}}) {
    document.addEventListener("DOMContentLoaded", function(e){
      document.getElementById('remaining').innerHTML = remain + " spots remaining!";
    }
  } else {
    // do this if limit is reached
    document.location.href = '{{my.Sorry Page}}';
  }      
}
</script>
<script src="https://api.teknkl.com/fbcounter_v1/counter/event/program/{{program.id}}?public-api-key=pub:3oozcavs7fqwvk92bd974zse&cb=processRegCount"></script>

[mryno-mm]

@SanfordWhiteman if our webhook is now https://api.teknkl.com/flowboost/v21/run?authoringEnv=pro which is an upgrade from v19 - which earlier in this thread we were running, would we need a different URL to call the v21 engine via the script src=call used in the Landing Page?  I'm now seeing the error Uncaught ReferenceError: processRegCount is not defined in the console of the pages the script is running on.

[SanfordWhiteman]

Nope, nothing needs to be changed on the client if you use the new version. Same structure for all counters.