I need some help the 3rd party booking iframe that we use causes website to load slowly when Ajax is enabled, how can I solve this?

Site URL: https://lifelab.world/spaces/#Booking

Hello my dear Squarespace friends!

I am seeking for help and finding a solution for this issue, whenever our ajax loading is enabled the code for the 3rd party booking code is not loading properly, it shows and loads properly only when refreshed.

For the meantime, I have disabled the ajax loading so the booking widget code will work easily as a temporary fix. However in the future, I hope I can enable the ajax loading for the website to run smoothly. 

Also I have already contacted SimplyBookme and was advised that there codes should work properly, I am unsure on where the problem is.

Here is the widget code from SimplyBookme:
<script src="//widget.simplybook.it/v2/widget/widget.js"></script>
<script>var widget = new SimplybookWidget({"widget_type":"iframe","url":"https:\/\/lifelab.simplybook.it","theme":"minimal","theme_settings":{"timeline_show_end_time":"1","timeline_modern_display":"as_slots","hide_company_label":"0","timeline_hide_unavailable":"1","sb_base_color":"#08645d","btn_color_1":"#08645d,#08645d,#08645d","link_color":"#66eeff","display_item_mode":"block","body_bg_color":"#ffffff","dark_font_color":"#08645d","light_font_color":"#ffffff","sb_company_label_color":"#01e3ff","hide_img_mode":"0","sb_busy":"#9bc0bd","sb_available":"#08645d"},"timeline":"modern_week","datepicker":"inline_datepicker","is_rtl":false,"app_config":{"predefined":[]}});</script>

I really hope there is a solution for this. Please let me know if there are more details needed in order to find out how to fix this. 

Thank you in advance! 

1 hour ago, Naomi-lifelab said:

Site URL: https://lifelab.world/spaces/#Booking

Hello my dear Squarespace friends!

I am seeking for help and finding a solution for this issue, whenever our ajax loading is enabled the code for the 3rd party booking code is not loading properly, it shows and loads properly only when refreshed.

For the meantime, I have disabled the ajax loading so the booking widget code will work easily as a temporary fix. However in the future, I hope I can enable the ajax loading for the website to run smoothly. 

Also I have already contacted SimplyBookme and was advised that there codes should work properly, I am unsure on where the problem is.

Here is the widget code from SimplyBookme:
<script src="//widget.simplybook.it/v2/widget/widget.js"></script>
<script>var widget = new SimplybookWidget({"widget_type":"iframe","url":"https:\/\/lifelab.simplybook.it","theme":"minimal","theme_settings":{"timeline_show_end_time":"1","timeline_modern_display":"as_slots","hide_company_label":"0","timeline_hide_unavailable":"1","sb_base_color":"#08645d","btn_color_1":"#08645d,#08645d,#08645d","link_color":"#66eeff","display_item_mode":"block","body_bg_color":"#ffffff","dark_font_color":"#08645d","light_font_color":"#ffffff","sb_company_label_color":"#01e3ff","hide_img_mode":"0","sb_busy":"#9bc0bd","sb_available":"#08645d"},"timeline":"modern_week","datepicker":"inline_datepicker","is_rtl":false,"app_config":{"predefined":[]}});</script>

I really hope there is a solution for this. Please let me know if there are more details needed in order to find out how to fix this. 

Thank you in advance! 

You may need to use Squarespace ajax loader

1. Place this code on footer

<script src="//widget.simplybook.it/v2/widget/widget.js"></script>

2. Place this code where you want the frame to be loaded

<script>
document.addEventListener('DOMContentLoaded', widgetLoad);
window.addEventListener('mercury:load', widgetLoad);

function widgetLoad(){
   var widget = new SimplybookWidget({"widget_type":"iframe","url":"https:\/\/lifelab.simplybook.it","theme":"minimal","theme_settings":{"timeline_show_end_time":"1","timeline_modern_display":"as_slots","hide_company_label":"0","timeline_hide_unavailable":"1","sb_base_color":"#08645d","btn_color_1":"#08645d,#08645d,#08645d","link_color":"#66eeff","display_item_mode":"block","body_bg_color":"#ffffff","dark_font_color":"#08645d","light_font_color":"#ffffff","sb_company_label_color":"#01e3ff","hide_img_mode":"0","sb_busy":"#9bc0bd","sb_available":"#08645d"},"timeline":"modern_week","datepicker":"inline_datepicker","is_rtl":false,"app_config":{"predefined":[]}});
}
</script>

On 11/11/2021 at 11:19 PM, bangank36 said:

You may need to use Squarespace ajax loader

1. Place this code on footer

<script src="//widget.simplybook.it/v2/widget/widget.js"></script>

2. Place this code where you want the frame to be loaded

<script>
document.addEventListener('DOMContentLoaded', widgetLoad);
window.addEventListener('mercury:load', widgetLoad);

function widgetLoad(){
   var widget = new SimplybookWidget({"widget_type":"iframe","url":"https:\/\/lifelab.simplybook.it","theme":"minimal","theme_settings":{"timeline_show_end_time":"1","timeline_modern_display":"as_slots","hide_company_label":"0","timeline_hide_unavailable":"1","sb_base_color":"#08645d","btn_color_1":"#08645d,#08645d,#08645d","link_color":"#66eeff","display_item_mode":"block","body_bg_color":"#ffffff","dark_font_color":"#08645d","light_font_color":"#ffffff","sb_company_label_color":"#01e3ff","hide_img_mode":"0","sb_busy":"#9bc0bd","sb_available":"#08645d"},"timeline":"modern_week","datepicker":"inline_datepicker","is_rtl":false,"app_config":{"predefined":[]}});
}
</script>

 

Hello bangak36,

Thank you so much for you response. 🙏 I am so happy that someone responded immediately.

I have recorded my actions in trying the script that you have given me. Please see the video attached

0-2:07 - I have placed the scripts as per your instructions and enabled the Ajax loading, and refreshed the website, however when I refreshed the website the same issue still happens you can see that on (1:46 mark) the booking block has no content, and whenever I reload it only has the booking page not the page where in the booking block is placed (2:00 mark)

2:21-4:05 - I disabled Ajax again, and applied the orignal widget code from the booking site. Plus I removed the script on the footer, and everything went back to normal, the booking blog where the iframe was, was loading properly again. All links going to the booking block (iframe located) are all working. 

I am a bit confused in what is going on. 😞 Did I do something wrong? 😞 Please let me know. I truly appreciate your kindness in helping me on this.  

Sorry for the low quality of the video the max upload size is only 48.83mb.

Thank you again!