Jump to content

Trying to run a Tockify script


Sue Busher
 Share

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...