Jump to content

Recommended Posts

Posted

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?

Posted

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
Posted

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?

  • 4 weeks later...
Posted

@Adam Omelak   I am so sorry, I didn't see your response. I would love to get it working on our staff dashboard site (you will see that I have the full key dates one showing at the moment but it is taking too much space, so I would like to use the mini calendar version.

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...