HTML code breaks my masonry grids - Support | Kriesi.at

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
February 14, 2021 at 11:26 am #1280392

carolemeziat
Participant

Hello,
I’m trying to insert an HTML block to pop-up my calendly agenda at the top of my website’s front page.
When I do that, the whole page is working ok except that the masonry grid that normally show my recent blog posts is not working anymore (I have a blank hole on my page instead).
How can I solve that?
Thank you very much!

February 16, 2021 at 8:41 am #1280735

Rikard
Keymaster

Hey carolemeziat,

Could you share the code which you are trying to add, and where you are trying to add it please?

Best regards,
Rikard

February 16, 2021 at 6:19 pm #1281451

carolemeziat
Participant

Hello,

Of course. Here is the code I want to add:

“<!– Calendly link widget begin –>
<link href=”https://assets.calendly.com/assets/external/widget.css” rel=”stylesheet”>
<script src=”https://assets.calendly.com/assets/external/widget.js” type=”text/javascript”></script>
<div class=’avia-button-wrap avia-button-center avia-builder-el-21 avia-builder-el-no-sibling ‘ ><span class=’avia_iconbox_title’ >PRENDRE RDV POUR UN PREMIER APPEL GRATUIT</span><span class=’avia_button_background avia-button avia-button-fullwidth avia-color-theme-color-highlight’ ></span></div>
<!– Calendly link widget end –>”

And I’m trying to add it on two pages:
– Accueil (home page): to replace the fist button “DÉCOUVRIR MON PROGRAMME DE COACHING”
– Boite à outil (ressources): to replace the first button “DÉCOUVRIR MON PROGRAMME DE COACHING”
On both I have a masonry grid that doesn’t work anymore when I insert the code.

Please note that this code is available and working on the page Le Programme (coachings) on the first button “PRENDRE RDV POUR UN PREMIER APPEL GRATUIT”.

Thank you very much for your help!

February 18, 2021 at 4:36 pm #1282020

Ismael
Moderator

Hi,

Thank you for the info.

Another user was trying to add the same widget from calendly and we noticed that the issue occurs when he/she tries to add the script tag directly in the code block, so we recommended using the wp_enqueue_script and wp_enqueue_style to properly load the scripts and stylesheets.

// https://kriesi.at/support/topic/use-java-script-in-button/#post-1222022

You could also create a custom shortcode for the script so that you do not have to embed the script tag directly in the builder.

// https://codex.wordpress.org/Shortcode_API

Best regards,
Ismael
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.