Sue Busher Posted August 30, 2022 Posted August 30, 2022 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?
Adam Omelak Posted August 30, 2022 Posted August 30, 2022 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: JavaScript tag 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> 1
Sue Busher Posted August 30, 2022 Author Posted August 30, 2022 Thank you Adam. That is so helpful. I will give it a go. Really appreciate your help.
Sue Busher Posted August 30, 2022 Author Posted August 30, 2022 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?
Adam Omelak Posted August 31, 2022 Posted August 31, 2022 What's the Site name you are using? I can have a direct look.
Sue Busher Posted September 26, 2022 Author Posted September 26, 2022 @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.
Adam Omelak Posted September 27, 2022 Posted September 27, 2022 @Sue Busher is this how you would like it to show?
Sue Busher Posted September 30, 2022 Author Posted September 30, 2022 Yes, I was going to move so it takes up less space (so under the second column
Adam Omelak Posted September 30, 2022 Posted September 30, 2022 @Sue Busher I have moved the calendar for you on Staff Dashboard. Let me know if that's alright with you.
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now