Jump to content

Trying to run a Tockify script


Sue Busher

Recommended Posts

I'm hoping someone can help me.  Tockify is our school calendar.  To get it working on our website, they have supplied this code:

<div data-tockify-component="mini" data-tockify-calendar="kennet"></div>

<script data-cfasync="false" data-tockify-script="embed" src=https://public.tockify.com/browser/embed.js></script>

Frog blocks this from running, but Graham was able to adapt it:

<script>
    var tockifyScript = document.createElement('script');
    tockifyScript.setAttribute('data-tockify-script','embed');
    tockifyScript.setAttribute('data-cfasync',false);
    tockifyScript.src = "https://public.tockify.com/browser/embed.js";
    document.head.appendChild(tockifyScript);
</script>
<div data-tockify-component="mini" data-tockify-calendar="kennet"></div>

Which works the first time it loads, but if I edit the site its on, it no longer appears.

Can anyone see how to adapt the code to always work, even if the site is edited?

Link to comment
Share on other sites

Hello Sue,

I have managed to fix your issue with Edit mode. A working version is under a test site called: https://www.kennetschool.co.uk/tockify-dev-test

After studying Tockify I have found that their embed code relies on 2 factors:

  1. JavaScript tag
  2. Style tag

Basically they both need removing whenever they existed on site previously in order to trigger the "import" of the Tockify. Here is an extra code which I've added into HTML widget:

    $(function() {
        var $tokifyScriptTag =  $('script[src="https://public.tockify.com/browser/embed.js"]');
        
        if ($tokifyScriptTag.length) {
            $tokifyScriptTag.remove();
            $('style[tkf-embed="true"]').remove();
        }
    });

You need to put that section of code just under the first line of <script> .

Here is a full content of the HTML widget:

<script>
    $(function() {
        var $tokifyScriptTag =  $('script[src="https://public.tockify.com/browser/embed.js"]');
        
        if ($tokifyScriptTag.length) {
            $tokifyScriptTag.remove();
            $('style[tkf-embed="true"]').remove();
        }
    });
    
    var tockifyScript = document.createElement('script');
    tockifyScript.setAttribute('data-tockify-script','embed');
    tockifyScript.setAttribute('data-cfasync',false);
    tockifyScript.src = "https://public.tockify.com/browser/embed.js";
    document.head.appendChild(tockifyScript);
</script>
<div data-tockify-component="mini" data-tockify-calendar="kennet"></div>

 

  • Like 1
Link to comment
Share on other sites

I have just updated the look and feel and it has given me this code:

 

<div data-tockify-component="mini" data-tockify-calendar="kennet"></div>
<script data-cfasync="false" data-tockify-script="embed" src="https://public.tockify.com/browser/embed.js"></script>

 

Sorry, I am not an expert in HTML an can't work out what I need to alter. Would you mind helping me one last time please?

Link to comment
Share on other sites

  • 4 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...